Пример Node Express для начинающих 2020

Пример Node Express для начинающих с нуля 2020 является ведущей темой сегодня. Express js — это минимальная и гибкая платформа веб-приложений Node.js, которая предоставляет надежный набор функций для разработки веб-приложений и мобильных приложений.

Мы можем создавать веб-API с помощью этой структуры очень быстро, и она имеет огромную поддержку для баз данных NoSQL, таких как MongoDB. Вы можете узнать больше о Node js Express js Framework в официальной документации.

Для работы с этой структурой я предполагаю, что вы установили Node.js на ваш компьютер.

Пример Node Express

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

Сначала мы установим Express Framework, а затем приступим к созданию простого веб-приложения с внутренней базой данных MongoDB .

Что такое Express.js?

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

Он стал стандартной серверной средой для node.js. Express — это серверная часть того, что известно как стек MEAN.

MEAN — это бесплатный JavaScript с открытым исходным кодом. программный стек для создания динамических веб-сайтов и веб-приложений, который имеет следующие компоненты:

1) MongoDB — стандартная база данных NoSQL

2) Express.js — фреймворк для веб-приложений по умолчанию

3) Angular

— фреймворк JavaScript MVC, используемый для веб-приложений.

4) Node.js — фреймворк, используемый для масштабируемой серверной части. и сетевые приложения.

Платформа Express.js упрощает разработку приложения, которое можно использовать для обработки различных типов запросов, таких как запросы GET, PUT, POST и DELETE.

Шаг 1. Установите Express Framework.

Перейдите в терминал, создайте одну папку проекта и войдите в нее.

 $ mkdir expressdemo $ cd expressdemo 

Теперь инициализируйте файл package.json с помощью следующей команды.

 npm init 

Это даст нам ряд вопросов, а затем в папке вашего проекта package. json будет создан.

Установите экспресс с помощью следующей команды.

 npm install express --save 

Шаг 2. Создайте файл server.js в корне.

Создайте наш сервер Node.js с помощью следующего кода.

//server.jsconst express = require ('express'); const app = express (); const port = 3000; app. listen (port, function () {console.log ('Node js Express js Tutorial');}); 

В нашей первой строке кода мы используем функцию require, чтобы включить « express module ».

Прежде чем мы сможем начать использовать экспресс-модуль, нам нужно создать из него объект.

Здесь мы создаем функцию обратного вызова. Эта функция будет вызываться всякий раз, когда кто-нибудь перейдет к корню нашего веб-приложения, который является http://localhost: 3000 .

Функция обратного вызова будет использоваться для отправки строки ‘Node js Express js Tutorial’ на веб-страницу.

В функция обратного вызова, мы регистрируем строку ‘Node js Express js Tutorial’ обратно клиенту.

Затем мы используем функцию прослушивания, чтобы сделать наш серверное приложение прослушивает клиентские запросы на порту 3000. Здесь вы можете указать любой доступный порт.

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

 npm install nodemon --save-dev 

Измените package.json и добавьте следующую строку в объект « scripts » .

 "scripts": {"start":  "nodemon server.js"}, 

Когда вы вводите в терминале « npm start », он загружает сервер, а когда мы меняем файлы, он автоматически перезапустится.

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

Если вы не знаете, что такое шаблонизатор в Express, а затем ознакомьтесь с этим механизмом шаблонов в примере Express.

Чтобы включить файлы CSS и js в экспресс, сначала мы создадим статический каталог с именем public, и в него мы поместим наши файлы CSS и JS .

//server.jsapp.use (  express.static ('public')); 

Здесь мы собираемся использовать « ejs » в качестве механизма создания шаблонов, поэтому сначала нам нужно скачать это через

//server.jsnpm install --save ejs 

Теперь нам нужно обновить наш server.js для установки механизма просмотра .

//server.jsapp.set ('view engine', 'ejs'  ); 

Нам нужно создать одну папку внутри нашего корня под названием views. В этой папке создайте один файл с именем

       EJS Engine      
Node js Express js Tutorial 2020

Чтобы отобразить это route, нам просто нужно добавить следующий код на сервер . js .

//server.jsapp.get ('/', function (req, res) {res.sendFile (path.join (__ dirname, 'public', '  index.html '));}); 

Наш файл index.html в папке public выглядит следующим образом.

        Учебник по Node js    Учебник по Node js   

Шаг 4. Настройте Express Router.

Прежде чем мы углубимся в маршруты, давайте разберемся с основами маршрутов в веб-платформе Express.

Что такое маршруты

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

Например, клиент может сделать HTTP-запрос GET, POST, PUT или DELETE для различных URL-адресов, таких как указанные ниже;

 http://локальный: 3000 /Coinshttp://localhost: 3000/Coins/post 

В приведенном выше примере

  1. Если GET выполняется для первого URL-адреса, тогда в идеале ответ должен представлять собой список монет.
  2. Если запрос POST выполняется для второго URL-адреса, затем мы сохраним данные в базе данных.
  3. Таким образом, в зависимости от URL-адреса, к которому осуществляется доступ, на веб-сервере будут задействованы различные функции, и, соответственно, ответ будет отправлен клиенту . Это концепция маршрутизации.

Каждый маршрут может иметь одну или несколько функций-обработчиков, которые выполняются при совпадении маршрута.

Настроить маршруты для нашего приложения. Поэтому используйте модуль Router, предоставляемый Express js. Сначала создайте в корневом каталоге папку с именем routes. В этой папке создайте один файл с именем

 const express = require ('express'); const app = express ();  const CoinRouter = express.Router (); CoinRouter.route ('/'). get (function (req, res) {res.render ('index');}); module.exports = CoinRouter; 

Теперь в файле server.js , нам нужен файл CoinRouter.js .

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

Переключитесь на URL-адрес браузера: http://localhost: 3000/Coins/ Будет отображено индексное представление.

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

Шаг 5: Создайте форму.

В представлениях из папки создается один файл с именем create.ejs ..

      EJS Engine     

Добавить монету

Следующим шагом является создание маршрута в файле CoinRouter.js , поэтому поместите в него следующий код.

//CoinRouter.jsCoinRouter.route  ('/create').get(function (req, res) {res.render (' create ');}); 

Шаг 6: Установите библиотеку Mongoose.

Мы будем использовать MongoDB для базы данных, поэтому создайте базу данных MongoDB , чтобы мы необходимо загрузить в наш проект пакет с именем Mongoose .

 npm install --save mongoose 

Теперь настройте базу данных для наше приложение Node js.

//server.jsconst mongoose = require ('mongoose'); mongoose.Promise = global.Promise; mongoose.connect ('mongodb://localhost/expressdemo')  ; 

Шаг 7. Установите модуль парсера тела.

Мы отправляем данные формы на сервер Node js, поэтому нам нужно установить модуль body-parser, чтобы проанализировать наши опубликованные данные и вставить эти данные в базу данных MongoDB .

 npm install --save body-parser  

Теперь включите этот модуль в наш файл server.js .

//server.jsconst bodyParser = require ('body  -parser '); app.use (bodyParser.urlencoded ({extended: true})); app.use (bodyParser.json ()); 

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

//Coin.model.jsconst mongoose = require ('mongoose')  ; const Schema = mongoose.Schema; const Coin = new Schema ({name: {type: String}, price: {type: Number}}, {collection: 'Coins'}); module.exports = mongoose.model ('  Coin ', Coin); 

Теперь создайте маршрут публикации в CoinRouter.js, поместив в него следующий код.

//CoinRouter.jsconst Coin = require ('../models/Coin.model'); CoinRouter.route ('/post'). post (function (req, res) {const coin = new Coin (req.  body); console.log (монета); монета. save () .then (coin => {res.redirect ('/Coins');}) .catch (err => {res.status (400) .send ("невозможно сохранить в базе данных");});  }); 

Каждый маршрут может иметь одну или несколько функций-обработчиков, которые выполняются при сопоставлении маршрута.

Общий синтаксис маршрута показан ниже.

 app.METHOD (PATH, HANDLER) 

Где

1) app является экземпляром экспресс-модуля

2) METHOD - это метод HTTP-запроса (GET, POST, PUT или DELETE)

3) PATH - это путь на сервере.

4) HANDLER - это функция, выполняемая при совпадении маршрута.

Наш файл server.js выглядит так.

 //server.jsconst express = require ('express'); const app = express (); const port = 3000; const path = require ('path'); const mongoose = require ('mongoose'); const bodyParser = require  ('body-parser'); mongoose.Promise = global.Promise; mongoose.connect ('mongodb://localhost/expressdemo'); const CoinRouter = require ('./routes/CoinRouter'); app.use (express  .static ('public')); app.set ('view engine', 'ejs'); app.use (bodyParser.urlencoded ({extended: true})); app.use (bodyParser.json ());  app.use ('/Coins', CoinRouter); app.get ('/', function (req, res) {res.sendFile (path.join (__ dirname, 'public', 'index.html'));}  ); app.listen (port, function () {console.log ('Node js Express js Tutorial at port', port);}); 

Здесь мы определяем маршрут, если URL В браузере выбран http://localhost: 3000/Coins . К маршруту мы присоединяем функцию обратного вызова, которая будет вызываться, когда мы перейдем к URL-адресу листинга монет.

Когда URL-адрес содержит URI/Coins, он выполнит CoinRouter , который содержит множество подмаршрутов для запросов Get, Post, Patch и Delete.

Попробуйте отправить Coin , и да, он будет успешно добавить в базу данных MongoDB .

Шаг 8. Отображение списка монет.

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

//CoinRouter.jsCoinRouter.route ('/'). get (function (req, res) {Coin.find (function (err, Coins) {if (err) {console.log (err)  ;} else {res.render ('index', {Coins: Coins});}});}); 

Кроме того, нам нужно изменить этот index.ejs для отображения данных.

       Учебное пособие по Node js Express     
Название монеты Цена монеты Действие
Изменить Удалить

Шаг 9: Создайте вид редактирования и маршрут.

В папке views создайте папку с именем edit. ejs. Кроме того, нам нужно передать данные из базы данных по ее идентификатору.

В MongoDB первичным ключом является _id. Итак, нам нужно чтобы получить коллекцию данных по ее идентификатору. Поэтому напишите следующий код в файл CoinRouter.js .

//CoinRouter.jsCoinRouter.route ('/ edit/: id '). get (function (req, res) {const id = req.params.id; Coi  n.findById (идентификатор, функция (ошибка, монета) {res.render ('редактировать', {монета: монета});  });  }); 

Создайте файл edit.ejs в каталоге представлений.

      Изменить монету     

Изменить монету

Теперь закодируйте функцию обновления для обновления значений в базе данных.

//CoinRouter.jsCoinRouter.route ('/update /:id').post(function (req, res) {Coin.findById (req.params.id, function (err, coin) {if (! coin) return next (new Error  ('Не удалось загрузить документ'));  else {//сделайте здесь свои обновления coin.name = req.body.name;  coin.price = req.body.price;  coin.save (). then (coin => {res. перенаправление ('/монеты');  }) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");});  }});  }); 

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

Шаг 10: Удалите данные.

Теперь осталась функция удаления , что мы и сделаем, а затем назовем это днем.

//CoinRouter.  jsCoinRouter.route ('/delete/: id'). get (function (req, res) {Coin.findByIdAndRemove ({_ id: req.params.id}, function (err, coin) {if (err) res.json  (err); else res.redirect ('/Coins');});}); 

Весь наш файл CoinRouter.js выглядит так.

//CoinRouter.jsconst express = require ('express'); const app = express (); const CoinRouter = express.Router (); const Coin = require ('../models/Coin  .model '); CoinRouter.route ('/'). get (function (req, res) {Coin.find (function (err, Coins) {if (err) {console.log (err);} else {res  .render ('index', {Coins: Coins});}});}); CoinRouter.route ('/create'). get (function (req, res) {res.render ('create');}  );  CoinRouter.route ('/post'). Post (function (req, res) {const coin = new Coin (req.body); console.log (coin); coin.save () .then (coin => {res  .redirect ('/Coins');}) .catch (err => {res.status (400) .send ("невозможно сохранить в базе данных");});}); CoinRouter.route ('/edit/ : id '). get (function (req, res) {const id = req.params.id; Coin.findById (id, function (err, coin) {res.render (' edit ', {coin: coin})  ;});});  CoinRouter.route ('/update/: id'). Post (function (req, res) {Coin.findById (req.params.id, function (err, coin) {if (! Coin) return next (new Error (  'Не удалось загрузить документ')); else {//сделайте свои обновления здесь coin.name = req.body.name; coin.price = req.body.price; coin.save (). Then (coin => {res  .redirect ('/Coins');}) .catch (err => {res.status (400) .send ("невозможно обновить базу данных");});}});});  CoinRouter.route ('/delete/: id'). Get (function (req, res) {Coin.findByIdAndRemove ({_ id: req.params.id}, function (err, coin) {if (err) res.json  (err); else res.redirect ('/Coins');});}); module.exports = CoinRouter; 

Резюме

  1. Фреймворк Express - это наиболее распространенный фреймворк, используемый для разработки приложений Node. Платформа Express построена на основе структуры узлов и помогает в быстрой разработке серверных приложений.
  2. Маршруты используются для перенаправления пользователей к различным частям веб-приложений на основе запрос сделан. Ответ для каждого маршрута может варьироваться в зависимости от того, что нужно показать пользователю.
  3. Шаблоны можно использовать для эффективного внедрения контента. Jade - один из самых популярных движков шаблонов, используемых в приложениях Node..

Наконец, наше Учебное пособие по Node js Express для начинающих с нуля 2020 подошло к концу. Это тот же код.

Похожие сообщения

Загрузка изображений в Node Express

Настройка Node Express в Docker

Как серверить статический файл в Express

AWS Lamda и пример узла

Пример файловой системы узла

Fork Me On Github

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