Ιστοσελίδα Node.js Μέρος 2: 7 Βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:35

Καλώς ορίσατε στο ΜΕΡΟΣ 2 !!

Αυτό είναι το μέρος 2 του οδηγού εφαρμογής της ιστοσελίδας μου Node.js. Χώρισα αυτό το σεμινάριο σε δύο μέρη, καθώς χωρίζει εκείνους που χρειάζονται μια σύντομη εισαγωγή και εκείνους που θέλουν ένα πλήρες σεμινάριο σε μια ιστοσελίδα.

Θα περάσω από τη δημιουργία της ιστοσελίδας μου. Το δικό σας μπορεί να είναι διαφορετικό, οπότε ακολουθήστε το δικό μου και μάθετε τις τεχνικές που χρησιμοποιούνται. Μόλις επιλέξετε ένα διαφορετικό πρότυπο HTML, η ροή θα είναι ελαφρώς διαφορετική. Έχε αυτό υπόψη σου.

Βήμα 1: Δομή εφαρμογής

Έτσι, ο ιστότοπός μου ακολουθεί τη γεννήτρια εξπρές, ωστόσο χρησιμοποίησα τιμόνι και όχι νεφρίτη. Αν σας αρέσει το νεφρίτη, προχωρήστε το! Το Jade είναι σύντομο HTML χωρίς όλες τις αγκύλες και τα div. Εάν δεν καταλαβαίνετε ότι μπορεί να θέλετε να επισκεφτείτε το youtube και να παρακολουθήσετε κάποια σεμινάρια HTML.

Προτιμώ και είμαι πιο άνετα με το HTML και το τιμόνι, έτσι είναι αυτό που χρησιμοποίησα. Για να δημιουργήσετε ένα έργο express με τιμόνια εκτελέστε την εντολή express.

express --hbs nameofmyapp

Στη συνέχεια, συνεχίστε να ακολουθείτε το βήμα στο Μέρος 1 για την εγκατάσταση όλων των μεσαίων ειδών.

Το Express δημιουργεί μια πολύ συγκεκριμένη δομή εφαρμογών και μια πολύ χρήσιμη που οι περισσότερες εφαρμογές node.js ακολουθούν αυτήν τη φόρμα με κάποια παραλλαγή.

Στη συνημμένη φωτογραφία μπορείτε να δείτε διαφορετικούς φακέλους και αρχεία, παρακάτω προσπαθώ να τα εξηγήσω όλα αυτά.

αποθήκη

Αυτός είναι ο φάκελος που εκτελείται πρώτα όταν το node.js εκκινήσει τον διακομιστή σας. Κοιτάζει το αρχείο www και ακολουθεί αυτό το αρχείο για εκτέλεση. Το αρχείο www λέει στο node.js να ξεκινήσει ένα διακομιστή στη θύρα 3000 (αυτό μπορεί να αλλάξει σχεδόν σε οτιδήποτε) και να κάνει κάποια άλλα πράγματα, όπως ακρόαση συμβάντων και άλλα τέτοια. Το κύριο σημαντικό είναι η θύρα στην οποία έχει ρυθμιστεί η εφαρμογή σας.

node_modules

Σε αυτόν τον φάκελο υπάρχει αυτό που ονομάζεται middle-ware. Μεσαία προϊόντα Μου αρέσει να εξηγώ ως επιπλέον λογισμικό για να διευκολύνω την κωδικοποίηση των πραγμάτων. Βασικά, είναι άλλες βιβλιοθήκες με λειτουργίες που έχουν προετοιμαστεί για χρήση. Κάποια πρόσθετα μεσαία είδη που χρησιμοποίησα για αυτό το έργο ήταν τα Nodemailer, Passport, Nodemon, bycrypt και άλλα.

δημόσιο

Εδώ θα πήγαιναν όλες οι εικόνες, το CSS και το javascript για τον ιστότοπό σας. Αυτά χρησιμοποιούνται απευθείας από τις ιστοσελίδες.

διαδρομές

Αυτά καθορίζουν διαδρομές για τον ιστότοπό σας. Όπως αρχική σελίδα, σελίδα σύνδεσης και άλλες.

προβολές

Όπως μπορείτε να δείτε, οι προβολές είναι αρχεία.hbs ή.handlebars, είτε θα λειτουργήσει, χρειάζεται απλώς κάποια χειραγώγηση του αρχείου app.js. Αυτές είναι οι σελίδες html του τιμονιού σας που θα εμφανίζονται στο πρόγραμμα περιήγησης. Το Layout είναι το κύριο αρχείο διάταξης και μερικές φορές βρίσκεται στον δικό του υποφάκελο διάταξης. Το κύριο αρχείο διάταξης καλεί τα άλλα αρχεία του τιμονιού σας και τα εμφανίζει, αυτό θα έχει περισσότερο νόημα όταν βουτήξουμε στον κώδικα.

app.js

Αυτό είναι το κύριο αρχείο εφαρμογής σας, μερικές φορές αυτό ονομάζεται διακομιστής, εξαρτάται μόνο από τη ρύθμιση. Αυτό το αρχείο έχει όλη τη διαμόρφωση για τον διακομιστή και ακόμη και κάποιες ειδικές λειτουργίες. Θα είναι επίσης χειριστής σφαλμάτων.

πακέτο.json

Αυτό το αρχείο δημιουργείται από το express και λέει στο npm όλο το ενδιάμεσο λογισμικό που θέλετε να χρησιμοποιήσετε στο έργο σας. Μόλις εκτελέσετε την εγκατάσταση npm, όλο το μεσαίο υλικό που καλείται σε αυτό το αρχείο, θα εγκατασταθεί στο φάκελο node_modules.

Βήμα 2: Διάταξη του προτύπου σας

Μπορείτε να δημιουργήσετε όλο το HTML σας από την αρχή ή μπορείτε να χρησιμοποιήσετε ένα πρότυπο. Έχω χρησιμοποιήσει ένα πρότυπο για αυτόν τον ιστότοπο. Άλλοι ιστότοποι που βοήθησα να αναπτυχθούν έχω κωδικοποιήσει από την αρχή. Η επιλογή είναι δική σας, αυτό το βήμα εξηγεί τη διάταξη του προτύπου.

Η διαδικτυακή μου εφαρμογή χρησιμοποιεί ένα πρότυπο bootstrap το οποίο είναι εξαιρετικό για την καταπληκτική CSS. Για να βρείτε πρότυπα επισκεφτείτε αυτόν τον ιστότοπο. Όπως προαναφέρθηκε στο προηγούμενο βήμα, όλα τα απαραίτητα αρχεία css, js και img βρίσκονται κάτω από τον δημόσιο φάκελο. Αυτά τα αρχεία κάνουν τον ιστότοπο να φαίνεται καλύτερος από το απλό κείμενο και τον τρόπο με τον οποίο χρησιμοποιούνται οι εικόνες στον ιστότοπο.

Για να λειτουργήσει το πρότυπο του τιμονιού με ένα πρότυπο, οι σελίδες χωρίζονται σε δύο κομμάτια. Το πρώτο είναι αυτό που αναφέρεται ως "διάταξη". Η διάταξη είναι οι ιδιότητες που θα θέλατε να εμφανίζονται σε κάθε ιστοσελίδα στον ιστότοπό σας. Στην περίπτωσή μου, αυτή είναι η κεφαλίδα, η οποία έχει τη γραμμή πλοήγησης και το υποσέλιδο, το οποίο περιέχει επιπλέον κομμάτια πλοήγησης και οθόνης.

Το αρχείο διάταξης και άλλα αρχεία τιμονιού βρίσκονται στο φάκελο προβολών. Θα εξετάσω μια πιο απλή διάταξη από τη γεννήτρια εξπρές που χρησιμοποιήσατε νωρίτερα για να εμφανίσετε πώς λειτουργεί η έννοια, στη συνέχεια μπορείτε να δείτε τον κώδικα μου και να τους συγκρίνετε.

Express που δημιουργείται στο αρχείο layout.handlebars

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

Η πραγματική μαγεία του τιμονιού βρίσκεται στο τιμόνι {{title}} και {{{body}}}. Αυτά τα δύο λειτουργούν διαφορετικά {{title}} είναι μια μεταβλητή που περνά από το αρχείο index.js σε διαδρομές, αφού περάσει στο πρότυπο εμφανίζεται. Η ετικέτα {{{body}}} παίρνει αυτό που ονομάζεται πάντα στη λειτουργία απόδοσης στο αρχείο διαδρομής js. Στην περίπτωσή μας, το index.js έχει αυτήν τη γραμμή:

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

Αυτό καλεί το αρχείο "ευρετηρίου" του μηχανήματος που χρησιμοποιείτε ποτέ, νεφρίτη, τιμόνι και ούτω καθεξής, έτσι και στην περίπτωσή μας index.handlebars.

Δημιουργία express index.handlebars

{{τίτλος}}

Καλώς ορίσατε στο {{title}}

Το αρχείο index.handlebars μεταφέρεται σαν μεταβλητή στην ετικέτα {{{{body}}} και εμφανίζεται στην ιστοσελίδα σας.

Αυτό σας επιτρέπει να έχετε ένα στατικό τμήμα του ιστότοπού σας και ένα μεταβλητό τμήμα. Αυτό κάνει τις κεφαλίδες και τα υποσέλιδα ωραία, καθώς δεν χρειάζεται να αποδώσετε ξανά ολόκληρη τη σελίδα, όταν φορτώνετε μια νέα σελίδα, αλλάζουν μόνο ορισμένες πληροφορίες.

Βήμα 3: Φόρμα επικοινωνίας

Ενσωμάτωσα μια φόρμα επικοινωνίας στην ιστοσελίδα μου, έτσι ώστε ο καθένας να μπορεί να στείλει μήνυμα ηλεκτρονικού ταχυδρομείου στον ιστότοπό μου, με ερωτήσεις ή σχόλια.

Αυτή η φόρμα επικοινωνίας χρησιμοποίησε ένα npm μεσαίο υλικό που ονομάζεται Node Mailer.

Ρύθμιση του Node Mailer

Για να εγκαταστήσετε το node-mailer πρέπει απλώς να εκτελέσετε τον παρακάτω κώδικα στο αρχείο ανώτερου επιπέδου, στην περίπτωσή μας, το myapp.

sudo npm εγκατάσταση nodemailer

Μόλις εγκατασταθεί, θα χρειαστεί να ρυθμίσετε μερικά πράγματα στο αρχείο app.js.

Το πρώτο είναι μόνο η εξάρτηση, αυτό λέει στον κόμβο ότι σχεδιάζουμε να χρησιμοποιήσουμε αυτό το ενδιάμεσο λογισμικό.

var nodemailer = απαιτώ ('nodemailer');

Ο δεύτερος είναι ο μεταφορέας μας, ο μεταφορέας χρησιμοποιείται για σύνδεση με τον διακομιστή αλληλογραφίας σας, στην περίπτωσή μου gmail.

// Ο μεταφορέας συνήθιζε να λαμβάνει λογαριασμό gmail

var transporter = nodemailer.createTransport ({service: 'gmail', auth: {type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontonto.gr, πελάτης: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

εάν χρησιμοποιείτε nodemailer με διαφορετικό διακομιστή αλληλογραφίας, ανατρέξτε εδώ για τεκμηρίωση και βοήθεια.

Μερικά πράγματα θα αλλάξουν από άτομο σε άτομο: χρήστης, clientId, clientSecret. refreshToken και accessToken.

Το UserId σας είναι το email στο οποίο θέλετε να χρησιμοποιήσετε. Έφτιαξα ένα νέο με το ίδιο όνομα με τον ιστότοπό μου.

Το clientId, clientSecret, refreshToken και accessToken πρέπει να βρεθούν μέσω του λογαριασμού σας Google.

Εάν χρειάζεστε περισσότερη βοήθεια, μπορείτε να ακολουθήσετε αυτό το βίντεο εδώ.

Μόλις συμπληρωθούν όλα αυτά τα πεδία, θα προσθέσουμε τα στοιχεία του μηνύματός μας.

Στη συνέχεια, πρέπει να επιβεβαιώσουμε ότι όλα τα πεδία στη φόρμα μας έχουν εισαχθεί και είναι έγκυρες απαντήσεις.

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

Τώρα πρέπει να λάβουμε πληροφορίες από τη φόρμα επικοινωνίας στην ιστοσελίδα μας και να στείλουμε ένα μήνυμα.

// Δημοσίευση από το κουμπί υποβολής επαφών, πρέπει να δημιουργήσετε μια αρχική σελίδα με μήνυμα επιτυχίας για την υποβληθείσα formsapp.post ('/contact_Form', λειτουργία (απαιτούμενη, res) {// Λήψη πληροφοριών από τη φόρμα επικοινωνίας, από την αρχική σελίδα.hbs var όνομα = req.body.name; var email = req.body.email; var τηλέφωνο = req.body.phone; var message = req.body.message; var mailOptions = {// δημιουργεί πληροφορίες που χρησιμοποιούνται κατά την αποστολή ενός μηνύματος από: Αυτόματο μήνυμα ηλεκτρονικού ταχυδρομείου ', προς:' [email protected] ', θέμα:' Φόρμα επικοινωνίας ιστότοπου: ' + όνομα, κείμενο:' Λάβατε ένα νέο μήνυμα από τη φόρμα επικοινωνίας του ιστότοπού σας. / N / n ' +' Εδώ είναι οι λεπτομέρειες: / n / nΟνομα: ' + όνομα +' / n / nΕmail: ' + email +' / n / nΤηλέφωνο: ' + τηλέφωνο +' / n / nΜήνυμα: / n ' + μήνυμα} transporter.sendMail (mailOptions, λειτουργία (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render νέα αρχική σελίδα, εξετάστε πώς να το κάνετε αυτό με το μήνυμα επιτυχίας, όπως η σελίδα αποσύνδεσης})

Λάμψη

Το Flash χρησιμοποιείται για την εμφάνιση μηνυμάτων μετά την ολοκλήρωση των ενεργειών. Αυτό μπορείτε να το δείτε όταν υποβάλετε μια φόρμα ή δεν εισαγάγετε σωστά ένα πεδίο.

Εγκαταστήστε το φλας όπως και άλλα ενδιάμεσα λογισμικά npm.

sudo npm εγκατάσταση σύνδεσης-φλας

var flash = απαιτούν ('Connect-flash'); // είχε λειτουργία flash για εμφάνιση στα μηνύματα οθόνης

// Συνδέστε το Flashapp.use (flash ());

Ενεργοποιήστε το φλας που ωθεί και ενημερώνει τα μηνύματα στην ιστοσελίδα. Αυτά είναι τα μηνύματα που λένε πράγματα όπως επιτυχία ή πληροφορίες που έχουν εισαχθεί εσφαλμένα.

// Global Vars

app.use (λειτουργία (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ("σφάλμα"); res.locals.user = req.user || null; επόμενο ();});

Ορισμένοι χρειάζονται μεταβλητές που σχετίζονται με το φλας.

Ακολουθεί μια φόρμα επικοινωνίας.

Βήμα 4: Σελίδα σύνδεσης

Αυτό ήταν απλώς κάτι που ήθελα να δω αν θα μπορούσα να το κάνω και ίσως το χρησιμοποιήσω στο μέλλον. Απλώς ήθελα να εξηγήσω τον κώδικα όπως είναι στο git repository μου.

Έτσι, αυτή η μερίδα χρησιμοποιεί μερικά ακόμη npm μεσαίας συσκευής. Εγκαταστήστε τα παρακάτω χρησιμοποιώντας τις παρακάτω εντολές.

npm εγκατάσταση διαβατηρίου && npm εγκατάσταση διαβατηρίου-τοπικό && npm εγκατάσταση bcryptjs

Το && σάς επιτρέπει να εκτελείτε πολλές εντολές με μία γραμμή.

Σύνδεση και χρήστες

Θα χρειαστεί να δημιουργήσετε ένα αρχείο login.js και user.js κάτω από το φάκελο διαδρομών. Αυτό θα χρησιμοποιηθεί για να επιτρέψει τη δημιουργία ενός χρήστη, ο οποίος θα αποθηκευτεί στη βάση δεδομένων μας, και θα επιτρέψει στον χρήστη να συνδεθεί ελέγχοντας τη βάση δεδομένων.

user.js

var express = απαιτούν ('express'); var router = express. Router (); var διαβατήριο = απαιτούν («διαβατήριο») · var LocalStrategy = απαιτούν («διαβατήριο-τοπικό»). var Χρήστης = απαιτεί ('../ μοντέλα/χρήστης'); // Εγγραφή router.get ('/register', function (req, res) {res.render ('register');}); // Εγγραφή χρήστη 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; // Επικύρωση req.checkBody ("όνομα", "Απαιτείται όνομα"). notEmpty (); req.checkBody ("email", "Απαιτείται email").notEmpty (); req.checkBody («email», «Το email δεν είναι έγκυρο»). isEmail (); req.checkBody («όνομα χρήστη», «απαιτείται όνομα χρήστη»). notEmpty (); req.checkBody (' κωδικός πρόσβασης ',' Απαιτείται κωδικός πρόσβασης '). notEmpty (); req.checkBody ("κωδικός πρόσβασης2", "Οι κωδικοί πρόσβασης δεν ταιριάζουν"). ισούται με (req.body.password); σφάλματα var = req.validationErrors (); εάν (σφάλματα) {res.render ('register', {σφάλματα: λάθη});} else {var newUser = new User ({name: name, email: email, username: username, password: password)); User.createUser (newUser, λειτουργία (λάθος, χρήστης) {if (err) ρίξτε err; console.log (χρήστης);}); req.flash ('success_msg', 'Είστε εγγεγραμμένοι και τώρα μπορείτε να συνδεθείτε'); res.redirect (' /Σύνδεση'); } });

Σπάζοντας αυτό κομμάτι κομμάτι

Αρχικά συμπεριλαμβάνουμε όλα τα απαραίτητα μεσαία είδη, στη συνέχεια συμπεριλαμβάνουμε το πρότυπο αρχείο μας το οποίο εξηγείται παρακάτω. Περνάμε από την ετικέτα καταχωρητή και εμφανίζουμε το κείμενο του τιμονιού μας. Τότε έρχεται η σημαντική λειτουργία. Αυτά μας επιτρέπουν να εγγράψουμε έναν νέο χρήστη στη βάση δεδομένων μας. Η συνάρτηση ελέγχει για να βεβαιωθεί ότι όλα τα πεδία είναι έγκυρα και περιλαμβάνονται στη φόρμα, αν όχι, θα τα ζητήσει. Στη συνέχεια ελέγχει για σφάλματα και εάν δεν εμφανιστούν σφάλματα δημιουργεί έναν νέο χρήστη με τις πληροφορίες που δίνονται. Στη συνέχεια, επιστρέφει στη σελίδα σύνδεσης, επιτρέποντάς σας να συνδεθείτε.

login.js

var express = απαιτώ ('express');

var router = express. Router (); var διαβατήριο = απαιτούν («διαβατήριο»). var LocalStrategy = απαιτούν («διαβατήριο-τοπικό»). var Χρήστης = απαιτεί ('../ μοντέλα/χρήστης'); /* ΛΗETΗ καταχώρισης χρηστών. */// Αρχική σελίδα router.get ('/', λειτουργία (req, res) {res.render ('login');}); Pasport.use (νέα LocalStrategy (λειτουργία (όνομα χρήστη, κωδικός πρόσβασης, ολοκληρωμένο)) μήνυμα: 'Άγνωστος χρήστης'});}} User.comparePassword (κωδικός πρόσβασης, user.password, λειτουργία (err, isMatch) {if (err) ρίξτε λάθος; if (isMatch) {return done (null, user);} else { η επιστροφή έγινε (null, false, {message: 'Invalid password'});}});});}))); Pasport.serializeUser (λειτουργία (χρήστης, τελειωμένος) {done (null, user.id);}); pasport.deserializeUser (λειτουργία (id, done) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/login', passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/login', failureFlash: true}), λειτουργία (req, res) {res.redirect ('/ ταμπλό ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You are out out out'); res.redirect ('/homepage');}) ?

module.exports = router;

Αρχικά συμπεριλαμβάνουμε όλα τα απαραίτητα μεσαία είδη, στη συνέχεια συμπεριλαμβάνουμε το πρότυπο αρχείο μας το οποίο εξηγείται παρακάτω. Περνάμε από την ετικέτα σύνδεσης και εμφανίζουμε το κείμενο του τιμονιού εισόδου. Στη συνέχεια, χρησιμοποιούμε ορισμένες λειτουργίες διαβατηρίου για να λάβουμε το όνομα χρήστη και τον κωδικό πρόσβασης και να τα ελέγξουμε με τη βάση δεδομένων μας. Θα χρησιμοποιήσουμε επίσης έναν κρυπτογραφημένο κωδικό πρόσβασης που μπορεί να κάνει την είσοδο λίγο αργή σε ένα raspberry pi. Το εξηγώ περισσότερο στη συνέχεια. Αφού επικυρώσετε το όνομα χρήστη και τον κωδικό πρόσβασης, ανακατευθύνεστε στην αρχική σελίδα, η οποία θα εμφανίζει τον πίνακα ελέγχου καθώς το ρυθμίζουμε στο αρχείο ευρετηρίου μας. Προσθέτουμε επίσης εδώ τη δυνατότητα αποσύνδεσης.

Όπως προανέφερα, θα χρειαστεί επίσης να δημιουργήσουμε ένα μοντέλο για τον έλεγχο της βάσης δεδομένων.

Αυτό γίνεται με τη δημιουργία ενός φακέλου κάτω από τον κύριο φάκελο εφαρμογών που ονομάζεται μοντέλα. Σε αυτόν τον φάκελο απαιτείται επίσης ένα αρχείο user.js.

μοντέλο/user.js

var μαγκούζα = απαιτώ («μαγκούζα») ·

var bcrypt = απαιτώ ('bcryptjs'); // Σχέδιο χρήστη var UserSchema = mongoose. Schema ({όνομα χρήστη: {τύπος: συμβολοσειρά, δείκτης: αληθινός}, κωδικός πρόσβασης: {type: String}, email: {type: String}, όνομα: {type: String}}); var User = module.exports = mongoose.model ("Χρήστης", UserSchema);

module.exports.createUser = λειτουργία (newUser, επανάκληση) {

bcrypt.genSalt (10, λειτουργία (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = λειτουργία (όνομα χρήστη, επανάκληση) {var query = {όνομα χρήστη: όνομα χρήστη}; User.findOne (ερώτημα, επανάκληση); } module.exports.getUserById = λειτουργία (id, επανάκληση) {User.findById (id, callback); } module.exports.comparePassword = συνάρτηση (candidPassword, κατακερματισμός, επανάκληση) {bcrypt.compare (candidPassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Αυτό το μοντέλο περιγράφει πώς θα είναι οι παράμετροι των χρηστών μας καθώς και πώς θα έχουμε πρόσβαση σε αυτές. Ανέφερα προηγουμένως ότι θα κρυπτογραφήσουμε τους κωδικούς πρόσβασής μας. Αυτό γίνεται έτσι ώστε να μην αποθηκεύεται κωδικός πρόσβασης στη βάση δεδομένων σε περίπτωση παραβίασης. Οι κωδικοί πρόσβασης έχουν κατακερματιστεί χρησιμοποιώντας bcrypt μεσαίας συσκευής.

Βήμα 5: Μετρητής κυκλοφορίας

Wantedθελα να δω πόσοι μοναδικοί χρήστες επισκέφθηκαν την ιστοσελίδα μου και να μετρήσω τον αριθμό των "επισκέψεων". Υπάρχουν πολλοί τρόποι για να γίνει αυτό, θα εξηγήσω πώς το πήγα.

Αυτό χρησιμοποιεί μια συλλογή mongodb για να παρακολουθεί πόσοι χρήστες έχουν επισκεφθεί τη σελίδα μου και πόσες φορές επισκέφτηκε κάθε μοναδικός επισκέπτης.

Δεδομένου ότι έχουμε ήδη μιλήσει για τη δημιουργία ενός mongoDB, δεν θα το ξαναπεράσω.

Mayσως χρειαστεί να προσθέσετε δύο συλλογές στη βάση δεδομένων σας για να μεταγλωττίσετε. Για να το κάνετε αυτό, μπορείτε είτε να εγκαταστήσετε το RoboMongo εάν χρησιμοποιείτε διεπαφή χρήστη, ωστόσο, εάν χρησιμοποιείτε ακέφαλο βατόμουρο pi όπως είμαι, θα διασκεδάσετε με τις ακόλουθες εντολές.

Κέλυφος Mongo

Για να επεξεργαστείτε ένα db, να λάβετε πληροφορίες ή να δημιουργήσετε μια συλλογή, θα χρειαστείτε το κέλυφος mongo σε μια ακέφαλη μονάδα.

Τρέξιμο

mongo

Αυτό θα ανοίξει το κέλυφος.

Προσθέστε μια συλλογή

Στην περίπτωσή μου, η βάση δεδομένων ονομάζεται loginapp, μπορείτε να την ονομάσετε όπως θέλετε.

χρησιμοποιήστε το nameofyourdb

Χρειαζόμαστε μια συλλογή για να κρατήσουμε όλη τη διεύθυνση IP των χρηστών που επισκέπτονται τον ιστότοπό μας.

db.creatCollection ("ip")

Στη συνέχεια, δημιουργούμε μια συλλογή για να μετρήσουμε τις μοναδικές επισκέψεις στον ιστότοπό μας. Αυτό αρχικοποιείται με ένα αναγνωριστικό και μετράει ξεκινώντας από το 0.

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

Παρακολούθηση διευθύνσεων IP

Για να γίνει αυτό, θα τραβήξουμε τους χρήστες IP όταν επισκέπτονται την αρχική μας σελίδα, θα αυξήσουμε τον αριθμό μας και θα τους αποθηκεύσουμε για να τους συγκρίνουμε αργότερα.

Πρέπει να δημιουργήσουμε κάποια μοντέλα για να αποθηκεύσουμε τα σχήματα μαγκούζ μας και να προσθέσουμε κάποιον κώδικα στο αρχείο αρχικής σελίδας.js.

Δημιουργούμε count.js και ip.js και τα αποθηκεύουμε στο φάκελο μοντέλων μας.

Το αρχείο ip.js είναι απλώς ένα σχήμα για τη διεύθυνση IP μας

var μαγκούζα = απαιτώ («μαγκούζα») · // χειριστής πακέτων για mongo

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

Η count.js θα κληθεί από την αρχική μας σελίδα για να ξεκινήσει η παρακολούθηση επιτυχίας. Αυτό γίνεται όπως παρακάτω.

//Homepagerouter.get('/ ', λειτουργία (req, res) {publicIp.v4 (). Στη συνέχεια (ip => {Public_ip = ip; console.log ("ipv4:"+ Public_ip); // =>' 46.5.21.123 '}); publicIp.v6 (). Στη συνέχεια (ip => {console.log ("ipv6" + ip); Public_ip = ip; // =>' fe80:: 200: f8ff: fe21: 67cf ' });

Count.getCount (συλλογή, ipc, Public_ip, συνάρτηση (αριθμός) {

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

Αυτό συμβαίνει κάθε φορά που κάποιος πηγαίνει στην αρχική μας σελίδα, στην περίπτωση αυτή theinternet.onthewifi.com/homepage.

Ελέγχει τη διεύθυνση IP του χρήστη, ip4 ή ip6 και, στη συνέχεια, αποθηκεύει αυτήν την τιμή όπου την στέλνει στο count.get.collection, η οποία είναι μια συνάρτηση αποθηκευμένη στο αρχείο count.js.

Αφού ελέγξει τη μοναδικότητα του χρήστη, επιστρέφει και δημοσιεύει την τιμή μέτρησης στην αρχική σελίδα ως μεταβλητή τιμονιού.

Το αρχείο count.js έχει ως εξής.

//count.jsvar mongo = απαιτώ ('mongodb'); // υποστηρίζει βάση δεδομένων var mongoose = απαιτεί ('mongoose'); // χειριστής πακέτων για mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = απαιτούνται ('../ models/ip'); // Count Schema var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = module.exports = mongoose.model ("Count", CountSchema); module.exports.getCount = συνάρτηση (μέτρηση, ipc, Public_ip, επανάκληση) {// η μέτρηση είναι δοκιμή, η λειτουργία επανάκλησης είναι ipc.findOne ({ip: Public_ip}, λειτουργία (err, iptest) {if (! iptest) // add ένα νέο ip αν δεν υπάρχει στη βάση δεδομένων και μετρητής ενημέρωσης {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // add new ip to βάση δεδομένων count.update (// update hit counter {id: "hit counter"}, {$ inc: {count: 1}})} else // ενημέρωση συγκεκριμένου μετρητή ip, για να δείτε ποιος επισκέπτεται περισσότερο το {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Αυτό δημιουργεί το σχήμα καταμέτρησης και τη συνάρτηση.getCount. Η συνάρτηση.getCount ελέγχει το DB για το ip των χρηστών και αν το βρει, η συνάρτηση αυξάνει τον αριθμό αυτού του χρήστη και όχι τον μετρητή επιτυχίας. Ωστόσο, αν δεν βρεθεί το ip χρηστών, θα δημιουργήσει ένα νέο αντικείμενο συλλογής με το ip χρηστών και θα αυξήσει τον μετρητή επίσκεψης κατά 1.

Αυτό στη συνέχεια επιστρέφεται και εμφανίζεται στην ιστοσελίδα.

Εκεί το έχετε έναν μετρητή επιτυχούς παρακολούθησης ip.

Βήμα 6: Ιστολόγιο

Αυτή τη στιγμή προσπαθώ να αναπτύξω ένα ιστολόγιο συγκεντρωμένο στα ενδιαφέροντά μου σχετικά με το λογισμικό, τα έξυπνα σπίτια και τα Polaroids. Έτσι δημιούργησα μια ενότητα ιστολογίου. Το ιστολόγιο χρησιμοποιεί στατικές σελίδες html και το πλαίσιο τιμονιού. Αφού έψαξα καλύτερες τεχνολογίες για να κάνω το blogging ευκολότερο, έκτοτε επανασχεδίασα τον ιστότοπό μου χρησιμοποιώντας το hugo. Ο Hugo είναι μια στατική γεννήτρια html. Μιλάω περισσότερο για αυτό στο παρακάτω αναφερόμενο σεμινάριο.

Βήμα 7: Ολοκληρώθηκε

Εκεί πηγαίνετε ένα σε βάθος σεμινάριο στον ιστότοπό μου node.js που φιλοξενείται τοπικά στο raspberry pi μου. Εάν έχετε ερωτήσεις ή σχόλια, αφήστε τα παρακάτω.

Ελπίζω ότι αυτό βοηθά τους άλλους εκεί έξω.

Για μια διαφορετική προσέγγιση σε αυτόν τον ιστότοπο χρησιμοποιώντας το hugo, μια στατική γεννήτρια ιστοσελίδων δείτε το άλλο μου σεμινάριο (σύντομα).