Página da Web do Node.js - Parte 2: 7 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:37

Bem-vindo à PARTE 2 !!

Esta é a parte 2 do meu tutorial de aplicativo de site Node.js. Eu dividi este tutorial em duas partes, pois ele separa aqueles que precisam apenas de uma breve introdução e aqueles que desejam um tutorial completo em uma página da web.

Vou passar pela criação do meu site. O seu pode ser diferente, então siga o meu e aprenda as técnicas utilizadas. Depois de escolher um modelo HTML diferente, o fluxo será apenas ligeiramente diferente. Mantenha isso em mente.

Etapa 1: Estrutura do aplicativo

Portanto, meu site segue o gerador expresso, mas usei guidão em vez de jade. Se você gosta de jade, vá em frente! Jade é uma abreviatura HTML sem todos os colchetes e divs. Se você não entende isso, pode visitar o youtube e assistir a alguns tutoriais de HTML.

Eu prefiro e estou mais confortável com HTML e guiador, então foi isso que usei. Para criar um projeto expresso com guiador, execute o comando expresso.

express --hbs nameofmyapp

Em seguida, continue seguindo a etapa na Parte 1 para instalar todo o middleware.

O Express cria uma estrutura de aplicativo muito específica e muito útil. A maioria dos aplicativos node.js segue esta forma com algumas variações.

Na foto anexada você pode ver diferentes pastas e arquivos, abaixo tento explicar tudo isso.

bin

Esta é a pasta que é executada primeiro quando node.js inicia seu servidor. Ele procura o arquivo www e segue este arquivo para execução. O arquivo www diz ao node.js para iniciar um servidor na porta 3000 (isso pode mudar para quase qualquer coisa) e fazer algumas outras coisas, como ouvinte de evento e outros. O mais importante é a porta na qual seu aplicativo está configurado.

node_modules

Nesta pasta está o que é chamado de middle-ware. Eu gosto de explicar o middleware como um software extra para tornar as coisas mais fáceis para você codificar. São basicamente outras bibliotecas com funções predefinidas para você usar. Alguns middleware adicional que usei para este projeto foram Nodemailer, Passport, Nodemon, bycrypt e outros.

público

É para onde iriam todas as suas imagens, CSS e javascript do seu site. Eles são usados diretamente pelas páginas da web.

rotas

Estas são rotas definidas para o seu site. Como uma página inicial, página de login e outros.

Visualizações

Como você pode ver, as visualizações são arquivos.hbs ou.handlebars, qualquer um deles funcionará, bastando uma manipulação do arquivo app.js. Estas são as páginas html do guiador que serão exibidas no navegador. Layout é o seu arquivo de layout principal e, às vezes, está em sua própria subpasta de layout. O arquivo de layout principal chama seus outros arquivos de guiador e os exibe. Isso fará mais sentido quando mergulharmos no código.

app.js

Este é o arquivo principal do seu aplicativo, às vezes é chamado de servidor, depende apenas da configuração. Este arquivo contém toda a configuração do servidor e até algumas funções especiais. Também será um manipulador de erros.

package.json

Este arquivo é criado por express e informa ao npm todo o middleware que você deseja usar em seu projeto. Depois de executar o npm install, todo o middleware chamado neste arquivo será instalado na pasta node_modules.

Etapa 2: faça o layout do seu modelo

Você pode criar todo o seu HTML do zero ou pode usar um modelo. Eu usei um modelo para este site. Outros sites que ajudei a desenvolver codifiquei do zero. A escolha é sua, esta etapa explica o layout do modelo.

Meu aplicativo da web usa um modelo de bootstrap que é ótimo para fazer CSS incrível. Para encontrar modelos, visite este site. Como afirmado antes na etapa anterior, todos os arquivos css, js e img necessários estão na pasta pública. Esses arquivos fazem com que o site tenha uma aparência melhor do que texto simples e é como as imagens são usadas no site.

A fim de fazer com que o estilo de modelagem do guiador funcione com um modelo As páginas são divididas em duas partes. O primeiro é o que chamamos de "layout". O layout são as propriedades que você deseja exibir em todas as páginas da web do seu site. No meu caso, é o cabeçalho, que contém a barra de navegação, e o rodapé, que contém peças extras de navegação e exibição.

O arquivo de layout e outros arquivos de guiador estão na pasta de visualizações. Vou revisar um layout mais simples do gerador expresso que você usou anteriormente para mostrar como o conceito funciona, então você pode ver meu código e compará-los.

Arquivo layout.handlebars gerado expresso

{{title}} {{{body}}}

A verdadeira magia do guiador está nos guiadores {{title}} e {{{body}}}. Portanto, esses dois agem de maneira diferente {{title}} é uma variável que é passada do arquivo index.js nas rotas, uma vez passada para o modelo que é exibida. A tag {{{body}}} pega o que quer que seja chamado na função render em seu arquivo de rota js. No nosso caso, index.js tem esta linha:

res.render ('index', {title: 'Express', count: userCount});

Isso chama o arquivo 'index' de qualquer mecanismo que você esteja usando, jade, guidão e assim por diante, portanto, em nosso caso index.handlebars.

Express gerado index.handlebars

{{título}}

Bem-vindo ao {{title}}

O arquivo index.handlebars é passado como uma variável para a tag {{{body}}} e exibido em sua página da web.

Isso permite que você tenha uma parte estática de seu site e uma parte variável. Isso torna os cabeçalhos e rodapés interessantes, pois você não precisa renderizar novamente a página inteira; ao carregar uma nova página, apenas algumas informações são alteradas.

Etapa 3: formulário de contato

Eu incorporei um formulário de contato em minha página da web para que qualquer pessoa pudesse enviar e-mail ao meu site, com perguntas ou comentários.

Este formulário de contato usou um middleware npm chamado Node Mailer.

Configurando o Node Mailer

Para instalar o node-mailer, você só precisa executar o código abaixo em seu arquivo de nível superior, no nosso caso, myapp.

sudo npm install nodemailer

Depois de instalado, você precisará configurar algumas coisas em seu arquivo app.js.

O primeiro é apenas a dependência, isso informa ao nó que planejamos usar este middleware.

var nodemailer = require ('nodemailer');

Em segundo lugar está o nosso transportador, o transportador é usado para se conectar ao seu servidor de e-mail, no meu caso o gmail.

// Transportador usado para obter conta do gmail

var transporter = nodemailer.createTransport ({serviço: 'gmail', auth: {type: 'OAuth2', usuário: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontent.com', clientSecret.com ': 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

se estiver usando o nodemailer com um servidor de e-mail diferente, procure aqui a documentação e ajuda.

Algumas coisas mudarão de pessoa para pessoa: user, clientId, clientSecret. refreshToken e accessToken.

Seu userId é o e-mail que você deseja usar, criei um novo com o mesmo nome do meu site.

O clientId, clientSecret, refreshToken e accessToken precisam ser encontrados por meio de sua conta do Google.

Se precisar de mais ajuda, você pode acompanhar este vídeo aqui.

Assim que todos esses campos forem preenchidos, adicionaremos os detalhes da nossa mensagem.

Em seguida, precisamos validar se todos os campos em nosso formulário foram inseridos e são respostas válidas.

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + namespace.shift () + ']';} return {param: formParam, msg: msg, value: value};}}));

Precisamos agora obter informações em nosso formulário de contato em nossa página e enviar uma mensagem.

// Postagem do botão de envio do contato, é necessário criar uma página inicial com mensagem de sucesso para o formsapp.post enviado ('/ contact_Form', function (req, res) {// Obter informações do formulário de contato, da homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// cria informações usadas ao enviar uma mensagem de: ' E-mail automático ', para:' [email protected] ', assunto:' Formulário de contato do site: '+ nome, texto:' Você recebeu uma nova mensagem do formulário de contato do seu site. / N / n '+' Aqui são os detalhes: / n / nNome: '+ nome +' / n / nEmail: '+ e-mail +' / n / nTelefone: '+ telefone +' / n / nMensagem: / n '+ mensagem} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email enviado');}}) res.render ('index'); // renderizar nova página inicial, veja como fazer isso com mensagem de sucesso, como página de logout})

Clarão

O Flash é usado para mostrar mensagens após a conclusão das ações. Você pode ver isso quando envia um formulário ou não insere um campo corretamente.

Instale o flash como qualquer outro middleware npm.

sudo npm install connect-flash

var flash = requer ('conectar-flash'); // tinha funcionalidade flash para mostrar mensagens na tela

// Conecte Flashapp.use (flash ());

Habilite o flash que envia e atualiza as mensagens na página da web. Estas são as mensagens que dizem coisas como sucesso ou informações foram inseridas incorretamente.

// Global Vars

app.use (function (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('erro'); res.locals.user = req.user || null; next ();});

Alguns precisam de variáveis associadas ao flash.

Aí está um formulário de contato feito.

Etapa 4: página de login

Isso era apenas algo que eu queria ver se eu poderia fazer e talvez eu use no futuro. Eu só queria explicar o código como ele está em meu repositório git.

Portanto, esta parte usa um pouco mais de middleware npm. Instale o seguinte usando os comandos abaixo.

npm instalar passaporte && npm instalar passaporte local && npm instalar bcryptjs

O && permite que você execute vários comandos com uma linha.

Login e usuários

Você precisará criar um arquivo login.js e user.js na pasta de rotas. Isso será usado para permitir a criação de um usuário, que será armazenado em nosso banco de dados, e permitir que o usuário faça o login verificando o banco de dados.

user.js

var express = require ('express'); var router = express. Router (); var passaporte = requer ('passaporte'); var LocalStrategy = require ('passport-local'). Estratégia; var Usuário = requer ('../ modelos / usuário'); // Registrar router.get ('/ registrar', função (req, res) {res.render ('registrar');}); // Registrar usuário router.post ('/ register', function (req, res) {var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Validação req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('email', 'Email inválido'). isEmail (); req.checkBody ('nome de usuário', 'Nome de usuário obrigatório'). notEmpty (); req.checkBody (' senha ',' A senha é necessária '). notEmpty (); req.checkBody (' senha2 ',' As senhas não correspondem '). equals (req.body.password); var errors = req.validationErrors (); if (erros) {res.render ('registrar', {erros: erros});} else {var newUser = new User ({name: name, email: email, username: username, password: password}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Você está registrado e pode agora fazer o login'); res.redirect (' /Conecte-se'); } });

Dividindo isso peça por peça

Primeiro incluímos todo o middleware necessário e, em seguida, incluímos nosso arquivo de modelo, que é explicado a seguir. Nós roteamos a partir da marca de registro e exibimos o texto do guiador de registro. Então vem a função importante. Isso nos permite registrar um novo usuário em nosso banco de dados. A função verifica se todos os campos são válidos e incluídos no formulário, caso contrário, ela os solicitará. Em seguida, ele verifica se há erros e, se nenhum erro ocorrer, cria um novo usuário com as informações fornecidas. Em seguida, ele redireciona para a página de login, permitindo que você faça o login.

login.js

var express = require ('express');

var roteador = expresso. Router (); var passaporte = exigir ('passaporte'); var LocalStrategy = require ('passaporte-local'). Estratégia; var Usuário = requer ('../ modelos / usuário'); / * GET lista de usuários. * / // Página inicial router.get ('/', função (req, res) {res.render ('login');}); passport.use (new LocalStrategy (function (username, password, done) {User.getUserByUsername (username, function (err, user) {if (err) throw err; if (! user) {return done (null, false, { mensagem: 'Usuário desconhecido'});} User.comparePassword (password, user.password, function (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} else { return done (null, false, {message: 'Senha inválida'});}});});})); passport.serializeUser (function (user, done) {done (null, user.id);}); passport.deserializeUser (function (id, done) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/ login', passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/ login', failureFlash: true}), função (req, res) {res.redirect ('/ painel de controle'); }); router.get ('/ logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Você está desconectado'); res.redirect ('/ homepage');});

módulo.exportações = roteador;

Primeiro, incluímos todo o middleware necessário e, em seguida, incluímos nosso arquivo de modelo, que é explicado a seguir. Nós roteamos a partir da tag de login e exibimos o texto do guiador de login. Em seguida, usamos algumas funções de passaporte para pegar o nome de usuário e a senha inseridos e verificá-los em nosso banco de dados. Também usaremos uma senha criptografada que pode tornar o login um pouco lento em um pi do raspberry. Eu explico isso mais a seguir. Depois de validar o nome de usuário e a senha, você é redirecionado para a página inicial que mostrará o painel conforme configuramos em nosso arquivo de índice. Também adicionamos aqui a capacidade de logout.

Como mencionei anteriormente, também precisaremos criar um modelo para verificar o banco de dados.

Isso é feito criando uma pasta na pasta principal do aplicativo chamada modelos. Nesta pasta, um arquivo user.js também é necessário.

model / user.js

var mangusto = requer ('mangusto');

var bcrypt = require ('bcryptjs'); // Esquema do usuário var UserSchema = mongoose. Schema ({nome de usuário: {type: String, index: true}, senha: {type: String}, email: {type: String}, name: {type: String}}); var User = module.exports = mongoose.model ('User', UserSchema);

module.exports.createUser = function (newUser, callback) {

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = function (username, callback) {var query = {username: username}; User.findOne (consulta, retorno de chamada); } module.exports.getUserById = function (id, callback) {User.findById (id, callback); } module.exports.comparePassword = function (candidatePassword, hash, callback) {bcrypt.compare (candidatePassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Este modelo descreve a aparência de nossos parâmetros de usuário e também como iremos acessá-los. Mencionei antes que criptografaremos nossas senhas. isso é feito para que nenhuma senha seja armazenada no banco de dados em caso de violação. As senhas são hash usando o middleware bcrypt.

Etapa 5: contador de tráfego

Eu queria ver quantos usuários únicos visitaram minha página da web e contar o número de "acessos". Há muitas maneiras de fazer isso. Explicarei como fiz isso.

Isso usa uma coleção mongodb para rastrear quantos usuários visitaram minha página e quantas vezes cada visitante único a visitou.

Como já falamos sobre a configuração de um mongoDB, não vou passar por isso novamente.

Você pode precisar adicionar duas coleções ao seu banco de dados para compilar. Para fazer isso, você pode instalar o RoboMongo se estiver usando uma IU; no entanto, se você estiver usando um framboesa pi sem cabeça como eu, você divertirá os seguintes comandos.

Concha mongo

Para editar um banco de dados, obter informações ou criar uma coleção, você precisará do shell mongo em uma unidade sem cabeça.

Corre

Mongo

Isso abrirá o shell.

Adicionar uma coleção

No meu caso, o banco de dados é denominado loginapp, você pode nomeá-lo como quiser.

use nameofyourdb

Precisamos de uma coleção para conter todos os nossos endereços IP dos usuários que visitam nosso site.

db.creatCollection ("ip")

Em seguida, criamos uma coleção para contar os acessos exclusivos ao nosso site. Isso é inicializado com um id e contagem começando em 0.

db.createCollection ("contagem", {id: "contador de visitas", contagem: 0})

Rastrear endereços IP

Para fazer isso, iremos extrair o IP dos usuários quando eles visitarem nossa página inicial, incrementar nossa contagem e armazená-los para compará-los posteriormente.

Precisamos criar alguns modelos para armazenar nossos esquemas mongoose e adicionar algum código ao nosso arquivo homepage.js.

Criamos count.js e ip.js e os armazenamos em nossa pasta de modelos.

O arquivo ip.js é apenas um esquema para nosso endereço IP

var mangusto = requer ('mangusto'); // manipulador de pacote para mongo

// Esquema de contagem var IpSchema = mongoose. Schema ({ip: {type: String,}, count: {type: Number,}}); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

count.js será chamado por nossa página inicial para iniciar o rastreamento de visitas. Isso é feito conforme abaixo.

//Homepagerouter.get('/ ', function (req, res) {publicIp.v4 (). Then (ip => {Public_ip = ip; console.log ("ipv4:" + Public_ip); // =>' 46.5.21.123 '}); publicIp.v6 (). Then (ip => {console.log ("ipv6" + ip); Public_ip = ip; // =>' fe80:: 200: f8ff: fe21: 67cf ' });

Count.getCount (coleção, ipc, Public_ip, função (contagem) {

}); count = db.collection ('count'). findOne ({id: "contador de visitas"}, função (errar, contagem) {userCount = count.count; res.render ('homepage', {count: userCount}); }); });

Isso acontece sempre que alguém acessa nossa página inicial, neste caso theinternet.onthewifi.com/homepage.

Ele verifica o IP do usuário, ip4 ou ip6, e então armazena esse valor e o envia para count.get.collection, que é uma função armazenada em nosso arquivo count.js.

Depois de verificar a exclusividade do usuário, ele retorna e publica o valor de contagem na página inicial como uma variável de guiador.

O arquivo count.js é o seguinte.

//count.jsvar mongo = require ('mongodb'); // suporta banco de dados var mongoose = require ('mongoose'); // manipulador de pacote para mongo mongoose.connect ('mongodb: // localhost / loginapp'); var db = mongoose.connection; var Ip = requer ('../ modelos / ip'); // Esquema de contagem var CountSchema = mongoose. Schema ({id: {tipo: String,}, contagem: {tipo: Número,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add um novo ip se não estiver no banco de dados e atualize o contador {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // adiciona novo ip a database count.update (// atualizar hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // atualizar contador de ip específico, para ver quem visita mais {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Isso cria o esquema de contagem e nossa função.getCount. A função.getCount verifica o banco de dados para o ip do usuário e, se o encontrar, a função incrementa a contagem desse usuário, não o contador de visitas. No entanto, se o ip do usuário não for encontrado, ele criará um novo objeto de coleção com o ip do usuário e aumentará o contador de visitas em 1.

Em seguida, ele é retornado e exibido na página da web.

Lá você tem um contador de visitas de rastreamento de ip.

Etapa 6: blog

Atualmente, estou tentando desenvolver um blog centralizado em meus interesses sobre software, casas inteligentes e Polaroids. Então criei uma seção de blog. O blog usa páginas html estáticas e a estrutura do guiador. Depois de pesquisar tecnologias melhores para tornar o blog mais fácil, redesenhei meu site usando hugo. Hugo é um gerador de html estático. Eu falo mais sobre isso no tutorial mencionado abaixo.

Etapa 7: Concluída

Lá você vai um tutorial detalhado no meu site node.js hospedado localmente no meu raspberry pi. Se você tiver dúvidas ou comentários, deixe-os abaixo.

Espero que isso ajude outras pessoas por aí.

Para uma abordagem diferente deste site usando hugo, um gerador de página da web estática, consulte meu outro tutorial (em breve).