Пример проверки экспресс-формы с нуля

Пример экспресс-проверки с нуля. В этом руководстве мы будем использовать пакет express-validator для проверки входящего запроса. Мы создадим форму и отправим на сервер запрос POST , а затем, если запрос не пройдет проверку, он ответит сообщением об ошибке. Если вы новичок в Node.js , то ознакомьтесь с моим Node js Express Tutorial For Beginners From Scratch 2018

Если вы хотите узнать больше о Node.js, тогда ознакомьтесь с этим курсом NodeJS — Полное руководство (включая MVC, REST API, GraphQL)

Пример экспресс-проверки формы

Мы устанавливаем пакет под названием express-validator.

Шаг 1. Установите пакет экспресс-проверки.

Для работы с этим руководством вам необходимо установить Node.js. Введите следующую команду для установки пакета express и express-validator .

 npm  install --save express express-validator 

Он создает папку node_modules , а также создает файл package.json .

Шаг 2. Создайте сервер Node.js.

Создайте файл server.js в корневой папке. Файл server.js всегда запускается первым, потому что он создает для нас сервер, а мы используем express , поэтому введите следующий код в server.js файл.

//server.jsconst express = require ('express'); const app = express (); const expressValidator = require ('express-validator'); const PORT = 3000; app  .listen (PORT, function (req, res) {console.log ('Сервер работает на PORT:', PORT);}); 

Теперь мне нужен еще один пакет разработки под названием nodemon. пакет nodemon автоматически перезагружает сервер, когда мы превращаемся в файл server.js , и мы не перезагружаем сервер вручную, что здорово и экономит ваше время. Кроме того, добавьте свойство start в файл package.json .

 "start": "nodemon server.js" 

Итак, введите следующую команду для начальной загрузки узла .js server.

 npm start 

Запускает сервер, вы можете увидеть это в консоли.

Шаг 3. Установите механизм шаблонов Handlebars.

Установите механизм шаблонов handlbars.

 npm install express-hbs --save 

Создайте папку public and views в корне папки проекта. Внутри папки views создайте папку partials .

Установите механизм шаблонов для express проект. Введите следующий код в файл server.js ..

//server.jsconst hbs = require ('express-hbs'); const path = require ('path'); app.use (express.static ('public')); app  .engine ('hbs', hbs.express4 ({partialsDir: __dirname + '/views/partials'})); app.set ('view engine', 'hbs'); app.set ('views', __dirname +  '/views'); 

Включил механизм шаблонов handlebars и определил общедоступный каталог как статический. Каталог public содержит файлы проекта CSS и JS . Я использовал bootstrap для разработки стиля. Поэтому необходимо поместить сюда файл bootstrap.min.css .

Шаг 4. Настройте модуль экспресс-проверки.

Установите body-parser и другие зависимости через npm .

 npm install body-  parser express-session cookie-parser --save 

body-parser: Анализирует данные входящего запроса.

express-session: этот модуль используется для хранения данных сеанса, таких как ошибка и сообщение об успешном завершении .

//server.jsconst bodyParser = require ('body-parser'); const cookieParser = require ('cookie-parser'); const session = require ('express-session'); app.use (bodyParser.urlencoded ({  extended: false})); app.use (expressValidator ()); app.use (cookieParser ()); app.use (session ({secret: 'krunal', saveUninitialized: false, resave: false})); 

Мы использовали express-validator в качестве функции промежуточного программного обеспечения. Это поможет проверить ввод на соответствие валидации.

Шаг 5: Создайте форму начальной загрузки.

В views , выполните один вызов файла

     Добавить сеть     
Добавить сеть

Хорошо, теперь нам нужно отрендерить этот файл, но мы еще не определили маршруты, поэтому позвольте нам это сделать.

Шаг 6: Определите Express Router для нашего приложение.

Создайте папку routes в корне . В этой папке создайте один файл с именем blockchain.route.js

//blockchain.route.jsco  nst express = require ('express'); const router = express.Router (); router.get ('/', function (req, res) {res.render ('blockchain');}); module.exports =  router; 

Затем импортируйте эти маршруты в наш файл server.js .

//server.jsconst blockchain = require (  './routes/blockchain.route');app.use('/blockchain',blockchain); 

Перейдите по адресу http://localhost: 3000/blockchain

Будет отображена форма начальной загрузки.

Шаг 7. Определите проверки.

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

//blockchain.route.jsrouter.post ('/post', function (req, res) {let name = req.body.name  ; let bandwidth = req.body.bandwidth; req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('bandwidth', 'Bandwidth is required'). notEmpty (); var errors  = req.validationErrors (); if (errors) {req.session.errors = errors; req.session.success = false; res.redirect ('/blockchain');} else {req.session.success = true; res  .redirect ('/');}}); 

Здесь сначала проверяется свойство name из объекта запроса, которое не должно быть пустым. Затем он отслеживает, что пропускная способность не должна быть пустой.

Если какой-либо из них не проходит при Validation , то все ошибки проверки сохраняются в ошибках. переменная. Если переменная errors не пуста, она перенаправит нас на страницу с ошибками. Иначе перенаправить на домашний маршрут. Также определите действие формы. Нам нужно указать этот маршрут публикации, чтобы мы могли поймать отправленные значения.

 

Если вы отправите форму без каких-либо значений, она будет перенаправлена ​​обратно с ошибками. До сих пор я не отображал никаких ошибок. Итак, давайте сделаем это.

Шаг 8. Отображение ошибок.

Во-первых, в блокчейне .route.js , нам нужно изменить запрос get и добавить следующий код.

//blockchain.route.jsrouter.get  ('/', функция (req, res) {res.render ('blockchain', {успех: req.session.success, errors: req.session.errors}); req.session.errors = null;});  

В файле blockchain.hbs напишите следующий код после класса контейнера для отображения ошибок.

  {{# if errors}} {{# each errors}} 

{{this.msg}}

{{/each}} {{ /if}}

Мы использовали handlebars , поэтому его синтаксис такой же, как указано выше. Если есть ошибки, мы можем получить доступ к его свойству msg , которое содержит все наши сообщения проверки. Функция express-validator установит для нас свойство msg . Нам просто нужно поместить этот объект errors в сеанс , а затем отобразить его во внешнем интерфейсе.

Если все значения верны, выполняется перенаправление на домашний маршрут .

Вот и все, что касается Учебного примера по экспресс-проверке форм с нуля.

Оцените статью
nanomode.ru
Добавить комментарий