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

Введение в Express

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

С Express вы можете быстро создать полнофункциональный веб-сайт.

Основные возможности фреймворка Express:

  • Вы можете настроить промежуточное ПО для ответа на HTTP-запросы.

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

  • Вы можете динамически отображать HTML-страницы, передавая параметры в шаблоны.

Установка Express

Установите Express и сохраните его в списке зависимостей:

$ cnpm install express --save

Приведённая выше команда установит фреймворк Express вnode_modulesкаталоге текущего каталога,node_modulesКаталог express будет автоматически создан в этом каталоге. Следующие важные модули необходимо установить вместе с фреймворком Express:

  • body-parser- промежуточное ПО Node.js для обработки данных JSON, Raw, Text и URL-encoded.

  • cookie-parser- это инструмент для разбора cookies. Вы можете получить входящие cookies через req.cookies и преобразовать их в объекты.

  • multer- промежуточное ПО Node.js для обработки данных формы с enctype="multipart/form-data" (задаёт MIME-кодировку формы).

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

После установки мы можем проверить номер используемой версии express:

$ cnpm list express
/data/www/node
└── [email protected]  -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

Первый пример фреймворка Express

Далее мы используем фреймворк Express, чтобы вывести "Hello World".

В следующем примере мы подключаем модуль express и отвечаем строкой "Hello World" после того, как клиент сделает запрос.

Создайте файл express_demo.js со следующим кодом:

Код файла express_demo.js:

//Файл express_demo.js var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Привет, мир'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Экземпляр приложения, адрес доступа: http://%s:%s", host, port) })

Выполните приведённый выше код:

$ node express_demo.js 
应用实例，访问地址为 http://0.0.0.0:8081

Перейдите по адресу http://127.0.0.1:8081 в браузере, результат показан на рисунке ниже:

Запрос и ответ

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

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

requestиresponseПодробное описание объектов:

Объект запроса- Объект запроса представляет HTTP-запрос и содержит такие свойства, как строка запроса, параметры, содержимое и HTTP-заголовки. Общие свойства включают:

  1. req.app: Если callback — внешний файл, используйте req.app для доступа к экземпляру express
  2. req.baseUrl: Получает URL-путь, по которому в данный момент смонтирован маршрут
  3. req.body / req.cookies: Получает «тело запроса» / куки
  4. req.fresh / req.stale: Определяет, является ли запрос всё ещё «свежим»
  5. req.hostname / req.ip: Получает имя хоста и IP-адрес
  6. req.originalUrl: Получает исходный URL запроса
  7. req.params: Получает параметры маршрута
  8. req.path: Получает путь запроса
  9. req.protocol: Получает тип протокола
  10. req.query: Получает строку параметров запроса URL
  11. req.route: Получает текущий сопоставленный маршрут
  12. req.subdomains: Получает поддомены
  13. req.accepts(): Проверяет допустимые типы документов для запроса
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages: Возвращает первую допустимую кодировку символов из указанных наборов символов
  15. req.get(): Получает указанный заголовок HTTP-запроса
  16. req.is(): Определяет MIME-тип заголовка Content-Type запроса

Объект ответа— объект response представляет HTTP-ответ, т. е. данные HTTP-ответа, отправляемые клиенту при получении запроса. Общие свойства включают:

  1. res.app: То же, что и req.app
  2. res.append(): Добавляет указанный HTTP-заголовок
  3. res.set() сбросит ранее установленные заголовки после res.append()
  4. res.cookie(name, value [, option]): Устанавливает Cookie
  5. опции: domain / expires / httpOnly / maxAge / path / secure / signed
  6. res.clearCookie(): Очищает Cookie
  7. res.download(): Передаёт файл по указанному пути
  8. res.get(): возвращает указанный HTTP-заголовок
  9. res.json(): отправляет ответ JSON
  10. res.jsonp(): отправляет ответ JSONP
  11. res.location(): устанавливает только HTTP-заголовок Location ответа, не устанавливая код состояния и не закрывая ответ.
  12. res.redirect(): устанавливает HTTP-заголовок Location ответа и код состояния 302
  13. res.render(view, [locals], callback): рендерит представление и передаёт отрендеренную строку в callback. Если во время рендеринга возникает ошибка, автоматически вызывается next(err). В callback будут переданы возможная ошибка и отрендеренная страница, поэтому автоматического вывода не будет.
  14. res.send(): отправляет HTTP-ответ
  15. res.sendFile(path [, options] [, fn]): передаёт файл по указанному пути - Автоматически устанавливает Content-Type на основе расширения файла
  16. res.set(): устанавливает HTTP-заголовки; можно установить несколько заголовков сразу, передав объект
  17. res.status(): устанавливает HTTP-код состояния
  18. res.type(): устанавливает MIME-тип для Content-Type

Маршрутизация

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

В HTTP-запросах мы можем извлекать запрошенный URL и параметры GET/POST с помощью маршрутизации.

Далее мы расширяем Hello World, добавляя некоторые возможности для обработки большего числа типов HTTP-запросов.

Создайте файл express_demo2.js со следующим кодом:

Код файла express_demo2.js:

var express = require('express'); var app = express(); //Главная страница выводит "Hello World" app.get('/', function (req, res) { console.log("GET-запрос главной страницы"); res.send('Hello GET'); }) //POST-запрос app.post('/', function (req, res) { console.log("POST-запрос главной страницы"); res.send('Hello POST'); }) //ответ страницы /del_user app.get('/del_user', function (req, res) { console.log("/del_user отвечает на DELETE-запрос"); res.send('Страница удаления'); }) //GET-запрос для страницы /list_user app.get('/list_user', function (req, res) { console.log("/list_user GET-запрос"); res.send('Страница списка пользователей'); }) //Отвечает на GET-запросы для страниц abcd, abxcd, ab123cd и т.д. app.get('/ab*cd', function(req, res) { console.log("/ab*cd GET-запрос"); res.send('Сопоставление регулярных выражений'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Пример приложения, адрес доступа: http://%s:%s", host, port) })

Выполните приведённый выше код:

$ node express_demo2.js 
应用实例，访问地址为 http://0.0.0.0:8081

Затем можно попробовать обратиться по разным адресам, например http://127.0.0.1:8081, чтобы увидеть результат.

Откройте http://127.0.0.1:8081/list_user в браузере, результат показан на рисунке ниже:

Откройте http://127.0.0.1:8081/abcd в браузере, результат показан на рисунке ниже:

Откройте http://127.0.0.1:8081/abcdefg в браузере, результат показан на рисунке ниже:

Статические файлы

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

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

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

Мы можем поместить некоторые изображения в каталог public/images, как показано ниже:

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

Давайте снова изменим приложение "Hello World", чтобы добавить возможность обработки статических файлов.

Создайте файл express_demo3.js, код выглядит следующим образом:

Код файла express_demo3.js:

var express = require('express'); var app = express(); app.use('/public', 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("Пример приложения, адрес доступа: http://%s:%s", host, port) })

Выполните приведённый выше код:

$ node express_demo3.js 
应用实例，访问地址为 http://0.0.0.0:8081

Выполните приведённый выше код:

Откройте http://127.0.0.1:8081/public/images/logo.png в браузере (в этом примере используется логотип Example tutorial), результат показан на рисунке ниже:

Метод GET

В следующем примере демонстрируется отправка двух параметров методом GET в форме. Мы можем использоватьprocess_getроутер для обработки ввода:

Код файла index.html:

<html> <body> <form action="/process_get" method="GET"> Имя: <input type="text" name="first_name"> <br> Фамилия: <input type="text" name="last_name"> <input type="submit" value="Отправить"> </form> </body> </html>

Код файла server.js:

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.get('/process_get', function (req, res) { //Вывод в формате JSON var 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("Пример приложения, адрес доступа: http://%s:%s", host, port) })

Выполните приведённый выше код:

node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Откройте http://127.0.0.1:8081/index.html в браузере, как показано на рисунке:

Теперь вы можете ввести данные в форму и отправить её, как показано ниже:

Метод POST

В следующем примере демонстрируется отправка двух параметров через форму методом POST. Мы можем использоватьprocess_postrouter для обработки ввода:

Код файла index.html:

<html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> Имя: <input type="text" name="first_name"> <br> Фамилия: <input type="text" name="last_name"> <input type="submit" value="Отправить"> </form> </body> </html>

Код файла server.js:

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('/public', express.static('public')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.post('/process_post', urlencodedParser, function (req, res) { //Вывод в формате JSON var 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("Пример приложения, адрес доступа: http://%s:%s", host, port) })

Выполните приведённый выше код:

$ node server.js
应用实例，访问地址为 http://0.0.0.0:8081

Откройте http://127.0.0.1:8081/index.html в браузере, как показано на рисунке:

Теперь вы можете ввести данные в форму и отправить её, как показано ниже:

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

Ниже мы создаём форму для загрузки файлов, используя метод POST, с атрибутом enctype формы, установленным в multipart/form-data.

Код файла index.html:

<html> <head> <title>Форма загрузки файла</title> </head> <body> <h3>Загрузка файла:</h3>Выберите файл для загрузки:<br /> <form action="/file_upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" size="50" /> <br /> <input type="submit" value="Загрузить файл" /> </form> </body> </html>

Код файла server.js:

var express = require('express'); var app = express(); var fs = require("fs"); var bodyParser = require('body-parser'); var multer = require('multer'); app.use('/public', express.static('public')); app.use(bodyParser.urlencoded({ extended: false })); app.use(multer({ dest: '/tmp/'}).array('image')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.post('/file_upload', function (req, res) { console.log(req.files[0]); //Информация о загруженном файле var des_file = __dirname + "/" + req.files[0].originalname; fs.readFile( req.files[0].path, function (err, data) { fs.writeFile(des_file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'Файл успешно загружен', filename:req.files[0].originalname }; } 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("Пример приложения, адрес доступа: http://%s:%s", host, port) })

Выполните приведённый выше код:

$ node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Откройте http://127.0.0.1:8081/index.html в браузере, как показано на рисунке:

Теперь вы можете ввести данные в форму и отправить её, как показано ниже:

Управление cookie

Мы можем использовать промежуточное ПО для отправки информации о cookie на сервер Node.js. Следующий код выводит информацию о cookie, отправленную клиентом:

Код файла express_cookie.js:

//файл express_cookie.js var express = require('express') var cookieParser = require('cookie-parser') var util = require('util'); var app = express() app.use(cookieParser()) app.get('/', function(req, res) { console.log("Куки: " + util.inspect(req.cookies)); }) app.listen(8081)

Выполните приведённый выше код:

$ node express_cookie.js

Теперь вы можете получить доступ к http://127.0.0.1:8081 и просмотреть вывод терминала, как показано ниже:

Связанные материалы

Другие расширения