Node.js — Фреймворк Express

Node.js — Фреймворк Express

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

Позволяет настроить посредников для ответа на запросы HTTP.

Определяет таблицу маршрутизации, которая используется для выполнения различных действий на основе метода HTTP и URL-адреса.

Позволяет динамически создавать HTML-страницы на основе передачи аргументов шаблонам.

Установка Express

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
$ npm install express --save

Приведенная выше команда устанавливает фреймворк локально в каталоге node_modules и создает внутри каталога node_modules каталог express. Вместе с express необходимо установить следующие основные модули:

body-parser — это middleware node.js для обработки кодированных данных JSON, Raw, Text и URL.

cookie-parser — обрабатывает заголовоки Cookie и передает в req.cookies объект с именами cookie.

multer — это middleware node.js для обработки multipart/form-data.

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Пример приложения Hello world

Ниже приведено очень простое приложение Express, которое запускает сервер и прослушивает порт 8081. Это приложение выдает ответ Hello World! на запросы к главной странице. На запросы ко всем остальным путям предоставляется ответ 404 Not Found.

var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
 res.send('Hello World');
})
 
var server = app.listen(8081, function () {
 var host = server.address().address
 var port = server.address().port
 
 console.log("Example app listening at http://%s:%s", host, port)
})

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

$ node server.js

В результате вы должны получить следующее:

Example app listening at http://0.0.0.0:8081

Перейдите по адресу http://127.0.0.1:8081/ в любом браузере.

Node.js — Фреймворк Express

Ответ на запрос

Приложение Express использует функцию обратного вызова, параметрами которой являются объекты request и response.

app.get('/', function (req, res) {
 // --
})

Объект Request − Объект request представляет HTTP-запрос и содержит свойства для строки запроса, параметров, тела, заголовков HTTP и т. д.

Объект Response – Объект response представляет HTTP-ответ, отправляемый приложением Express, после получения HTTP-запроса.

Вы можете вывести объекты req и res, которые предоставляют различную информацию, связанную с HTTP запросом и ответом, включая файлы cookie, сессии, URL-адреса и т. д.

Базовая маршрутизация

Мы рассмотрели простейшее приложение, которое обслуживает HTTP-запрос к главной странице. Маршрутизация обрабатывает то, как приложение будет обрабатывать запрос клиентов к конкретной точке, которая представляет собой URI (или путь) и конкретный метод HTTP-запроса (GET, POST и т. д.). Мы расширим нашу программу Hello World, чтобы она обрабатывала больше типов HTTP-запросов.

var express = require('express');
var app = express();
 
// Отвечает на запрос к главной странице "Hello World" 
app.get('/', function (req, res) {
 console.log("Got a GET request for the homepage");
 res.send('Hello GET');
})
 
// Отвечает на  POST-запрос к главной странице
app.post('/', function (req, res) {
 console.log("Got a POST request for the homepage");
 res.send('Hello POST');
})
 
// Это отвечает на запрос DELETE для страницы /del_user.
app.delete('/del_user', function (req, res) {
 console.log("Got a DELETE request for /del_user");
 res.send('Hello DELETE');
})
 
// Отвечает на GET-запрос к странице /list_user.
app.get('/list_user', function (req, res) {
 console.log("Got a GET request for /list_user");
 res.send('Page Listing');
})
 
// Отвечает на GET -апрос для abcd, abxcd, ab123cd, и т.д.
app.get('/ab*cd', function(req, res) { 
 console.log("Got a GET request for /ab*cd");
 res.send('Page Pattern Match');
})
 
var server = app.listen(8081, function () {
 
 var host = server.address().address
 var port = server.address().port
 
 console.log("Example app listening at http://%s:%s", host, port)
})

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

$ node server.js

Вы получите следующий результат:

Example app listening at http://0.0.0.0:8081

Теперь вы можете попробовать разные запросы к http://127.0.0.1:8081, чтобы увидеть результат, сгенерированный server.js. Ниже приведены несколько снимков экранов, на которых показаны разные ответы для разных URL-адресов. http://127.0.0.1:8081/list_user:

Node.js — Фреймворк Express

http://127.0.0.1:8081/abcd:

Node.js — Фреймворк Express

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

http://127.0.0.1:8081/abcdefg:

Node.js — Фреймворк Express

Обслуживание статических файлов

Express предоставляет встроенное middleware express.static для обслуживания статических файлов, таких как изображения, CSS, JavaScript и т. д.

Вам просто нужно передать имя каталога, в котором хранятся статические ресурсы, в middleware express.static, чтобы обслуживать файлы напрямую. Например, если вы сохраняете файлы изображений, CSS и JavaScript в каталоге с именем public, вы можете сделать следующее:

app.use(express.static('public'));

Мы сохраним несколько изображений в подкаталоге public/images следующим образом:

node_modules
server.js
public/
public/images
public/images/logo.png

Давайте изменим приложение «Hello Word», чтобы добавить функционал для обработки статических файлов.

var express = require('express');
var app = express();
 
app.use(express.static('public'));
 
app.get('/', function (req, res) {
 res.send('Hello World');
})
 
var server = app.listen(8081, function () {
 var host = server.address().address
 var port = server.address().port
 
 console.log("Example app listening at http://%s:%s", host, port)
 
})

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

$ node server.js

Теперь откройте перейдите к http://127.0.0.1:8081/images/logo.png в любом браузере, вы должны увидеть следующее.

Node.js — Фреймворк Express

Метод GET

Ниже приводится простой пример, в котором мы передаем два значения, используя метод HTML FORM GET. Для обработки этих данных мы будем использовать маршрутизатор process_get внутри server.js.

<html>
 <body>
 
 <form action = "http://127.0.0.1:8081/process_get" method = "GET">
 First Name: <input type = "text" name = "first_name">  <br>
 Last Name: <input type = "text" name = "last_name">
 <input type = "submit" value = "Submit">
 </form>
 
 </body>
</html>

Сохраните приведенный выше код в index.htm и измените server.js, чтобы он обрабатывал запросы к главной странице, а также данные введенные через HTML-форму.

var express = require('express');
var app = express();
 
app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
 res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.get('/process_get', function (req, res) {
 // Подготовка вывода в формате JSON
 response = {
 first_name:req.query.first_name,
 last_name:req.query.last_name
 };
 console.log(response);
 res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, function () {
 var host = server.address().address
 var port = server.address().port
 console.log("Example app listening at http://%s:%s", host, port)
 
})

Переход к HTML-документу через http://127.0.0.1:8081/index.htm приведет к созданию следующей формы:

Node.js — Фреймворк Express

Теперь вы можете ввести имя и фамилию, а затем нажать кнопку «Отправить», в результате вы должны получить следующее:

{"first_name":"John","last_name":"Paul"}

Метод POST

Ниже приводится простой пример, в котором мы передаем два значения, используя метод HTML FORM POST. Для обработки введенных данных мы будем использовать маршрутизатор process_get внутри server.js.

<html>
 <body>
 
 <form action = "http://127.0.0.1:8081/process_post" method = "POST">
 First Name: <input type = "text" name = "first_name"> <br>
 Last Name: <input type = "text" name = "last_name">
 <input type = "submit" value = "Submit">
 </form>
 
 </body>
</html>

Сохраните приведенный выше код в index.htm и измените server.js, чтобы он обрабатывал запросы к главной странице, а также данные введенные через HTML-форму.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
 
// Создаем парсер application/x-www-form-urlencoded
var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
 res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.post('/process_post', urlencodedParser, function (req, res) {
 // Подготовка вывода в формате JSON 
 response = {
 first_name:req.body.first_name,
 last_name:req.body.last_name
 };
 console.log(response);
 res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, function () {
 var host = server.address().address
 var port = server.address().port
 
 console.log("Example app listening at http://%s:%s", host, port)
 
})

Переход к HTML-документу через http://127.0.0.1:8081/index.htm приведет к созданию следующей формы:

Node.js — Фреймворк Express

Теперь вы можете ввести Имя и Фамилию, а затем нажмите кнопку отправить:

{"first_name":"John","last_name":"Paul"}

Загрузка файлов

Следующий HTML-код создает форму для загрузки файлов. В этой форме для атрибута method , задано значение POST, а для атрибута enctype — multipart/form-data.

<html>
 <head>
 <title>File Uploading Form</title>
 </head>
 
 <body>
 <h3>File Upload:</h3>
 Select a file to upload: <br />
 
 <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
 enctype = "multipart/form-data">
 <input type="file" name="file" size="50" />
 <br />
 <input type = "submit" value = "Upload File" />
 </form>
 
 </body>
</html>

Сохраните приведенный выше код в index.htm и измените server.js для обработки запросов к главной странице, а также загрузки файлов.

var express = require('express');
var app = express();
var fs = require("fs");
 
var bodyParser = require('body-parser');
var multer  = require('multer');
 
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));
 
app.get('/index.htm', function (req, res) {
 res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.post('/file_upload', function (req, res) {
 console.log(req.files.file.name);
 console.log(req.files.file.path);
 console.log(req.files.file.type);
 var file = __dirname + "/" + req.files.file.name;
 
 fs.readFile( req.files.file.path, function (err, data) {
 fs.writeFile(file, data, function (err) {
 if( err ){
 console.log( err );
 }else{
 response = {
 message:'File uploaded successfully',
 filename:req.files.file.name
 };
 }
 console.log( response );
 res.end( JSON.stringify( response ) );
 });
 });
})
 
var server = app.listen(8081, function () {
 var host = server.address().address
 var port = server.address().port
 
 console.log("Example app listening at http://%s:%s", host, port)
})

Переход к HTML-документу через http://127.0.0.1:8081/index.htm приведет к созданию следующей формы:

Node.js — Фреймворк Express

Управление файлами cookie

Вы можете отправлять файлы cookie на сервер Node.js, который будет обрабатывать их таким же образом, используя следующие параметры middleware. Ниже приведен простой пример вывода всех файлов cookie, отправленных клиентом.

var express = require('express')
var cookieParser = require('cookie-parser')
 
var app = express()
app.use(cookieParser())
 
app.get('/', function(req, res) {
 console.log("Cookies: ", req.cookies)
})
app.listen(8081)

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree