Pagina Web Node.js Parte 2: 7 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Benvenuti alla PARTE 2!!

Questa è la parte 2 del tutorial dell'applicazione del sito Web Node.js. Ho diviso questo tutorial in due parti in quanto separa coloro che hanno solo bisogno di una breve introduzione e coloro che desiderano un tutorial completo su una pagina web.

Ho intenzione di passare attraverso la creazione del mio sito. Il tuo potrebbe essere diverso, quindi segui il mio e impara le tecniche utilizzate. Una volta scelto un modello HTML diverso, il flusso sarà leggermente diverso. Tienilo a mente.

Passaggio 1: struttura dell'app

Quindi il mio sito segue il generatore espresso, tuttavia ho usato il manubrio anziché la giada. Se ti piace la giada, fallo! Jade è HTML a mano corta senza tutte le parentesi e i div. Se non capisci che potresti voler visitare youtube e guardare alcuni tutorial HTML.

Preferisco e mi trovo più a mio agio con HTML e manubrio, quindi è quello che ho usato. Per creare un progetto express con manubri, esegui il comando express.

express --hbs nomedellamiaapp

Quindi continuare a seguire il passaggio nella Parte 1 per l'installazione di tutti i middleware.

Express crea una struttura di app molto specifica e molto utile. La maggior parte delle applicazioni node.js segue questa forma con alcune variazioni.

Nella foto allegata puoi vedere diverse cartelle e file, di seguito provo a spiegarti tutti questi.

bidone

Questa è la cartella che viene eseguita per prima quando node.js avvia il tuo server. Guarda al file www e segue questo file per l'esecuzione. Il file www dice a node.js di avviare un server sulla porta 3000 (questo può cambiare praticamente in qualsiasi cosa) e fare altre cose come il listener di eventi e così via. La cosa più importante è la porta in cui è configurata la tua app.

node_modules

In questa cartella c'è quello che viene chiamato middleware. Mi piace spiegare il middleware come software aggiuntivo per semplificare la codifica. Sono fondamentalmente altre librerie con funzioni predefinite per l'uso. Alcuni middleware aggiuntivi che ho usato per questo progetto erano Nodemailer, Passport, Nodemon, bycrypt e altri.

pubblico

Qui è dove andrebbero tutte le tue immagini, CSS e javascript per il tuo sito web. Questi sono utilizzati direttamente dalle pagine web.

itinerari

Questi sono percorsi definiti per il tuo sito. Ad esempio una home page, una pagina di accesso e altro.

visualizzazioni

Come puoi vedere, le viste sono file.hbs o.handlebars, funzioneranno e richiederanno solo un po' di manipolazione del file app.js. Queste sono le pagine html del tuo manubrio che verranno visualizzate sul browser. Layout è il file di layout principale e talvolta si trova nella propria sottocartella di layout. Il file di layout principale chiama gli altri file del tuo manubrio e li visualizza, questo avrà più senso quando ci addentreremo nel codice.

app.js

Questo è il file dell'app principale, a volte viene chiamato server, dipende solo dalla configurazione. Questo file contiene tutta la configurazione del server e anche alcune funzioni speciali. Sarà anche un gestore di errori.

pacchetto.json

Questo file è creato da express e dice a npm tutto il middleware che vuoi usare nel tuo progetto. Una volta eseguito npm install, tutto il middleware richiamato in questo file verrà installato nella cartella node_modules.

Passaggio 2: layout del modello

Puoi creare tutto il tuo codice HTML da zero oppure puoi utilizzare un modello. Ho usato un modello per questo sito. Altri siti che ho aiutato a sviluppare li ho codificati da zero. La scelta è tua, questo passaggio spiega il layout del modello.

La mia applicazione web utilizza un modello bootstrap che è ottimo per creare CSS sorprendenti. Per trovare i modelli visita questo sito. Come affermato in precedenza nel passaggio precedente, tutti i file css, js e img necessari si trovano nella cartella pubblica. Questi file migliorano l'aspetto del sito rispetto al testo normale e il modo in cui le immagini vengono utilizzate sul sito.

Per far funzionare lo stile di template del manubrio con un template Le pagine sono divise in due parti. Il primo è quello che viene chiamato "layout". Il layout sono le proprietà che vorresti fossero visualizzate su ogni pagina web del tuo sito. Nel mio caso questa è l'intestazione, che ha la barra di navigazione, e il piè di pagina, che contiene elementi di navigazione e visualizzazione aggiuntivi.

Il file di layout e altri file del manubrio si trovano nella cartella delle viste. Esaminerò un layout più semplice dal generatore espresso che hai usato in precedenza per mostrare come funziona il concetto, quindi puoi vedere il mio codice e confrontarli.

File layout.handlebars generato in modo rapido

{{titolo}} {{{corpo}}}

La vera magia del manubrio è nei manubri {{title}} e {{{body}}}. Quindi questi due agiscono in modo diverso {{title}} è una variabile che viene passata dal file index.js nelle route, una volta passata al template viene visualizzata. Il tag {{{body}}} prende ciò che viene chiamato nella funzione di rendering nel file route js. Nel nostro caso index.js ha questa riga:

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

Questo chiama il file 'index' di qualunque motore tu stia usando, jade, handlebars e così via, quindi nel nostro caso index.handlebars.

Index.handlebars generato in modo rapido

{{titolo}}

Benvenuto in {{title}}

Il file index.handlebars viene passato come una variabile al tag {{{body}}} e visualizzato sulla tua pagina web.

Questo ti permette di avere una parte statica del tuo sito web e una parte variabile. Ciò rende le intestazioni e i piè di pagina piacevoli in quanto non è necessario eseguire nuovamente il rendering dell'intera pagina, quando si carica una nuova pagina, vengono modificate solo alcune informazioni.

Passaggio 3: modulo di contatto

Ho incorporato un modulo di contatto nella mia pagina web in modo che chiunque possa inviare un'e-mail al mio sito con domande o commenti.

Questo modulo di contatto utilizzava un middleware npm chiamato Node Mailer.

Configurazione di Node Mailer

Per installare node-mailer devi solo eseguire il codice qui sotto nel tuo file di primo livello, nel nostro caso, myapp.

sudo npm install nodemailer

Una volta installato, dovrai configurare alcune cose nel tuo file app.js.

Il primo è solo la dipendenza, questo dice al nodo che abbiamo intenzione di usare questo middleware.

var nodemailer = require('nodemailer');

Il secondo è il nostro trasportatore, il trasportatore viene utilizzato per connettersi al tuo server di posta, nel mio caso gmail.

//Transporter utilizzato per ottenere l'account Gmail

var transporter = nodemailer.createTransport({ service: 'gmail', auth: { type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.com',google clientusercontent.apps'.googleSecret: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', access token: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

se si utilizza nodemailer con un server di posta diverso, cercare qui la documentazione e l'aiuto.

Alcune cose cambieranno da persona a persona: user, clientId, clientSecret. refreshToken e accessToken.

Il tuo userId è l'email in cui vuoi usare, ne ho creata una nuova con lo stesso nome del mio sito.

ClientId, clientSecret, refreshToken e accessToken devono essere trovati tramite il tuo account Google.

Se hai bisogno di ulteriore aiuto puoi seguire questo video qui.

Una volta che tutti questi campi sono stati compilati, aggiungeremo i dettagli del nostro messaggio.

Successivamente dobbiamo confermare che tutti i campi nel nostro modulo sono stati inseriti e sono risposte valide.

// 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 }; } }));

Ora abbiamo bisogno di ottenere informazioni dal nostro modulo di contatto sulla nostra pagina web e inviare un messaggio.

//Pubblica dal pulsante di invio del contatto, è necessario creare una home page con un messaggio di successo per i moduli inviatiapp.post('/contact_Form', function(req, res){ //Ottieni informazioni dal modulo di contatto, 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 = { //crea le informazioni utilizzate quando si invia un messaggio da: ' Email automatica', a: '[email protected]', oggetto: 'Modulo di contatto del sito Web: ' + nome, testo: 'Hai ricevuto un nuovo messaggio dal modulo di contatto del tuo sito Web.\n\n' + 'Qui sono i dettagli:\n\nNome: ' + nome + '\n\nEmail: ' + email + '\n\nTelefono: ' + telefono + '\n\nMessaggio:\n' + messaggio } transporter.sendMail(mailOptions, function (err, res) { if(err){ console.log('Error'); }else { console.log('Email inviata'); } }) res.render('index'); //render nuova home page, guarda come farlo con un messaggio di successo, come la pagina di disconnessione })

Veloce

Flash viene utilizzato per mostrare i messaggi dopo che le azioni sono state eseguite. Puoi vederlo quando invii un modulo o non inserisci un campo correttamente.

Installa flash proprio come gli altri middleware npm.

sudo npm install connect-flash

var flash = require('connect-flash'); // aveva la funzionalità flash per mostrare i messaggi sullo schermo

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

Abilita flash che invia e aggiorna i messaggi sulla pagina web. Questi sono i messaggi che dicono cose come il successo o le informazioni sono state inserite in modo errato.

// Vars globali

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('error'); res.locals.user = req.user || null; next(); });

Alcuni necessitano di variabili associate a flash.

Ecco fatto un modulo di contatto creato.

Passaggio 4: pagina di accesso

Questo era solo qualcosa che volevo vedere se potevo fare e forse lo userò in futuro. Volevo solo spiegare il codice così com'è nel mio repository git.

Quindi questa parte utilizza un po' più di middleware npm. Installa quanto segue utilizzando i comandi seguenti.

npm installa passaporto && npm installa passaporto-locale && npm installa bcryptjs

Il && ti consente di eseguire più comandi con una riga.

Login e Utenti

Dovrai creare un file login.js e user.js nella cartella dei percorsi. Questo sarà utilizzato per consentire la creazione di un utente, che verrà archiviato nel nostro database e consentire all'utente di accedere controllando il database.

utente.js

var express = require('express');var router = express. Router(); var passaporto = require('passaporto'); var LocalStrategy = require('passport-local'). Strategy; var Utente = require('../models/user'); // Registra router.get('/register', function(req, res){ res.render('register'); }); //Registra utente 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; // Convalida req.checkBody('name', 'Il nome è richiesto').notEmpty(); req.checkBody('email', 'L'email è richiesta').notEmpty(); req.checkBody('email', 'Email non valida').isEmail(); req.checkBody('username', 'Username richiesto').notEmpty(); req.checkBody(' password', 'La password è richiesta').notEmpty(); req.checkBody('password2', 'Le password non corrispondono').equals(req.body.password); var errors = req.validationErrors(); if(errori){ res.render('register', { errors:errors }); } 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', 'Sei registrato e ora puoi accedere'); res.redirect(' /Accedere'); } });

Scomponendo questo pezzo per pezzo

Per prima cosa includiamo tutto il middleware necessario, quindi includiamo il nostro file modello che viene spiegato di seguito. Ci inoltriamo dal tag del registro e mostriamo il testo del nostro manubrio del registro. Poi arriva la funzione importante. Questi ci consentono di registrare un nuovo utente nel nostro database. La funzione verifica che tutti i campi siano validi e inclusi nel modulo, in caso contrario li richiederà. Successivamente verifica la presenza di errori e, se non si verificano errori, crea un nuovo utente con le informazioni fornite. Quindi reindirizza alla pagina di accesso, permettendoti di accedere.

login.js

var express = require('express');

var router = express. Router();var passaporto = require('passaporto'); var LocalStrategy = require('passport-local'). Strategy; var Utente = require('../models/user'); /* OTTIENI l'elenco degli utenti. */ //Homepage router.get('/', function(req, res){ res.render('login'); }); passaporto.use(new LocalStrategy(function(username, password, done) { User.getUserByUsername(username, function(err, user){ if(err) throw err; if(!user){ return done(null, false, { messaggio: 'Utente sconosciuto'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) throw err; if(isMatch){ return done(null, user); } else { return done(null, false, {message: 'Password non valida'}); } }); }); })); passaporto.serializeUser(function(user, done) { done(null, user.id); }); passaporto.deserializeUser(function(id, done) { User.getUserById(id, function(err, user) { done(err, user); }); }); router.post('/login', passaporto.authenticate('local', {successRedirect:'/', failureRedirect:'/login', failureFlash: true}), function(req, res) { res.redirect('/ Pannello'); }); router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'Sei disconnesso'); res.redirect('/homepage'); });

module.exports = router;

Per prima cosa includiamo tutto il middleware necessario, quindi includiamo il nostro file modello che viene spiegato di seguito. Ci inoltriamo dal tag di accesso e mostriamo il testo del nostro manubrio di accesso. Utilizziamo quindi alcune funzioni del passaporto per prendere il nome utente e la password inseriti e verificarli nel nostro database. Utilizzeremo anche una password crittografata che può rendere l'accesso un po' lento su un raspberry pi. Lo spiego meglio in seguito. Dopo aver convalidato il nome utente e la password, verrai reindirizzato alla homepage che mostrerà la dashboard mentre la configuriamo nel nostro file indice. Aggiungiamo anche qui la possibilità di disconnettersi.

Come ho detto in precedenza, dovremo anche creare un modello per controllare il database.

Questo viene fatto creando una cartella nella cartella principale dell'applicazione chiamata modelli. In questa cartella è necessario anche un file user.js.

modello/utente.js

var mangusta = require('mangusta');

var bcrypt = require('bcryptjs'); // Schema utente var UserSchema = mongoose. Schema({ username: { type: String, index:true }, password: { type: String }, email: { type: String }, name: { type: String } }); var Utente = 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(query, callback); } 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); }); }

Questo modello delinea come appariranno i nostri parametri utente e come vi accederemo. Ho detto prima che crittograferemo le nostre password. questo è così che nessuna password viene memorizzata nel database in caso di violazione. Le password vengono hash utilizzando il middleware bcrypt.

Passaggio 5: contatore del traffico

Volevo vedere quanti utenti unici hanno visitato la mia pagina web e contare il numero di "hits". Ci sono molti modi per farlo, ti spiegherò come ho fatto.

Questo utilizza una raccolta mongodb per tenere traccia di quanti utenti hanno visitato la mia pagina e quante volte ogni visitatore unico ha visitato.

Dal momento che abbiamo già parlato della creazione di un mongoDB, non lo ripeterò.

Potrebbe essere necessario aggiungere due raccolte al database per compilare. Per fare ciò puoi installare RoboMongo se utilizzi un'interfaccia utente, tuttavia se stai utilizzando un Raspberry Pi senza testa come me, ti divertirai con i seguenti comandi.

conchiglia di mongo

Per modificare un db, ottenere informazioni o creare una raccolta avrai bisogno della shell mongo su un'unità headless.

Correre

mongo

Questo aprirà la shell.

Aggiungi una collezione

Nel mio caso, il database si chiama loginapp, puoi chiamarlo come vuoi.

usa nomedeltuodb

Abbiamo bisogno di una raccolta per contenere tutti i nostri indirizzi IP degli utenti che visitano il nostro sito.

db.creatCollection("ip")

Successivamente creiamo una raccolta per contare gli accessi unici al nostro sito. Questo è inizializzato con un id e conta a partire da 0.

db.createCollection("count", {id: "hit counter", count:0})

Traccia indirizzi IP

Per fare ciò, estrarremo l'IP degli utenti quando visitano la nostra home page, incrementeremo il nostro conteggio e li memorizzeremo per confrontarli in seguito.

Abbiamo bisogno di creare alcuni modelli per memorizzare i nostri schemi di mangusta e aggiungere del codice al nostro file homepage.js.

Creiamo count.js e ip.js e li memorizziamo nella nostra cartella dei modelli.

Il file ip.js è solo uno schema per il nostro indirizzo IP

var mangusta = require('mangusta'); // gestore di pacchetti per mongo

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

count.js verrà chiamato dalla nostra homepage per avviare il monitoraggio dei risultati. Questo è fatto come di seguito.

//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(raccolta, ipc, Public_ip, function(count){

}); count = db.collection('count').findOne({id: "hit counter"}, function(err, count){ userCount = count.count; res.render('homepage', {count: userCount}); }); });

Questo accade ogni volta che qualcuno accede alla nostra homepage, in questo caso theinternet.onthewifi.com/homepage.

Controlla l'IP dell'utente, ip4 o ip6, e quindi memorizza quel valore dove lo invia a count.get.collection che è una funzione memorizzata nel nostro file count.js.

Dopo aver verificato l'unicità dell'utente, ritorna e pubblica il valore di conteggio nella home page come variabile del manubrio.

Il file count.js è il seguente.

//count.jsvar mongo = require('mongodb'); //supporta il database var mongoose = require('mongoose'); //gestore del pacchetto per mongo mongoose.connect('mongodb://localhost/loginapp'); var db = mangusta.connessione; var Ip = require('../models/ip'); //Count Schema var CountSchema = mongoose. Schema({ id: { type: String, }, count: { type: Number, } }); var Conteggio = 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 un nuovo ip se non è nel database e aggiorna il contatore { var new_ip = new Ip({ ip: Public_ip, count: 1 }); db.collection('ip').save(new_ip);//add new ip to database count.update(//update hit counter { id: "hit counter"}, { $inc: {count: 1} }) } else//update contatore ip specifico, per vedere chi visita di più { ipc.update({ ip: Public_ip }, { $inc: {count: 1} }) } }); }

Questo crea lo schema di conteggio e la nostra funzione.getCount. La funzione.getCount controlla il DB per l'ip dell'utente e se lo trova, la funzione incrementa il conteggio di quell'utente, non il contatore di visite. Tuttavia, se l'ip dell'utente non viene trovato, creerà un nuovo oggetto di raccolta con l'ip dell'utente e incrementerà il contatore di visite di 1.

Questo viene quindi restituito e visualizzato nella pagina web.

Ecco qua un contatore di hit per il monitoraggio dell'ip.

Passaggio 6: blog

Attualmente sto cercando di sviluppare un blog incentrato sui miei interessi su software, case intelligenti e Polaroid. Così ho creato una sezione blog. Il blog utilizza pagine html statiche e il framework dei manubri. Dopo aver esaminato tecnologie migliori per rendere più facile il blogging, da allora ho riprogettato il mio sito Web utilizzando hugo. Hugo è un generatore di html statico. Ne parlo di più nel tutorial menzionato di seguito.

Passaggio 7: finito

Ecco un tutorial approfondito sul mio sito Web node.js ospitato localmente sul mio Raspberry Pi. Se hai domande o commenti, lasciali qui sotto.

Spero che questo aiuti gli altri là fuori.

Per un approccio diverso a questo sito utilizzando hugo, un generatore di pagine Web statiche, vedere il mio altro tutorial (in arrivo).