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

430

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

Дозволяє налаштувати посередників для відповіді на запити HTTP.

Визначає таблицю маршрутизації, яка використовується для виконання різних дій на основі методу HTTP та URL-адреси.

Дозволяє динамічно створювати HTML-сторінки на основі передачі аргументів шаблонами.

Установка Express

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

$ 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 використовує функцію зворотного виклику, параметрами якої є об’єкти запиту і відповіді.

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 Match Pattern’);
})
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

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.

First Name:
Last Name:

Збережіть наведений вище код 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 POST. Для обробки введених даних ми будемо використовувати маршрутизатор process_get всередині server.js.

First Name:
Last Name:

Збережіть наведений вище код 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.

File Uploading Form

File Upload:

Select a file to upload:

Збережіть наведений вище код 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

Ви можете відправляти файли на сервер 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)