От автора: Node js Express — это минималистичный и гибкий фреймворк веб-приложений Node.js, который предоставляет набор функций для разработки веб- и мобильных приложений. Он существенно упрощает разработку веб-приложений на базе Node. Ниже приведены некоторые из основных функций фреймворка Express.
Позволяет настроить посредников для ответа на запросы HTTP.
Определяет таблицу маршрутизации, которая используется для выполнения различных действий на основе метода HTTP и URL-адреса.
Позволяет динамически создавать HTML-страницы на основе передачи аргументов шаблонам.
Установка Express
Во-первых, глобально установите фреймворк Express с помощью NPM, чтобы его можно было использовать для разработки веб-приложений через терминал Node.
|
1 |
$ 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.
|
1 2 3 |
$ npm install body-parser --save $ npm install cookie-parser --save $ npm install multer --save |
Пример приложения Hello world
Ниже приведено очень простое приложение Express, которое запускает сервер и прослушивает порт 8081. Это приложение выдает ответ Hello World! на запросы к главной странице. На запросы ко всем остальным путям предоставляется ответ 404 Not Found.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 //%s:%s", host, port) }) |
Сохраните приведенный выше код в файле с именем server.js и запустите его с помощью следующей команды.
|
1 |
$ node server.js |
В результате вы должны получить следующее:
|
1 |
Example app listening at //0.0.0.0:8081 |
Перейдите по адресу //127.0.0.1:8081/ в любом браузере.
Ответ на запрос
Приложение Express использует функцию обратного вызова, параметрами которой являются объекты request и response.
|
1 2 3 |
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-запросов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
var express = require('express'); var app = express(); // This responds with "Hello World" on the homepage app.get('/', function (req, res) { console.log("Got a GET request for the homepage"); res.send('Hello GET'); }) // This responds a POST request for the homepage app.post('/', function (req, res) { console.log("Got a POST request for the homepage"); res.send('Hello POST'); }) // This responds a DELETE request for the /del_user page. app.delete('/del_user', function (req, res) { console.log("Got a DELETE request for /del_user"); res.send('Hello DELETE'); }) // This responds a GET request for the /list_user page. app.get('/list_user', function (req, res) { console.log("Got a GET request for /list_user"); res.send('Page Listing'); }) // This responds a GET request for abcd, abxcd, ab123cd, and so on 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 //%s:%s", host, port) }) |
Сохраните приведенный выше код в файле с именем server.js и запустите его с помощью следующей команды.
|
1 |
$ node server.js |
Вы получите следующий результат:
|
1 |
Example app listening at //0.0.0.0:8081 |
Теперь вы можете попробовать разные запросы к //127.0.0.1:8081, чтобы увидеть результат, сгенерированный server.js. Ниже приведены несколько снимков экранов, на которых показаны разные ответы для разных URL-адресов. //127.0.0.1:8081/list_user:
//127.0.0.1:8081/abcd:
//127.0.0.1:8081/abcdefg:
Обслуживание статических файлов
Express предоставляет встроенное middleware express.static для обслуживания статических файлов, таких как изображения, CSS, JavaScript и т. д.
Вам просто нужно передать имя каталога, в котором хранятся статические ресурсы, в middleware express.static, чтобы обслуживать файлы напрямую. Например, если вы сохраняете файлы изображений, CSS и JavaScript в каталоге с именем public, вы можете сделать следующее:
|
1 |
app.use(express.static('public')); |
Мы сохраним несколько изображений в подкаталоге public/images следующим образом:
|
1 2 3 4 5 |
node_modules server.js public/ public/images public/images/logo.png |
Давайте изменим приложение «Hello Word», чтобы добавить функционал для обработки статических файлов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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 //%s:%s", host, port) }) |
Сохраните приведенный выше код в файле с именем server.js и запустите его с помощью следующей команды.
|
1 |
$ node server.js |
Теперь откройте перейдите к //127.0.0.1:8081/images/logo.png в любом браузере, вы должны увидеть следующее.
Метод GET
Ниже приводится простой пример, в котором мы передаем два значения, используя метод HTML FORM GET. Для обработки этих данных мы будем использовать маршрутизатор process_get внутри server.js.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <body> <form action = "//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-форму.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var express = require('express'); var app = express(); app.use(express.static('public')); app.get('/index.htm', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.get('/process_get', function (req, res) { // Prepare output in JSON format 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 //%s:%s", host, port) }) |
Переход к HTML-документу через //127.0.0.1:8081/index.htm приведет к созданию следующей формы:
Теперь вы можете ввести имя и фамилию, а затем нажать кнопку «Отправить», в результате вы должны получить следующее:
|
1 |
{"first_name":"John","last_name":"Paul"} |
Метод POST
Ниже приводится простой пример, в котором мы передаем два значения, используя метод HTML FORM POST. Для обработки введенных данных мы будем использовать маршрутизатор process_get внутри server.js.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <body> <form action = "//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-форму.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); // Create application/x-www-form-urlencoded parser 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) { // Prepare output in JSON format 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 //%s:%s", host, port) }) |
Переход к HTML-документу через //127.0.0.1:8081/index.htm приведет к созданию следующей формы:
Теперь вы можете ввести Имя и Фамилию, а затем нажмите кнопку отправить:
|
1 |
{"first_name":"John","last_name":"Paul"} |
Загрузка файлов
Следующий HTML-код создает форму для загрузки файлов. В этой форме для атрибута method , задано значение POST, а для атрибута enctype — multipart/form-data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <title>File Uploading Form</title> </head> <body> <h3>File Upload:</h3> Select a file to upload: <br /> <form action = "//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 для обработки запросов к главной странице, а также загрузки файлов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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 //%s:%s", host, port) }) |
Переход к HTML-документу через //127.0.0.1:8081/index.htm приведет к созданию следующей формы:
Управление файлами cookie
Вы можете отправлять файлы cookie на сервер Node.js, который будет обрабатывать их таким же образом, используя следующие параметры middleware. Ниже приведен простой пример вывода всех файлов cookie, отправленных клиентом.
|
1 2 3 4 5 6 7 8 9 10 |
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) |
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
