Веб-страница Node.js, часть 2: 7 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

Добро пожаловать в ЧАСТЬ 2 !!

Это часть 2 моего руководства по применению веб-сайта Node.js. Я разбил этот учебник на две части, так как он разделяет тех, кому просто нужно краткое введение, и тех, кому нужен полный учебник на веб-странице.

Я собираюсь пройти процесс создания своего сайта. Ваш может быть другим, поэтому следуйте моему и изучите используемые методы. После того, как вы выберете другой шаблон HTML, поток будет немного другим. Имейте это в виду.

Шаг 1. Структура приложения

Итак, мой сайт следует за экспресс-генератором, однако я использовал рули, а не нефрит. Если вам нравится нефрит, дерзайте! Jade - это сокращенный HTML без скобок и div. Если вы не понимаете, что вы можете посетить YouTube и посмотреть некоторые уроки HTML.

Я предпочитаю и чувствую себя более комфортно с HTML и рулями, так что это то, что я использовал. Чтобы создать экспресс-проект с рулем, запустите экспресс-команду.

экспресс --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 находятся в общей папке. Эти файлы делают сайт лучше, чем обычный текст, и то, как изображения используются на сайте.

Чтобы стиль шаблонов руля работал с шаблоном, страницы разделены на две части. Первый - это то, что называется «раскладкой». Макет - это свойства, которые вы хотели бы отображать на каждой веб-странице вашего сайта. В моем случае это заголовок, в котором есть панель навигации, и нижний колонтитул, содержащий дополнительные элементы навигации и отображения.

Файл макета и другие файлы руля находятся в папке просмотров. Я рассмотрю более простой макет из экспресс-генератора, который вы использовали ранее, чтобы показать, как работает концепция, а затем вы сможете увидеть мой код и сравнить их.

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

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

Настоящая магия руля заключается в рулях {{title}} и {{{body}}}. Таким образом, эти двое действуют по-разному {{title}} - это переменная, которая передается из файла index.js в маршрутах, после передачи в шаблон, который отображается. Тег {{{body}}} принимает все, что когда-либо вызывается в функции рендеринга в вашем js-файле маршрута. В нашем случае index.js имеет такую строку:

res.render ('индекс', {заголовок: 'Экспресс', количество: userCount});

Это вызывает "индексный" файл того, что когда-либо использовалось вами, jade, handlebars и т. Д., В нашем случае 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 ({service: 'gmail', auth: {type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontent: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', маркер доступа: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-тк-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

если вы используете nodemailer с другим почтовым сервером, пожалуйста, посмотрите здесь документацию и помощь.

Некоторые вещи будут меняться от человека к человеку: user, 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 () + ']';} return {param: formParam, msg: msg, value: value};}}));

Теперь нам нужно получить информацию из нашей контактной формы на нашей веб-странице и отправить сообщение.

// Сообщение с помощью кнопки отправки контакта, необходимо создать домашнюю страницу с сообщением об успехе для отправленных формapp.post ('/ contact_Form', function (req, res) {// Получить информацию из контактной формы, из homepage.hbs var name = 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 используется для отображения сообщений после выполнения действий. Вы можете увидеть это, когда отправляете форму или неправильно вводите поле.

Установите flash так же, как и другое промежуточное ПО npm.

sudo npm install connect-flash

var flash = require ('connect-flash'); // имел функцию flash для отображения сообщений на экране

// Подключаем Flashapp.use (flash ());

Включите flash, который отправляет и обновляет сообщения на веб-странице. Это сообщения, в которых говорится об успехе или неверно введенной информации.

// Глобальные переменные

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; next ();});

Некоторым нужны переменные, связанные со вспышкой.

Вот и все, форма обратной связи.

Шаг 4: Страница входа в систему

Это было то, что я хотел увидеть, смогу ли я это сделать, и, возможно, я буду использовать это в будущем. Я просто хотел объяснить код, который находится в моем репозитории git.

Таким образом, в этой части используется еще несколько промежуточных программ npm. Установите следующее, используя приведенные ниже команды.

npm установить паспорт && npm установить локальный паспорт && npm установить bcryptjs

&& позволяет запускать несколько команд в одной строке.

Логин и пользователи

Вам нужно будет создать файлы login.js и user.js в папке с маршрутами. Это будет использоваться, чтобы разрешить создание пользователя, который будет храниться в нашей базе данных, и позволить пользователю войти в систему, проверив базу данных.

user.js

var express = require ('экспресс'); var router = express. Router (); var паспорт = требуется ('паспорт'); var LocalStrategy = require ('локальный паспорт'). Стратегия; var User = require ('../ модели / пользователь'); // Регистрируем 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 ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email is required').notEmpty (); req.checkBody ('электронная почта', 'Электронная почта недействительна'). isEmail (); req.checkBody ('имя пользователя', 'Требуется имя пользователя'). notEmpty (); req.checkBody (' password ',' Требуется пароль '). notEmpty (); req.checkBody (' password2 ',' Пароли не совпадают '). equals (req.body.password); var errors = req.validationErrors (); if (ошибок) {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', 'Вы зарегистрированы и теперь можете войти в систему'); res.redirect (' /авторизоваться'); } });

Разбивая это по частям

Сначала мы включаем все необходимое промежуточное программное обеспечение, затем мы включаем наш файл модели, который объясняется ниже. Мы выполняем маршрутизацию от тега register и отображаем текст нашего руля регистрации. Затем наступает важная функция. Это позволяет нам зарегистрировать нового пользователя в нашей базе данных. Функция проверяет, что все поля действительны и включены в форму, если нет, она запросит их. Затем он проверяет наличие ошибок и, если ошибок не возникает, создает нового пользователя с предоставленной информацией. Затем он перенаправляется на страницу входа, позволяя вам войти в систему.

login.js

var express = require ('экспресс');

var router = express. Router (); var паспорт = require ('паспорт'); var LocalStrategy = require ('локальный паспорт'). Стратегия; var User = require ('../ модели / пользователь'); / * ПОЛУЧАТЬ список пользователей. * / // Домашняя страница 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 (пароль, user.password, function (err, isMatch) {if (err) throw err; if (isMatch) {return done (null, user);} else { return done (null, false, {message: 'Invalid password'});}});});})); Passport.serializeUser (функция (пользователь, готово) {сделано (нуль, user.id);}); Passport.deserializeUser (функция (идентификатор, готово) {User.getUserById (идентификатор, функция (ошибка, пользователь) {готово (ошибка, пользователь);});}); router.post ('/ login', паспорт.authenticate ('local', {successRedirect: '/', failureRedirect: '/ login', failureFlash: true}), function (req, res) {res.redirect ('/ щиток приборов'); }); router.get ('/ logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Вы вышли из системы'); res.redirect ('/ homepage');});

module.exports = маршрутизатор;

Сначала мы включаем все необходимое промежуточное программное обеспечение, затем мы включаем наш файл модели, который объясняется ниже. Мы выполняем маршрутизацию от тега входа в систему и отображаем текст руля входа в систему. Затем мы используем некоторые паспортные функции, чтобы взять введенное имя пользователя и пароль и сверить их с нашей базой данных. Мы также будем использовать зашифрованный пароль, который может немного замедлить вход на Raspberry Pi. Я объясню это подробнее далее. После проверки имени пользователя и пароля вы будете перенаправлены на домашнюю страницу, где будет отображаться панель управления, как мы настроили это в нашем индексном файле. Мы также добавляем сюда возможность выхода.

Как я уже упоминал ранее, нам также потребуется создать модель для проверки базы данных.

Это делается путем создания папки под названием модели в основной папке приложения. В этой папке также нужен файл user.js.

модель / user.js

var mongoose = require ('мангуст');

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, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = функция (имя пользователя, обратный вызов) {var query = {username: username}; User.findOne (запрос, обратный вызов); } module.exports.getUserById = функция (идентификатор, обратный вызов) {User.findById (идентификатор, обратный вызов); } module.exports.comparePassword = функция (пароль кандидата, хэш, обратный вызов) {bcrypt.compare (пароль кандидата, хеш, функция (ошибка, isMatch) {если (ошибка) выбросить ошибку; обратный вызов (null, isMatch);}); }

Эта модель описывает, как будут выглядеть наши пользовательские параметры, а также как мы будем к ним обращаться. Я упоминал ранее, что мы будем шифровать наши пароли. это сделано для того, чтобы ни один пароль не сохранялся в базе данных в случае взлома. Пароли хешируются с использованием промежуточного программного обеспечения bcrypt.

Шаг 5: счетчик трафика

Я хотел узнать, сколько уникальных пользователей посетили мою веб-страницу, и посчитать количество «посещений». Есть много способов сделать это, я объясню, как я это сделал.

Это использует коллекцию mongodb, чтобы отслеживать, сколько пользователей посетили мою страницу и сколько раз посещал каждый уникальный посетитель.

Поскольку мы уже говорили о настройке mongoDB, я не буду повторять это снова.

Вам может потребоваться добавить две коллекции в вашу базу данных для компиляции. Для этого вы можете установить RoboMongo при использовании пользовательского интерфейса, однако, если вы используете безголовый Raspberry Pi, как я, вам понравятся следующие команды.

Оболочка монго

Чтобы отредактировать базу данных, получить информацию или создать коллекцию, вам понадобится оболочка mongo на безголовом устройстве.

Запустить

монго

Это откроет оболочку.

Добавить коллекцию

В моем случае база данных называется loginapp, вы можете называть ее как хотите.

используйте nameofyourdb

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

db.creatCollection ("ip")

Затем мы создаем коллекцию для подсчета уникальных посещений нашего сайта. Он инициализируется идентификатором и отсчетом, начиная с 0.

db.createCollection ("счетчик", {id: "счетчик обращений", счетчик: 0})

Отслеживание IP-адресов

Для этого мы будем извлекать IP-адреса пользователей, когда они посещают нашу домашнюю страницу, увеличивать наш счетчик и сохранять их для последующего сравнения.

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

Мы создаем count.js и ip.js и сохраняем их в папке с нашими моделями.

Файл ip.js - это просто схема для нашего IP-адреса.

var mongoose = require ('мангуст'); // обработчик пакетов для 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: "счетчик посещений"}, функция (err, count) {userCount = count.count; res.render ('домашняя страница', {count: userCount}); }); });

Это происходит каждый раз, когда кто-то переходит на нашу домашнюю страницу, в данном случае theinternet.onthewifi.com/homepage.

Он проверяет IP-адрес пользователя, ip4 или ip6, а затем сохраняет это значение, где отправляет его в count.get.collection, функцию, хранящуюся в нашем файле count.js.

После проверки уникальности пользователя он затем возвращает и отправляет значение счетчика на домашнюю страницу как переменную handlebars.

Файл 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 = new Ip ({ip: Public_ip, count: 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: Блог

В настоящее время я пытаюсь создать блог, посвященный моим интересам о программном обеспечении, умных домах и поляроидах. Итак, я создал раздел блога. В блоге используются статические html-страницы и фреймворк ручек. Изучив более совершенные технологии, которые упростят ведение блога, я с тех пор переделал свой веб-сайт с помощью hugo. Hugo - это статический генератор HTML. Подробнее об этом я расскажу в нижеприведенном руководстве.

Шаг 7: Готово

Вот подробное руководство на моем веб-сайте node.js, размещенном локально на моем Raspberry Pi. Если у вас есть вопросы или комментарии, оставьте их ниже.

Я надеюсь, что это поможет другим.

Чтобы узнать о другом подходе к этому сайту с использованием hugo, генератора статических веб-страниц, см. Другой мой учебник (скоро).