Este artigo é alterado em relação ao guia de iniciantes "[Tradução] de Feiyu para desenvolvedores de front-end, construindo Node.js, Express, Jade, servidor MongoDB do zero. A razão pela qual o Jade foi substituído por EJS é porque eu acho que os EJs estão mais alinhados com os Habits e os programadores da Web, ou melhor, deve ser mais importante dos Habits e dos Habits e, como os programadores de Web, que deve ser mais importante dos Habits e, em que os programadores de tempo.
Parte 1 Instalação em 15 minutos
Se você realmente aprender do zero, reserve um tempo para construir o ambiente primeiro. Não é difícil, estou usando o Win8, então isso parece um pouco diferente daqueles tutoriais usando Mac e Ubuntu ou outros sistemas *Nix, mas é aproximadamente o mesmo.
Etapa 1 Instale o Node.js
É fácil ir ao site oficial do Node.JS e clicar no botão Green Big Install, que detectará automaticamente seu sistema e fornecerá um download do arquivo de instalação correto. (Caso contrário, clique no botão de download para selecionar o download necessário). Execute o instalador, e tudo bem. Você instalou o Node.js e o NPM (Node Package Manager) para instalar facilmente vários pacotes úteis no nó.
Etapa 2 Instale Express
Agora que deixamos o nó executar, precisamos de outra coisa para nos permitir criar um site disponível. Em seguida, precisamos instalar o Express, que é uma estrutura que vira o nó de um aplicativo original para um servidor da web mais semelhante que geralmente usamos. Precisamos começar com o Express, porque precisamos da funcionalidade de andaimes que ele fornece. Vamos entrar neste comando:
A cópia do código é a seguinte:
c:/node> npm install -g express
Dessa forma, o Express é instalado corretamente em nosso nó e foi definido como disponível globalmente. Você verá um monte de saída na janela da linha de comando, principalmente HTTP 304 e receberá solicitações, o que é normal. Express deve ser instalado e disponível.
Etapa 3 Crie um projeto expresso
Vamos usar o Express e o EJS, mas não para o pré -processamento do CSS. Vamos escritos à mão alguns CSs. Precisamos usar EJs ou outros motores de modelo para processar o nó e expressar dados. Se você conhece o HTML, o EJS não é difícil. Lembre -se de que você precisa se concentrar ou as coisas podem ser propensas a erros.
Agora digite a mesma janela da linha de comando:
A cópia do código é a seguinte:
C:/Node> Sessões expressas Nodetest1
Entre e você verá um monte de coisas assim:
A cópia do código é a seguinte:
C:/Node> Express -Sessions NodeTest1
Criar: NodeTest1
Criar: NodeTest1/Package.json
Criar: NodeTest1/App.js
Criar: NodeTest1/Rotas
Criar: nodeTest1/rotas/index.js
Criar: NodeTest1/rotas/user.js
Criar: NodeTest1/Views
Criar: NodeTest1/Views/Index.ejs
Criar: NodeTest1/Public/Images
Criar: NodeTest1/Public/JavaScripts
Criar: NodeTest1/Public
Criar: NodeTest1/Public/Stylesheets
Criar: NodeTest1/Public/Stylesheets/style.css
Instale dependências:
$ CD NodeTest1 && NPM Instale
Execute o aplicativo:
$ Node App
Etapa 4 Editar dependências
OK, temos algumas estruturas básicas de projeto agora, mas ainda não terminou. Você notará que o processo de instalação do Express cria um arquivo chamado package.json no seu diretório NodeTest1. Abra o arquivo com um editor de texto. Deve ser assim.
A cópia do código é a seguinte:
{
"Nome": "Nome do aplicativo",
"versão": "0.0.1",
"privado": verdadeiro,
"Scripts": {
"Start": "Node App.js"
},
"Dependências": {
"Express": "3.4.8",
"EJS": "*"
}
}
Este é um arquivo de formato JSON padrão que indica nosso aplicativo e suas dependências. Precisamos adicionar algo. Por exemplo, chamadas para MongoDB e Monk. Altere a parte de dependências para isso:
A cópia do código é a seguinte:
"Dependências": {
"Express": "3.4.8",
"EJS": "*",
"MongoDB": "*",
"Monk": "*"
}
Etapa 5 Instale dependências
Agora definimos as dependências do projeto. * dirá ao NPM para "instalar a versão mais recente". Retorne à janela da linha de comando, digite o diretório NodeTest1 e digite:
A cópia do código é a seguinte:
C:/node/nodetest1> instalação npm
Ele gera um monte de coisas. Isso ocorre porque lê diretamente nosso arquivo JSON modificado, reconhece as dependências e instala os arquivos necessários. Após a conclusão da instalação do NPM, você deve ter um diretório Node_modules contendo todos os arquivos de dependência necessários para o nosso projeto.
Agora temos um aplicativo completo e ele está pronto para ser executado. Vamos tentar! Verifique se o seu diretório atual é o diretório NodeTest1, digite:
A cópia do código é a seguinte:
C:/node/nodeTest1> node app.js
Depois de entrar no carro, você verá:
A cópia do código é a seguinte:
Servidor expresso ouvindo na porta 3000
maravilhoso. Abra o navegador e digite http: // localhost: 3000, e você poderá ver uma página de boas -vindas no Express.
Agora você começou a executar seu próprio Node JS WebServer com o EXPRESS Engine e o EJS HTML Model Engine. Não é muito difícil, certo?
A parte 2 está aqui, vamos escrever "Olá, mundo!"
Abra seu editor de texto comumente usado ou outro IDE, eu pessoalmente gosto de usar texto sublime. Abra o App.js no seu diretório NodeTest1, e este arquivo é o núcleo do seu aplicativo. Você deve ver algo assim:
A cópia do código é a seguinte:
var express = requer ('expresso');
var rotas = requer ('./ rotas');
var user = requer ('./ rotas/usuário');
var http = requer ('http');
var caminho = requer ('caminho');
Isso apenas define um monte de variáveis JavaScript e aponta para alguns pacotes e dependências, funções de nó e rotas. As rotas é equivalente a uma coleção de modelos e controladores no MVC. É responsável pelo encaminhamento de solicitações e também contém alguma lógica de processamento. A Express criou todas essas coisas para nós e agora ignoramos a rota do usuário e começamos a escrever a rota de nível superior (controlada por rotas/index.js).
No final do arquivo acima:
A cópia do código é a seguinte:
var app = express ();
Esta frase é crucial. Ele instancia expressa e atribui valor à nossa variável de aplicativo. O conteúdo a seguir precisa usar essa variável para configurar vários parâmetros expressos. Continue a entrar:
A cópia do código é a seguinte:
// Todos os ambientes
app.set ('porta', process.env.port || 3000);
App.Set ('Views', Path.Join (__ Dirname, 'Views'));
App.set ('View Engine', 'EJS');
App.Use (Express.Favicon ());
App.Use (Express.logger ('Dev'));
App.Use (Express.BodyParser ());
App.Use (Express.MetHODoverRide ());
App.Use (App.Router);
App.Use (Express.static (Path.Join (__ Dirname, 'Public')));
Aqui, configuramos a porta, procure o diretório de visualizações, qual mecanismo de modelo usar para lidar com essas visualizações e algumas outras coisas. Também preste atenção à última linha, que diz ao Express para hospedar os arquivos estáticos no público/ diretório como arquivos no diretório de nível superior. Por exemplo, seu diretório de imagem é armazenado em c:/node/nodetest1/public/imagens/, mas o endereço de acesso real é http: // localhost: 3000/imagens/.
Nota: você precisa colocar esta linha
A cópia do código é a seguinte:
App.Use (Express.BodyParser ());
Mudar para
A cópia do código é a seguinte:
App.Use (Express.urlencoded ());
Isso é para ignorar as informações de aviso na janela do nó durante a operação de alguns aplicativos. Principalmente alguns expressos e seu plug-in podem ser modificados no futuro. Se você não fizer essa modificação, receberá vários avisos de que uma determinada função expirará em breve quando o programa for executado.
Em seguida, adicione:
A cópia do código é a seguinte:
// apenas desenvolvimento
if ('Development' == App.get ('Env')) {
App.Use (Express.errorHandler ());
}
Dessa forma, você pode fazer algumas verificações de erro durante o desenvolvimento.
Continue a aumentar:
A cópia do código é a seguinte:
app.get ('/', rotas.index);
app.get ('/usuários', user.list);
Isso informará a rota em qual rota usar quando uma solicitação de URI chegar. Observe que a variável do usuário é definida anteriormente e mapeada para /routtes/user.js. Chamaremos a função de lista definida neste arquivo. Uma lista de usuários pode ser exibida aqui.
Continue a aumentar:
A cópia do código é a seguinte:
http.createServer (app) .listen (app.get ('porta'), function () {
console.log ('servidor expresso de escuta na porta' + app.get ('porta'));
});
Por fim, crie um servidor HTTP e inicie -o. É isso.
(O conteúdo acima está completo no modelo gerado pelo novo Express e não precisa ser escrito nele)
Agora, vamos escrever algo útil. Não vamos escrever "Hello World!" diretamente em nossa página de índice. Aproveitaremos a oportunidade para aprender a usar o roteamento de rota e aprender como o mecanismo EJS funciona. Adicione uma linha após o parágrafo app.get () do arquivo App.js acima:
App.get ('/helloworld', rotas.helloworld);
Se você pressionar Ctrl+C na janela da linha de comando para encerrar o processo do App.js e reiniciá -lo e, em seguida, use o navegador para acessar http: // localhost: 3000/helloworld, você receberá um emocionante erro de nós e um monte de avisos de falha na janela da linha de comando. Isso ocorre porque não modificamos a rota para processar esse caminho. Venha e faça isso. Em seu editor, vá para o diretório de rotas, encontre index.js e abra -o. Deve ser assim:
A cópia do código é a seguinte:
/*
* Vá para casa.
*/
exports.index = function (req, res) {
res.render ('index', {title: 'Express'});
};
Vamos adicionar uma nova página. Prefiro criar um arquivo de rota independente para cada diretório de primeiro nível, mas agora não estamos planejando criar uma estrutura de diretório completa para o Helloworld em visualizações, por isso usamos rotas de índice por enquanto. Adicione no final deste arquivo:
A cópia do código é a seguinte:
exports.helloworld = function (req, res) {
res.render ('helloworld', {title: 'hello, mundo!'});
};
Será responsável por lidar com essa solicitação de URI, mas agora não temos uma página real para fazer a render render, que é por isso que o EJS é responsável. Vá para o seu diretório de visualizações, Open Index.ejs e salve -o como arquivo helloworld.ejs. Agora deve ficar assim:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<title> < %= title %> </title>
<link rel = 'Stylesheet' href = '/stylesheets/style.css'/>
</head>
<Body>
<H1> < %= title %> </h1>
<p> Bem -vindo ao < %= título %> </p>
</body>
</html>
Deve ser fácil de entender.
Salve o arquivo. Pressione Ctrl+C na janela da linha de comando para interromper o app.js e digite o Node App.js para reiniciá -lo. Dica: Quando você modifica um arquivo de modelo EJS, não precisa reiniciar o servidor. Mas quando você altera um arquivo JS, como o App.js ou um arquivo JS de roteamento, você deve reiniciar o servidor para ver o efeito.
Após o início do servidor, o servidor abre http: // localhost: 3000/helloworld e você poderá ver esta bela interface:
tudo bem! Agora que temos as rotas que podem lidar com nossos modelos, vemos o efeito que queremos. Em seguida, vamos fazer alguns modelos (camada de dados).
Parte 3 Crie um banco de dados e leia os dados
Etapa 1 Instale o MongoDB
Vamos fechar o editor de texto primeiro e retornar à janela da linha de comando. Primeiro use seu navegador, abra http://mongodb.org/ e faça o download do Mongo. Clique no link de download no menu principal para encontrar a versão que combina com você. Para Win8 de 64 bits, faça o download da versão de 64 bits *2008r2+. Após o download, é um arquivo zip e não é compactado para c:/mongo, c:/programas arquivos/mongo ou o que quer que seja. Isso não importa. Salvamos os dados em nosso diretório NodeTest1.
Etapa 2 Run MongoD e Mongo
Crie dados de subdiretório em nosso diretório NodeTest1 e digite o diretório do bin do seu diretório MongoDB na janela da linha de comando e digite:
A cópia do código é a seguinte:
MONGOD DBPATH C:/NODE/NODETEST1/DADOS
Você verá que o servidor Mongo é iniciado e a primeira startup leva um pouco de tempo, porque requer pré-alocar algum espaço em disco rígido e algumas outras tarefas. Quando solicita "[Initrandlisten] aguardando conexões na porta 27017", está feito. Não há mais nada a fazer, o servidor já está em execução. Agora você precisa abrir outra janela da linha de comando, inserir o diretório do bin do diretório mongto e entrar
A cópia do código é a seguinte:
Mongo
Você verá algumas dicas como esta:
A cópia do código é a seguinte:
C:/Mongo> Mongo
Versão do Shell MongoDB: 2.4.5
conectando a: teste
Neste momento, se você olhar para a janela do MongoD, verá um aviso de que uma conexão foi conectada. Em seguida, usaremos este cliente de linha de comando para processar manualmente nosso banco de dados, mas isso não é necessário para o nosso site.
Etapa 3 Crie um banco de dados
Não se preocupe com o prompt acima para se conectar ao teste. Esse é apenas um banco de dados que o Mongo padroniza quando você não especifica um banco de dados e ele nem criará esse banco de dados chamado teste, a menos que você adicione um registro a ele. Vamos criar nosso próprio banco de dados. Na janela da linha de comando de Mongo, digite:
A cópia do código é a seguinte:
Use nodeTest1
Ele não criará esse banco de dados, a menos que insiremos alguns dados nele.
Etapa 4 Adicione alguns dados
Meu recurso favorito do MongoDB é que ele usa o JSON como estrutura de dados, o que significa que estou muito familiarizado com ele. Se você não estiver familiarizado com o JSON, leia alguns materiais relevantes primeiro, que estão além do escopo deste tutorial.
Adicionamos alguns dados à coleção. Neste tutorial, temos apenas um banco de dados simples, dois campos: nome de usuário e email. Nossos dados se parecem com o seguinte:
A cópia do código é a seguinte:
{
"_id": 1234,
"Nome de usuário": "cwbuecheler",
"E -mail": "[email protected]"
}
Você pode criar seu próprio valor do campo _ID, mas acho melhor deixar Mongo fazê -lo. Ele cria um valor único para cada registro. Vamos ver como funciona. Na janela Mongo, digite:
A cópia do código é a seguinte:
db.userCollection.insert ({"nome de usuário": "testUser1", "email": "[email protected]"})
Dica importante: o db é o banco de dados NodeTest1 que criamos acima, e a UserCollection é a nossa coleção, que é equivalente a uma tabela de dados. Observe que não precisamos criar esta coleção com antecedência, ela será criada automaticamente quando for usada pela primeira vez. Ok, pressione Enter. Se tudo correr bem, você verá ... nada. Isso não é muito bom, digite:
A cópia do código é a seguinte:
db.userCollection.find (). Pretty ()
Se você estiver curioso, o método bonito formatará o conteúdo de saída e adicionará o recuo da nova linha. Deve ser exibido:
A cópia do código é a seguinte:
{
"_id": objectId ("5202b481d2184d390cbf6eca"),
"Nome de usuário": "testUser1",
"E -mail": "[email protected]"
}
Obviamente, o ObjectId que você obtém deve ser diferente, o Mongo gerará automaticamente um. Se você já usou os serviços de interface JSON antes, você acha, uau, chamar isso na web deve ser muito simples! Bem, você está certo.
Dica: como um serviço formal, você não deseja que todos os dados estejam no nível superior. Em relação ao design da estrutura de dados do MongoDB, dê uma olhada no Google.
Agora que temos uma peça de dados, vamos adicionar mais pontos. Digitar:
A cópia do código é a seguinte:
Newsstuff = [{"nome de usuário": "testUser2", "email": "[email protected]"}, {"nome de usuário": "testUser3", "email": "[email protected]"}]
db.userCollection.insert (newstuff);
Observe que passamos várias peças de dados para a coleção de uma só vez através de um dados. Que simples! Em seguida, use o comando Find Above e você verá esses três dados.
Agora, vamos integrar o servidor e o banco de dados da Web criados antes.
Etapa 5 Conecte o Mongo ao Nó
Agora, vamos criar uma página e exibir os registros no banco de dados em uma bela tabela. Aqui está o conteúdo HTML que estamos nos preparando para gerar:
A cópia do código é a seguinte:
<ul>
<li> <a href = "Mailto: [email protected]"> testUser1 </a> </li>
<li> <a href = "Mailto: [email protected]"> testUser2 </a> </li>
<li> <a href = "Mailto: [email protected]"> testUser3 </a> </li>
</ul>
Eu sei que isso não é muito científico, mas você pode entender. Estamos apenas tentando criar um programa simples de leitura e gravação de banco de dados, não um site completo. Primeiro, adicionamos um pouco de conteúdo ao App.js (o coração e a alma do nosso programa) para que possamos vincular o MongoDB. Aberto c: /node/nodetest1/app.js, no topo você verá:
A cópia do código é a seguinte:
var express = requer ('expresso');
var rotas = requer ('./ rotas');
var user = requer ('./ rotas/usuário');
var http = requer ('http');
var caminho = requer ('caminho');
Adicione abaixo dele:
A cópia do código é a seguinte:
// novo código
var mongo = requer ('mongodb');
var monk = requer ('monge');
var db = monge ('localhost: 27017/nodetest1');
Essas linhas dirão ao aplicativo que precisamos conectar ao MongoDB. Usamos o Monk para ser responsável por essa conexão. Nosso local de banco de dados é localhost: 27017/NodeTest1. Observe que 27017 é a porta padrão do MongoDB. Se você modificar a porta por algum motivo, também deve alterar o registro aqui. Agora olhe para a parte inferior do arquivo:
A cópia do código é a seguinte:
app.get ('/', rotas.index);
app.get ('/usuários', user.list);
App.get ('/helloworld', rotas.helloworld);
Adicione uma linha abaixo:
A cópia do código é a seguinte:
app.get ('/userlist', rotas.userlist (db));
Esta linha informa ao aplicativo que, quando o usuário acessa o caminho do /UserList, precisamos passar a variável de banco de dados para a rota do usuário. Mas ainda não temos uma rota da lista de usuário, então vamos criar um agora.
Etapa 6 Leia os dados em Mongo e exibi -los
Use seu editor para abrir C: /node/nodetest1/routes/idnex.js, que possui duas rotas: índice e Hello World. Agora vamos adicionar o terceiro:
A cópia do código é a seguinte:
exports.userlist = função (db) {
Função de retorno (req, res) {
var coleção = db.get ('userCollection');
Coleção.find ({}, {}, function (e, docs) {
res.render ('userlist', {
"Userlist": docs
});
});
};
};
Bem, as coisas ficam um pouco complicadas. Aqui, definimos primeiro uma função, recebemos a variável db que passamos e depois chamamos uma página renderiza a mesma das duas rotas anteriores. Dizemos que precisamos ler o UserCollection, fazer uma pesquisa e os dados retornados são salvos na variável DOCS. Depois de lermos o conteúdo, chamamos a renderização para renderizar a página do modelo da lista de usuários e passar a variável de documentos obtidos como a variável da lista de usuário no mecanismo de modelo.
Em seguida, crie nosso modelo EJS. Open Index.ejs no diretório de visualizações, salve como userlist.ejs e modifique seu html para isso:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<title> userlist </title>
<link rel = 'Stylesheet' href = '/stylesheets/style.css'/>
</head>
<Body>
<H1> UserList </h1>
<ul>
<%
para (var i na lista de usuário) {
%>
<li> <a href = ”Mailto: <%= userList [i] .Email%>”> <%= userList [i] .username%> </a> </li>
< %} %>
</ul>
</body>
</html>
Salve o arquivo e reinicie o servidor do nó. Espero que você ainda se lembre de como reiniciar. Abra o navegador e visite http: // localhost: 3000/userlist, e você deve ver uma interface como esta:
Clique no botão Enviar e você verá um erro de "não pode postar para /adduser". Vamos consertar.
Etapa 2 Crie sua função de processamento de banco de dados
Como antes, modificamos o app.js, depois roteando o arquivo e depois o modelo EJS. No entanto, não há necessidade de um modelo EJS aqui, porque iremos para postar mais tarde. Adicione uma linha após o parágrafo app.get () do app.js:
A cópia do código é a seguinte:
app.post ('/adduser', rotas.adduser (db));
Observe que este é app.post, não app.get. Vamos definir a rota. Volte às rotas/index.js e crie nossa função de inserção de banco de dados. Isso é bastante grande, então eu sugiro que você escreva um bom comentário.
A cópia do código é a seguinte:
exports.adduser = função (db) {
Função de retorno (req, res) {
// Obtenha nossos valores de formulário. Estes dependem dos atributos do "nome"
var usuário de usuário = req.body.username;
Var UserEmail = req.body.UserEmail;
// Defina nossa coleção
var coleção = db.get ('userCollection');
// Envie ao banco de dados
coleção.insert ({
"Nome de usuário": nome de usuário,
"Email": correio de usuário
}, function (err, doc) {
if (err) {
// Se falhar, retornar o erro
Res.send ("Houve um problema em adicionar as informações ao banco de dados.");
}
outro {
// Se funcionou, defina o cabeçalho para que a barra de endereço ainda não diga /adduser
res.Location ("UserList");
// e avançar para a página de sucesso
res.Redirect ("UserList");
}
});
}
}
Obviamente, em projetos reais, você ainda precisa fazer muita verificação, como o nome de usuário e o email não permitem duplicação, e o endereço de email deve cumprir com determinadas regras de formato. Mas agora não vamos nos importar com essas coisas. Você pode ver que, quando o banco de dados de inserção é concluído, deixamos o usuário voltar para a página do UserList, onde eles devem ver os dados recém -inseridos.
Esta é a melhor maneira?
Etapa 3 Conecte -se ao banco de dados e escreva os dados
Certifique -se de que seu MongoD está funcionando! Em seguida, reinicie seu servidor de nó. Abra http: // localhost: 3000/NewUser com seu navegador. Agora preenchemos algum conteúdo e clique no botão Enviar. Se for bem, devemos voltar para a página da lista de usuários e ver os novos dados que acabamos de adicionar.
Agora, concluímos oficialmente a leitura e a escrita no banco de dados MongoDB usando o Node.js, Express e EJs. Já somos um programador do NIU X.
Parabéns, realmente. Se você terminou este tutorial seriamente e leva muito a sério o aprendizado, em vez de apenas copiar o código, você deve ter um conceito completo de rotas, visualizações, dados de leitura e dados de gravação. Aqui estão todo o conhecimento que você precisa usar para desenvolver qualquer outro site completo! Não importa o que você pense, acho isso muito legal.
Parte 5 Próximo passo
Agora comece, você tem possibilidades ilimitadas. Você pode dar uma olhada no Mongoose, outro pacote de nós que lida com bancos de dados do MongoDB. É um pouco maior que Monk e tem mais recursos. Você também pode dar uma olhada na Stylus, um motor CSS Express. Você pode pesquisar no Google Node Express Mongo Tutorial e ver o que vem a seguir. Estude muito e melhore todos os dias.
Espero que este tutorial ajude, escrevi isso porque, quando comecei a aprender, realmente precisava de algo assim, mas realmente não consegui encontrá -lo. Se você já viu aqui, muito obrigado!