Node.js-Webseite Teil 2: 7 Schritte

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:19

Willkommen zu TEIL 2!!

Dies ist Teil 2 meines Tutorials zur Node.js-Website-Anwendung. Ich habe dieses Tutorial in zwei Teile unterteilt, da es diejenigen trennt, die nur eine kurze Einführung benötigen, und diejenigen, die ein vollständiges Tutorial auf einer Webseite wünschen.

Ich werde meine Site-Erstellung durchgehen. Ihre können anders sein, also folgen Sie meinen und lernen Sie die verwendeten Techniken kennen. Sobald Sie eine andere HTML-Vorlage auswählen, wird der Ablauf nur geringfügig anders. Behalte dies im Kopf.

Schritt 1: App-Struktur

Meine Seite folgt also dem Express-Generator, ich habe jedoch Lenker anstelle von Jade verwendet. Wenn Sie Jade mögen, probieren Sie es aus! Jade ist Kurzform-HTML ohne alle Klammern und div's. Wenn Sie das nicht verstehen, möchten Sie vielleicht YouTube besuchen und einige HTML-Tutorials ansehen.

Ich bevorzuge und bin damit vertrauter mit HTML und Lenkern, also habe ich das verwendet. Um ein Express-Projekt mit Lenker zu erstellen, führen Sie den Express-Befehl aus.

express --hbs nameofmyapp

Fahren Sie dann mit dem Schritt in Teil 1 fort, um die gesamte Middleware zu installieren.

Express erstellt eine sehr spezifische App-Struktur und eine sehr nützliche. Die meisten node.js-Anwendungen folgen dieser Form mit einigen Variationen.

Auf dem angehängten Foto sieht man verschiedene Ordner und Dateien, unten versuche ich all diese zu erklären.

Behälter

Dies ist der Ordner, der zuerst ausgeführt wird, wenn node.js Ihren Server startet. Es sucht nach der Datei www und folgt dieser Datei zur Ausführung. Die www-Datei weist node.js an, einen Server an Port 3000 zu starten (dies kann sich in fast alles ändern) und einige andere Dinge wie Event-Listener und dergleichen zu tun. Wichtig ist vor allem der Port, auf dem Ihre App eingerichtet ist.

node_modules

In diesem Ordner befindet sich die sogenannte Middleware. Middleware erkläre ich gerne als zusätzliche Software, um Ihnen das Programmieren zu erleichtern. Sie sind im Grunde andere Bibliotheken mit vorgefertigten Funktionen für Sie. Einige zusätzliche Middleware, die ich für dieses Projekt verwendet habe, war Nodemailer, Passport, Nodemon, bycrypt und andere.

öffentlich

Hier würden all Ihre Bilder, CSS und Javascript für Ihre Website landen. Diese werden direkt von den Webseiten verwendet.

Routen

Dies sind definierte Routen für Ihre Site. Wie eine Homepage, eine Anmeldeseite und andere.

Ansichten

Wie Sie sehen können, handelt es sich bei den Ansichten um.hbs-Dateien oder.handlebars. Beide funktionieren nur, wenn Sie die app.js-Datei bearbeiten. Dies sind die HTML-Seiten Ihres Lenkers, die im Browser angezeigt werden. Layout ist Ihre Hauptlayoutdatei und befindet sich manchmal in einem eigenen Layout-Unterordner. Die Hauptlayoutdatei ruft Ihre anderen Lenkerdateien auf und zeigt sie an. Dies wird sinnvoller, wenn wir in den Code eintauchen.

app.js

Dies ist Ihre Haupt-App-Datei, manchmal wird dies als Server bezeichnet, hängt nur von der Einrichtung ab. Diese Datei enthält die gesamte Konfiguration für den Server und sogar einige spezielle Funktionen. Es wird auch ein Fehlerhandler sein.

Paket.json

Diese Datei wird von express erstellt und teilt npm alle Middleware mit, die Sie in Ihrem Projekt verwenden möchten. Sobald Sie npm install ausführen, wird die gesamte Middleware, die in dieser Datei aufgerufen wird, im Ordner node_modules installiert.

Schritt 2: Gestalten Sie Ihre Vorlage

Sie können Ihren gesamten HTML-Code von Grund auf neu erstellen oder eine Vorlage verwenden. Ich habe eine Vorlage für diese Seite verwendet. Andere Websites, bei deren Entwicklung ich geholfen habe, habe ich von Grund auf neu programmiert. Sie haben die Wahl, dieser Schritt erklärt das Vorlagenlayout.

Meine Webanwendung verwendet eine Bootstrap-Vorlage, die großartig darin ist, erstaunliches CSS zu erstellen. Um Vorlagen zu finden, besuchen Sie diese Website. Wie bereits im vorherigen Schritt erwähnt, befinden sich alle benötigten CSS-, JS- und Img-Dateien im öffentlichen Ordner. Diese Dateien lassen die Site besser aussehen als reiner Text und wie Bilder auf der Site verwendet werden.

Damit der Schablonenstil des Lenkers mit einer Schablone funktioniert Die Seiten sind in zwei Teile geteilt. Die erste ist das, was als "Layout" bezeichnet wird. Das Layout sind die Eigenschaften, die auf jeder Webseite innerhalb Ihrer Site angezeigt werden sollen. In meinem Fall ist dies die Kopfzeile, die die Navigationsleiste enthält, und die Fußzeile, die zusätzliche Navigations- und Anzeigeelemente enthält.

Die Layoutdatei und andere Lenkerdateien befinden sich im Ordner "Ansichten". Ich werde ein einfacheres Layout des Express-Generators durchgehen, den Sie zuvor verwendet haben, um zu zeigen, wie das Konzept funktioniert, dann können Sie meinen Code sehen und ihn vergleichen.

Express generierte layout.handlebars-Datei

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

Die wahre Lenker-Magie steckt in den Lenkern {{title}} und {{{body}}}. Diese beiden verhalten sich also unterschiedlich {{title}} ist eine Variable, die von der Datei index.js in Routen übergeben wird, sobald sie an die Vorlage übergeben wird, wird sie angezeigt. Das Tag {{{body}}} nimmt alles, was in der Render-Funktion in Ihrer route js-Datei aufgerufen wird. In unserem Fall hat index.js diese Zeile:

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

Dies ruft die 'index'-Datei der Engine auf, die Sie verwenden, jade, handlebars usw., in unserem Fall also index.handlebars.

Express generierte index.handlebars

{{Titel}}

Willkommen bei {{title}}

Die Datei index.handlebars wird wie eine Variable an das Tag {{{body}}} übergeben und auf Ihrer Webseite angezeigt.

Dies ermöglicht Ihnen einen statischen Teil Ihrer Website und einen variablen Teil. Dies macht Kopf- und Fußzeilen schön, da Sie nicht die ganze Seite neu rendern müssen, beim Laden einer neuen Seite werden nur einige Informationen geändert.

Schritt 3: Kontaktformular

Ich habe ein Kontaktformular in meine Webseite integriert, damit jeder mit Fragen oder Kommentaren eine E-Mail an meine Website senden kann.

Dieses Kontaktformular verwendet eine npm-Middleware namens Node Mailer.

Node Mailer einrichten

Um den Node-Mailer zu installieren, müssen Sie nur den folgenden Code in Ihrer Datei der obersten Ebene ausführen, in unserem Fall myapp.

sudo npm Nodemailer installieren

Nach der Installation müssen Sie einige Dinge in Ihrer app.js-Datei einrichten.

Die erste ist nur die Abhängigkeit, die Node sagt, dass wir diese Middleware verwenden möchten.

var nodemailer = require('nodemailer');

Zweitens ist unser Transporter, der Transporter wird verwendet, um eine Verbindung zu Ihrem Mailserver herzustellen, in meinem Fall gmail.

//Transporter zum Abrufen des Google Mail-Kontos

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

Wenn Sie den Nodemailer mit einem anderen Mailserver verwenden, suchen Sie bitte hier nach Dokumentation und Hilfe.

Einige Dinge ändern sich von Person zu Person: user, clientId, clientSecret. refreshToken und accessToken.

Ihre Benutzer-ID ist die E-Mail, die Sie verwenden möchten. Ich habe eine neue mit dem gleichen Namen wie meine Website erstellt.

Die clientId, clientSecret, refreshToken und accessToken müssen über Ihr Google-Konto gefunden werden.

Wenn Sie weitere Hilfe benötigen, können Sie diesem Video hier folgen.

Sobald alle diese Felder ausgefüllt wurden, fügen wir unsere Nachrichtendetails hinzu.

Als nächstes müssen wir überprüfen, ob alle Felder in unserem Formular eingegeben wurden und gültige Antworten sind.

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

Wir müssen nun Informationen aus unserem Kontaktformular auf unserer Webseite abrufen und eine Nachricht senden.

//Von Kontakt senden Schaltfläche posten, muss eine Homepage mit Erfolgsmeldung für gesendete Formulare erstellenapp.post('/contact_Form', function(req, res){ //Informationen aus dem Kontaktformular abrufen, von homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = { //erzeugt Informationen beim Senden einer Nachricht von: ' Automatische E-Mail', an: '[email protected]', Betreff: 'Website-Kontaktformular: ' + Name, Text: 'Sie haben eine neue Nachricht von Ihrem Website-Kontaktformular erhalten.\n\n' + 'Hier sind die Details:\n\nName: ' + Name + '\n\nE-Mail: ' + E-Mail + '\n\nTelefon: ' + Telefon + '\n\nNachricht:\n' + Nachricht } transporter.sendMail(mailOptions, function (err, res) { if(err){ console.log('Error'); }else { console.log('Email Sent'); } }) res.render('index'); //render neue Homepage, schauen Sie sich an, wie das mit Erfolgsmeldung geht, z. B. Abmeldeseite })

Blinken

Flash wird verwendet, um Nachrichten anzuzeigen, nachdem Aktionen ausgeführt wurden. Sie können dies sehen, wenn Sie ein Formular absenden oder ein Feld nicht richtig eingeben.

Installieren Sie Flash wie andere npm-Middleware.

sudo npm install connect-flash

var flash = require('connect-flash'); // hatte Flash-Funktionalität, um Nachrichten auf dem Bildschirm anzuzeigen

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

Flash aktivieren, der Nachrichten auf der Webseite überträgt und aktualisiert. Dies sind die Nachrichten, die Dinge wie Erfolg sagen oder Informationen wurden falsch eingegeben.

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

Einige benötigen Variablen, die mit Flash verknüpft sind.

Da gehts zu einem gemachten Kontaktformular.

Schritt 4: Anmeldeseite

Dies war nur etwas, was ich sehen wollte, ob ich es tun könnte und vielleicht werde ich es in Zukunft verwenden. Ich wollte nur den Code so erklären, wie er in meinem Git-Repository ist.

Dieser Teil verwendet also ein paar weitere npm-Middleware. Installieren Sie Folgendes mit den folgenden Befehlen.

npm Passport installieren && npm Passport-lokal installieren && npm bcryptjs installieren

Mit dem && können Sie mehrere Befehle in einer Zeile ausführen.

Login und Benutzer

Sie müssen eine login.js- und user.js-Datei in Ihrem Routenordner erstellen. Dies wird verwendet, um die Erstellung eines Benutzers zu ermöglichen, der in unserer Datenbank gespeichert wird, und ermöglicht dem Benutzer, sich durch Überprüfung der Datenbank anzumelden.

user.js

var express = require('express');var router = express. Router(); var Reisepass = require('passport'); var LocalStrategy = require('passport-local'). Strategy; var User = require('../models/user'); // Registrieren router.get('/register', function(req, res){ res.render('register'); }); //Benutzer registrieren 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; // Validierung req.checkBody('name', 'Name ist erforderlich').notEmpty(); req.checkBody('email', 'E-Mail ist erforderlich').notEmpty(); req.checkBody('email', 'E-Mail ist ungültig').isEmail(); req.checkBody('Benutzername', 'Benutzername ist erforderlich').notEmpty(); req.checkBody(' password', 'Passwort ist erforderlich').notEmpty(); req.checkBody('password2', 'Passwörter stimmen nicht überein').equals(req.body.password); var error = req.validationErrors(); if(error){ 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', 'Sie sind registriert und können sich jetzt anmelden'); res.redirect(' /Anmeldung'); } });

Stück für Stück zerlegen

Zuerst binden wir die gesamte benötigte Middleware ein, dann binden wir unsere Modelldatei ein, die unten erklärt wird. Wir routen vom Register-Tag und zeigen unseren Registerlenker-Text an. Dann kommt die wichtige Funktion. Diese ermöglichen es uns, einen neuen Benutzer in unserer Datenbank zu registrieren. Die Funktion überprüft, ob alle Felder gültig und im Formular enthalten sind, andernfalls fordert sie dazu auf. Als nächstes prüft es auf Fehler, und wenn keine Fehler auftreten, erstellt es einen neuen Benutzer mit den angegebenen Informationen. Es leitet dann zur Anmeldeseite weiter, sodass Sie sich anmelden können.

login.js

var express = erfordern('express');

var Router = express. Router();var Passport = require('Passport'); var LocalStrategy = require('passport-local'). Strategy; var User = require('../models/user'); /* GET-Benutzerliste. */ //Homepage router.get('/', function(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, { message: 'Unknown User'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) throw err; if(isMatch){ return done(null, user); } else { return done(null, false, {message: 'Ungültiges Passwort'}); } }); }); })); 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}), function(req, res) { res.redirect('/ Armaturenbrett'); }); router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'Sie sind abgemeldet'); res.redirect('/homepage'); });

module.exports = Router;

Zuerst binden wir die gesamte benötigte Middleware ein, dann binden wir unsere Modelldatei ein, die unten erklärt wird. Wir routen vom Login-Tag und zeigen unseren Login-Lenkertext an. Wir verwenden dann einige Passport-Funktionen, um den eingegebenen Benutzernamen und das Passwort zu übernehmen und mit unserer Datenbank abzugleichen. Wir werden auch ein verschlüsseltes Passwort verwenden, das die Anmeldung auf einem Himbeer-Pi etwas verlangsamen kann. Ich erkläre das als nächstes mehr. Nachdem Sie den Benutzernamen und das Passwort validiert haben, werden Sie auf die Homepage weitergeleitet, die das Dashboard zeigt, wie wir es in unserer Indexdatei einrichten. Wir fügen hier auch die Möglichkeit zum Abmelden hinzu.

Wie ich bereits erwähnt habe, müssen wir auch ein Modell erstellen, um die Datenbank zu überprüfen.

Dazu erstellen Sie unter Ihrem Hauptanwendungsordner einen Ordner namens models. In diesem Ordner wird auch eine Datei user.js benötigt.

model/user.js

var Mungo = erfordern('Mungo');

var bcrypt = require('bcryptjs'); // Benutzerschema var UserSchema = mongoose. Schema({ username: { type: String, index:true }, password: { 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 = Funktion (Benutzername, Rückruf) { var Abfrage = {Benutzername: Benutzername}; User.findOne(Abfrage, Rückruf); } 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); }); }

Dieses Modell beschreibt, wie unsere Benutzerparameter aussehen und wie wir darauf zugreifen. Ich habe bereits erwähnt, dass wir unsere Passwörter verschlüsseln werden. Dies ist so, dass im Falle eines Verstoßes kein persönliches Passwort in der Datenbank gespeichert wird. Die Passwörter werden mit der Middleware bcrypt gehasht.

Schritt 5: Verkehrszähler

Ich wollte sehen, wie viele Unique User meine Webseite besucht haben und die Anzahl der "Hits" zählen. Es gibt viele Möglichkeiten, dies zu tun, ich werde erklären, wie ich dabei vorgegangen bin.

Dies verwendet eine Mongodb-Sammlung, um zu verfolgen, wie viele Benutzer meine Seite besucht haben und wie oft jeder einzelne Besucher besucht hat.

Da wir bereits über das Einrichten einer mongoDB gesprochen haben, werde ich es nicht noch einmal durchgehen.

Möglicherweise müssen Sie Ihrer Datenbank zwei Sammlungen hinzufügen, um sie zu kompilieren. Um dies zu tun, können Sie entweder RoboMongo installieren, wenn Sie eine Benutzeroberfläche verwenden. Wenn Sie jedoch einen kopflosen Himbeer-Pi wie ich verwenden, werden Sie die folgenden Befehle verwenden.

Mongo-Schale

Um eine Datenbank zu bearbeiten, Informationen zu erhalten oder eine Sammlung zu erstellen, benötigen Sie die Mongo-Shell auf einem kopflosen Gerät.

Lauf

Mongo

Dadurch wird die Schale geöffnet.

Eine Sammlung hinzufügen

In meinem Fall heißt die Datenbank loginapp, Sie können sie beliebig benennen.

benutze nameofyourdb

Wir benötigen eine Sammlung, um alle unsere IP-Adressen der Benutzer zu speichern, die unsere Website besuchen.

db.creatCollection("ip")

Als nächstes erstellen wir eine Sammlung, um die einzigartigen Zugriffe auf unsere Website zu zählen. Dieser wird mit einer ID initialisiert und zählt ab 0.

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

IP-Adressen verfolgen

Dazu ziehen wir die IP der Benutzer, wenn sie unsere Homepage besuchen, erhöhen unsere Zählung und speichern sie, um sie später zu vergleichen.

Wir müssen einige Modelle erstellen, um unsere Mungo-Schemas zu speichern, und unserer Datei homepage.js etwas Code hinzufügen.

Wir erstellen count.js und ip.js und speichern sie in unserem Modellordner.

Die Datei ip.js ist nur ein Schema für unsere IP-Adresse

var Mungo = erfordern('Mungo'); //Pakethandler für Mongo

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

count.js wird von unserer Homepage aufgerufen, um das Hit-Tracking zu initiieren. Dies geschieht wie unten beschrieben.

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

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

Dies geschieht jedes Mal, wenn jemand unsere Homepage besucht, in diesem Fall theinternet.onthewifi.com/homepage.

Es überprüft die IP des Benutzers, ip4 oder ip6, und speichert diesen Wert dann, wo er ihn an count.get.collection sendet, eine Funktion, die in unserer count.js-Datei gespeichert ist.

Nach Überprüfung der Eindeutigkeit des Benutzers kehrt es dann zurück und sendet den Zählwert als Lenkervariable an die Homepage.

Die Datei count.js sieht wie folgt aus.

//count.jsvar mongo = require('mongodb'); //unterstützt die Datenbank var mongoose = require('mongoose'); //Pakethandler für mongo mongoose.connect('mongodb://localhost/loginapp'); var db = mongoose.connection; var Ip = require('../models/ip'); //Schema zählen var CountSchema = mongoose. Schema({ id: { type: String, }, count: { type: Number, } }); 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 eine neue IP, falls nicht in der Datenbank, und update counter { var new_ip = new Ip({ ip: Public_ip, count: 1 }); db.collection('ip').save(new_ip); // neue IP hinzufügen zu database count.update(//update hit counter { id: "hit counter"}, { $inc: {count: 1} }) } else // spezifischen IP-Zähler aktualisieren, um zu sehen, wer am häufigsten besucht { ipc.update({ ip: Public_ip }, { $inc: {count: 1} }) } }); }

Dadurch werden das Zählschema und unsere.getCount-Funktion erstellt. Die.getCount-Funktion überprüft die DB auf eine Benutzer-IP und wenn sie sie findet, erhöht die Funktion die Anzahl dieses Benutzers, nicht den Trefferzähler. Wenn die Benutzer-IP jedoch nicht gefunden wird, wird ein neues Sammlungsobjekt mit der Benutzer-IP erstellt und der Trefferzähler um 1 erhöht.

Diese wird dann zurückgegeben und auf der Webseite angezeigt.

Dort haben Sie es einen IP-Tracking-Trefferzähler.

Schritt 6: Blog

Ich versuche derzeit, einen Blog zu entwickeln, der sich auf meine Interessen zu Software, Smart Homes und Polaroids konzentriert. Also habe ich einen Blog-Bereich erstellt. Der Blog verwendet statische HTML-Seiten und das Lenker-Framework. Nachdem ich mich nach besseren Technologien umgesehen habe, um das Bloggen zu erleichtern, habe ich seitdem meine Website mit hugo neu gestaltet. Hugo ist ein statischer HTML-Generator. Ich spreche mehr darüber in dem unten genannten Tutorial.

Schritt 7: Fertig

Dort finden Sie ein ausführliches Tutorial auf meiner node.js-Website, die lokal auf meinem Raspberry Pi gehostet wird. Wenn Sie Fragen oder Kommentare haben, hinterlassen Sie diese bitte unten.

Ich hoffe, das hilft anderen da draußen.

Eine andere Herangehensweise an diese Site mit hugo, einem statischen Webseiten-Generator, finden Sie in meinem anderen Tutorial (demnächst).