Node.js уеб страница Част 2: 7 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

Добре дошли в ЧАСТ 2 !!

Това е част 2 към моя урок за приложение за уебсайт Node.js. Разделих този урок на две части, тъй като той разделя онези, които просто се нуждаят от кратко представяне, и тези, които искат пълен урок на уеб страница.

Ще премина през създаването на моя сайт. Вашите може да са различни, така че следвайте моите и научете използваните техники. След като изберете различен HTML шаблон, потокът ще бъде малко по -различен. Имайте това предвид.

Стъпка 1: Структура на приложението

Така че моят сайт следва експресния генератор, но аз използвах кормило, а не нефрит. Ако харесвате нефрит, направете го! Jade е HTML с къса ръка без всички скоби и div. Ако не разбирате, че може да искате да посетите youtube и да гледате някои HTML уроци.

Предпочитам и съм по -удобен с HTML и кормилото, така че използвах това. За да създадете експресен проект с кормило, изпълнете командата express.

express --hbs nameofmyapp

След това продължете да следвате стъпката в част 1 за инсталиране на целия среден продукт.

Express създава много специфична структура на приложението и много полезно, повечето приложения node.js следват тази форма с известни вариации.

На приложената снимка можете да видите различни папки и файлове, по -долу се опитвам да обясня всичко това.

кошче

Това е папката, която се стартира първо, когато node.js стартира вашия сървър. Той търси файла www и следва този файл за изпълнение. Файлът www казва на node.js да стартира сървър на порт 3000 (това може да се промени на почти всичко) и да направи някои други неща, като например слушател на събития и други. Основното важно нещо е портът, на който е настроено приложението ви.

node_modules

В тази папка се намира това, което се нарича среден продукт. Среден продукт, който обичам да обяснявам като допълнителен софтуер, за да улесните кодирането. По същество те са други библиотеки с предварително създадени функции за използване. Някои допълнителни средни продукти, които използвах за този проект, бяха Nodemailer, Passport, Nodemon, bycrypt и други.

обществен

Тук ще отидат всички ваши изображения, CSS и javascript за вашия уебсайт. Те се използват директно от уеб страниците.

маршрути

Това определя маршрути за вашия сайт. Като начална страница, страница за вход и други.

изгледи

Както можете да видите, изгледите са.hbs файлове или.handlebars, и двете ще работят, това изисква само малко манипулиране на файла app.js. Това са вашите html страници на кормилото, които ще се показват в браузъра. Оформлението е вашият основен файл с оформление и понякога е в собствена подпапка за оформление. Файлът на основното оформление извиква другите ви файлове на кормилото и ги показва, това ще има повече смисъл, когато се потопим в кода.

app.js

Това е вашият основен файл с приложение, понякога се нарича сървър, зависи само от настройката. Този файл има цялата конфигурация за сървъра и дори някои специални функции. Това ще бъде и манипулатор на грешки.

package.json

Този файл е създаден от express и казва на npm целия междинен софтуер, който искате да използвате във вашия проект. След като стартирате npm install, всички средни продукти, извикани в този файл, ще бъдат инсталирани в папката node_modules.

Стъпка 2: Оформете своя шаблон

Можете да създадете целия си HTML от нулата или да използвате шаблон. Използвах шаблон за този сайт. Други сайтове, на които съм помогнал да разработя кодирах от нулата. Изборът е ваш, тази стъпка обяснява оформлението на шаблона.

Моето уеб приложение използва шаблон за стартиране, който е чудесен за създаване на невероятен CSS. За да намерите шаблони, посетете този сайт. Както беше посочено по -горе в предишната стъпка, всички необходими css, js и img файлове са под публичната папка. Тези файлове правят сайта да изглежда по -добре от обикновен текст и как се използват изображенията на сайта.

За да накарате стила на шаблона на кормилото да работи с шаблон Страниците са разделени на две части. Първият е това, което се нарича "оформление". Оформлението е свойствата, които бихте искали да се показват на всяка уеб страница във вашия сайт. В моя случай това е заглавката, която има навигационната лента, и долния колонтитул, който съдържа допълнителни части за навигация и показване.

Файлът на оформлението и другите файлове на кормилото са в папката views. Ще разгледам по -просто оформление от експресния генератор, който сте използвали по -рано, за да покажете как работи концепцията, след което можете да видите моя код и да ги сравните.

Експресно генериран файл layout.handlebars

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

Истинската магия на кормилото е в кормилото {{title}} и {{{body}}}. Така че тези две действат по различен начин {{title}} е променлива, която се предава от файла index.js в маршрути, след като бъде предадена на шаблона, тя се показва. Маркерът {{{body}}} взема това, което се нарича във функцията за визуализация във вашия js файл за маршрут. В нашия случай index.js има този ред:

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

Това извиква файла „index“на каквото и да е двигател, който използвате, нефрит, кормило и т.н., така че в нашия случай index.handlebars.

Експресно генериран index.handlebars

{{заглавие}}

Добре дошли в {{title}}

Файлът index.handlebars се предава като променлива на маркера {{{body}}} и се показва на вашата уеб страница.

Това ви позволява да имате статична част от вашия уебсайт и променлива част. Това прави горните и долните колонтитули приятни, тъй като не се налага да изобразявате отново цялата страница, при зареждане на нова страница се променя само част от информацията.

Стъпка 3: Формуляр за контакт

Включих формуляр за контакт в моята уеб страница, така че всеки да може да изпрати имейл на сайта ми с въпроси или коментари.

Тази форма за контакт използва среден продукт npm, наречен Node Mailer.

Настройване на Node Mailer

За да инсталирате node-mailer, просто трябва да стартирате кода по-долу във вашия файл от най-високо ниво, в нашия случай myapp.

sudo npm инсталирайте nodemailer

След като бъде инсталиран, ще трябва да настроите няколко неща във файла app.js.

Първият е само зависимостта, това казва на възела, че планираме да използваме този междинен софтуер.

var nodemailer = require ('nodemailer');

Второ е нашият транспортер, транспортерът се използва за свързване с вашия пощенски сървър, в моя случай gmail.

// Транспортер, използван за получаване на gmail акаунт

var transporter = nodemailer.createTransport ({услуга: 'gmail', auth: {тип: 'OAuth2', потребител: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.acons.screo: "Q775xefdHA_BGu3ZnY9-6sP- ', refreshToken:" 1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: "ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-МК-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7 '}})

ако използвате nodemailer с различен пощенски сървър, моля потърсете тук за документация и помощ.

Няколко неща ще се променят от човек на човек: потребител, clientId, clientSecret. refreshToken и accessToken.

Вашият userId е имейл адресът, в който искате да използвате, направих нов, наречен същият като моя сайт.

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 () + ']';} връщане {param: formParam, msg: msg, value: value};}}));

Сега трябва да получим информация от нашата форма за контакт на нашата уеб страница и да изпратим съобщение.

// Публикуване от бутона за изпращане на контакт, трябва да се създаде начална страница с съобщение за успех за изпратените форми = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// създава информация, използвана при изпращане на съобщение от: ' Автоматичен имейл “, до:„ [email protected] “, тема:„ Формуляр за връзка с уебсайта: “+ име, текст:„ Получихте ново съобщение от формуляра за контакт на вашия уебсайт. / N / n “+„ Тук са подробностите: / n / nИме: ' + име +' / n / nИмейл: ' + имейл +' / n / nТелефон: ' + телефон +' / n / nСъобщение: / n ' + съобщение} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // визуализация нова начална страница, вижте как да направите това със съобщение за успех, като страница за излизане})

Светкавица

Flash се използва за показване на съобщения след извършване на действия. Можете да видите това, когато изпратите формуляр или не въведете правилно поле.

Инсталирайте флаш точно както другия npm междуер.

sudo npm инсталирайте connect-flash

var flash = require ('connect-flash'); // имаше флаш функционалност за показване на съобщения на екрана

// Свържете Flashapp.use (flash ());

Активирайте флаш, който избутва и актуализира съобщения на уеб страницата. Това са съобщенията, които казват неща като успех или информация е въведена неправилно.

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

Някои се нуждаят от променливи, свързани с флаш.

Имате направена формуляр за контакт.

Стъпка 4: Страница за вход

Това беше просто нещо, което исках да видя дали мога да направя и може би ще го използвам в бъдеще. Просто исках да обясня кода такъв, какъвто е в моето git хранилище.

Така че тази част използва още няколко npm средни изделия. Инсталирайте следното, като използвате командите по -долу.

npm инсталиране на паспорт && npm инсталиране на паспорт-локално && npm инсталиране на bcryptjs

&& ви позволява да изпълнявате множество команди с един ред.

Вход и потребители

Ще трябва да създадете файл login.js и user.js в папката с маршрути. Това ще се използва, за да позволи създаването на потребител, който ще се съхранява в нашата база данни, и ще позволи на потребителя да влезе, като провери базата данни.

user.js

var express = require ('express'); var router = express. Router (); var паспорт = изисква ('паспорт'); var LocalStrategy = изисква ('паспорт-локален'). Стратегия; var User = require ('../ models/user'); // Регистрирайте 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 ();).notEmpty (); req.checkBody ('имейл', 'Имейлът не е валиден'). isEmail (); req.checkBody ('потребителско име', 'Изисква се потребителско име'). notEmpty (); req.checkBody (' password ',' Password is required '). notEmpty (); req.checkBody (' password2 ',' Passwords not match '). equals (req.body.password); var errors = req.validationErrors (); if грешки) {res.render ('регистър', {грешки: грешки});} иначе {var newUser = нов потребител ({име: име, имейл: имейл, потребителско име: потребителско име, парола: парола}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Вие сте регистрирани и вече можете да влезете'); res.redirect (' /Влизам'); } });

Разчупване на това парче по парче

Първо включваме всички необходими средни продукти, след това включваме нашия модел файл, който е обяснен по-долу. Насочваме се от маркера на регистъра и показваме нашия текст на кормилото на регистъра. Тогава идва важната функция. Те ни позволяват да регистрираме нов потребител в нашата база данни. Функцията проверява дали всички полета са валидни и включени във формуляра, ако не, тя ще ги подкани. След това проверява за грешки и ако няма грешки, създава нов потребител с предоставената информация. След това се пренасочва към страницата за вход, което ви позволява да влезете.

login.js

var express = require ('express');

var router = express. Router (); var паспорт = изисква ('паспорт'); var LocalStrategy = изисква ('паспорт-локален'). Стратегия; var User = require ('../ models/user'); /* GET списък с потребители. */// начална страница router.get ('/', function (req, res) {res.render ('login');}); Passport.use (нова LocalStrategy (функция (потребителско име, парола, направено) {User.getUserByUsername (потребителско име, функция (грешка, потребител)) {ако (грешка) хвърли грешка; ако (! потребител) {връщане направено (нула, невярно, { съобщение: 'Неизвестен потребител'});} User.comparePassword (парола, потребителска парола, функция (err, isMatch) {if (err) хвърли err; if (isMatch) {връщане направено (null, потребител);} else { връщане направено (нула, невярно, {съобщение: 'Невалидна парола'});}});});})); Passport.serializeUser (функция (потребител, направено) {готово (нула, потребителски идентификатор);}); Passport.deserializeUser (функция (идентификатор, направено) {User.getUserById (идентификатор, функция (грешка, потребител) {готово (грешка, потребител);});}); router.post ('/login', Passport.authenticate ('local', {successRedirect: '/', failureRedirect: '/login', failFlash: true}), function (req, res) {res.redirect ('/ табло'); }); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Вие сте излезли от системата'); res.redirect ('/homepage');});

module.exports = рутер;

Първо включваме всички необходими средни продукти, след това включваме нашия модел файл, който е обяснен по-долу. Насочваме се от маркера за вход и показваме текста на кормилото за вход. След това използваме някои паспортни функции, за да вземем въведеното потребителско име и парола и да ги сравним с нашата база данни. Ще използваме и криптирана парола, която може да направи влизането малко бавно на малиново пи. По -нататък ще обясня това повече. След потвърждаване на потребителското име и парола, вие ще бъдете пренасочени към началната страница, която ще покаже таблото за управление, докато го настроим в нашия индекс файл. Тук също добавяме възможността за излизане.

Както споменах по -рано, ще трябва да създадем и модел, за да проверим базата данни.

Това става чрез създаване на папка под основната папка на приложението, наречена models. В тази папка е необходим и файл user.js.

model/user.js

var mongoose = require ('mongoose');

var bcrypt = require ('bcryptjs'); // Потребителска схема var UserSchema = mongoose. Schema ({потребителско име: {тип: Низ, индекс: вярно}, парола: {тип: Низ}, имейл: {тип: Низ}, име: {тип: Низ}}); var User = module.exports = mongoose.model ('Потребител', UserSchema);

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

bcrypt.genSalt (10, функция (грешка, сол) {bcrypt.hash (newUser.password, сол, функция (err, hash) {newUser.password = хеш; newUser.save (обратно повикване);});}); } module.exports.getUserByUsername = функция (потребителско име, обратно обаждане) {var query = {потребителско име: потребителско име}; User.findOne (заявка, обратно повикване); } module.exports.getUserById = функция (id, callback) {User.findById (id, callback); } module.exports.comparePassword = function (kandidatPassword, hash, callback) {bcrypt.compare (кандидатPassword, хеш, функция (err, isMatch) {if (err) хвърля грешка; callback (null, isMatch);}); }

Този модел очертава как ще изглеждат нашите потребителски параметри, както и как ще имаме достъп до тях. Вече споменах, че ще шифроваме паролите си. това е така, че никой парола да не се съхранява в базата данни в случай на нарушение. Паролите се хешират с помощта на среден bcrypt.

Стъпка 5: Брояч на трафика

Исках да видя колко уникални потребители са посетили моята уеб страница и да преброя броя на „посещенията“. Има много начини да направите това, ще обясня как се справих.

Това използва колекция mongodb, за да проследи колко потребители са посетили страницата ми и колко пъти е посетил всеки уникален посетител.

Тъй като вече говорихме за настройка на mongoDB, няма да минавам отново през него.

Може да се наложи да добавите две колекции към базата данни, за да компилирате. За да направите това, можете или да инсталирате RoboMongo, ако използвате потребителски интерфейс, но ако използвате безглавен малинов pi като мен, ще се забавлявате със следните команди.

Монгова черупка

За да редактирате db, да получите информация или да създадете колекция, ще ви е необходима обвивката mongo на единица без глава.

Бягай

монго

Това ще отвори черупката.

Добавете колекция

В моя случай базата данни се нарича loginapp, можете да я кръстите както искате.

използвайте nameofyourdb

Нуждаем се от колекция, която да съхранява целия ни IP адрес на потребителите, които посещават нашия сайт.

db.creatCollection ("ip")

След това създаваме колекция за преброяване на уникалните попадения на нашия сайт. Това се инициализира с идентификатор и броене, започващо от 0.

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

Проследяване на IP адреси

За да направим това, ние ще изтеглим потребителите Ip, когато посетят нашата начална страница, ще увеличим броя ни и ще ги съхраним, за да ги сравним по -късно.

Трябва да създадем някои модели, за да съхраняваме нашите схеми за мангусти, и да добавим код към нашия файл homepage.js.

Създаваме count.js и ip.js и ги съхраняваме в папката на нашите модели.

Файлът ip.js е само схема за нашия ip адрес

var mongoose = require ('mongoose'); // обработчик на пакети за mongo

// Схема за преброяване var IpSchema = mongoose. Schema ({ip: {type: String,}, count: {type: Number,}}); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

count.js ще бъде извикан от нашата начална страница, за да започне проследяването на посещенията. Това се прави по следния начин.

//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: "counter counter"}, функция (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 = require ('mongodb'); // поддържа база данни var mongoose = require ('mongoose'); // манипулатор на пакети за mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = require ('../ models/ip'); // Схема за преброяване 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) // добавете нов ip, ако не е в базата данни, и брояч на актуализации {var new_ip = нов IP ({ip: Public_ip, брой: 1}); db.collection ('ip'). save (new_ip); // добавете нов ip към database count.update (// актуализира брояча на посещенията {id: "hit counter"}, {$ inc: {count: 1}})} else // актуализира конкретен ip брояч, за да види кой посещава най -много {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Това създава схемата за броене и нашата функция.getCount. Функцията.getCount проверява БД за потребителски ip и ако го намери, функцията увеличава броя на този потребител, а не брояча на посещения. Ако обаче потребителският ip не бъде намерен, той ще създаде нов обект за събиране с потребителския ip и ще увеличи брояча на посещенията с 1.

След това се връща и показва на уеб страницата.

Ето го брояч на попадения за проследяване на ip.

Стъпка 6: Блог

В момента се опитвам да разработя блог, централизиран върху моите интереси относно софтуера, интелигентните домове и Polaroids. Затова създадох раздел за блог. Блогът използва статични html страници и рамката на кормилото. След като разгледах по -добрите технологии, за да направя блоговете по -лесни, оттогава преработих уебсайта си с помощта на hugo. Hugo е статичен html генератор. Говоря повече за това в посочения по -долу урок.

Стъпка 7: Готово

Тук отивате в задълбочен урок на моя уебсайт node.js, хостван локално на моя малинов пи. Ако имате въпроси или коментари, моля, оставете ги по -долу.

Надявам се това да помогне на другите.

За различен подход към този сайт с помощта на hugo, генератор на статична уеб страница вижте другия ми урок (скоро).