Express Framework trong Node.js

Ngày đăng: 2024-07-31 07:44:08

Mục lục:

1. Tìm hiểu thêm về Express Framework trong Nodejs

2. Request & Response Object trong Express

6. Template Engine Pug trong Express

1. Tìm hiểu thêm về Express Framework trong Nodejs

A. Chuẩn bị code cho ứng dụng gửi mail NodeJS

Trong phần này sẽ sử dụng một vài kiến thức như :

Express căn bản
Template Engine Pug trong Express
Biến môi trường process.env trong Nodejs

Tìm hiểu về module Nodemailer

Nodemailer là một module cho các ứng dụng Node.js để cho phép dễ dàng như gửi email. Dự án đã bắt đầu trở lại vào năm 2010 khi không có bất cứ module nào an toàn cho việc gửi email. Hiện tại, đây là giải pháp mà hầu hết người dùng Node.js sử dụng.

Một số ưu điểm của module này được đề cập đến như :

Không có các module phụ thuộc
Tập trung nhiều vào bảo mật
Unicode hỗ trợ nhiều kiểu kí tự, bao gồm cả emoji
Hỗ trợ window, bạn có thể cài đặt nó trên môi trường window mà không gặp bất cứ khó khăn nào.
HIển thị HTML cũng như các đoạn văn bản thông thường.
Thêm tệp đính kèm vào tin nhắn
Tệp đính kèm hình ảnh được nhúng cho nội dung HTML - thiết kế của bạn không bị chặn
Gửi email an toàn bằng TLS / STARTTLS
Phương thức vận chuyển khác nhau ngoài hỗ trợ SMTP tích hợp
Đăng nhập tin nhắn với DKIM
Tùy chỉnh Plugin
Hỗ trợ thao tác xác thực Mesage Auth 2
Xác thực đối với các kết nối SMTP

Để cài đặt module nodemailer chỉ cần cài nó bằng npm:

npm install --save nodemailer

Tạo đối tượng gửi mail

Để gửi mail cần phải tạo đói tượng để gửi

let transporter = nodemailer.createTransport(transport[, defaults])

Ở đây có 3 phần cần chú ý tới :

transporter: là một đối tượng dùng để gửi mail
transport: cấu hình cho đối tượng transporter, trong bài này mình sẽ cấu hình gửi mail với gmail
default: mội đối tượng chứa các tinh chỉnh khác, bạn có thể đọc trên tài liệu của nodemailer

Gửi mail

Gọi method sendMail() trong đối tượng transporter vừa mới tạo ;

transporter.sendMail(mailOptions, [callback])

Sẽ có 2 tham số cần truyền vào trong method này đó là:

mailOptions: gồm một object chứa các giá trị của người gửi, người nhận, nội dung, tệp đính kèm,...
callback: một callback function chứa kết quả trả về.

B. Xây dựng ứng dụng gửi mail trong Nodejs

Cấu trúc thư mục sẽ sử dụng trong dự án nhé.

views

|--index.pug

app.js

.env

Cài đặt các module cần thiết

Express: Dùng để khởi tạo HTTP Web Server
express-formidable : Dùng để parse form
pug: Sử dụng template engine Pug cho express
dotenv: Sử dụng biến môi trường
nodemailer: Dùng để gửi mail

Để cài đặt các module này mở terminal lên và gõ dòng lệnh

node install --save express express-formdiable pug dotenv nodemailer

- Khởi tạo biến môi trường

Trong file .env khởi tạo các biến môi trường cho dự án như: EMAL, PASSWOR, PORT.

EMAIL=username@gmail.com
PASSWORD=password
PORT=8080

Để gửi mail bằng Gmail theo cách này cần phải bật chế độ Quyền truy cập ứng dụng kém an toàn trước nhé. Để bật bạn vào link này: https://myaccount.google.com/security

Khởi tạo server sử dụng Express

Khởi tạo server bằng express trong file app.js như sau:

//Require các module cần thiết

const express = require("express");

const app = express();

const nodemailer = require("nodemailer");

const formidableMiddleware = require("express-formidable");

require("dotenv").config();

//Khai báo suử dụng template pug

app.set("views", "./views");

app.set("view engine", "pug");

//Middleware parse form

app.use(

formidableMiddleware({

multiples: true

})

);

//Khởi tạo route

app.get("/", (req, res) => {

res.render("index");

});

//Khởi tạo route POST xử lí khi send mail

app.post("/sendMail", async (req, res) => {

});

app.listen(process.env.PORT || 8080);

Giao diện cho trang gửi mail

Sử dụng template engine pug cho việc viết giao diện bởi nó nhanh hơn rất nhiều đối với cách viết bình thường, sau đây là file index.pug nằm trong thư mục views

mixin alert(type, msg)

-var classes = "alert alert-"+type

div(class=classes)

strong=msg

<!DOCTYPE html>

html(lang="vi")

head

title Gửi mail sử dụng Nodejs

link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css")

body

div.container

div.row

div.col-md-12

div.card(style="margin-top: 5%")

h1.card-header Gửi mail sử dụng NodeJS

div.content(style="padding: 2%")

//- Gọi mixin alert khi nhận được biến msg từ route

if (msg)

+alert(type, msg)

form(method="POST" action="/sendMail" enctype="multipart/form-data")

div.form-group

label(for="sendTo") Người cần gửi

input.form-control(type="email" require=true placeholder="xxx@gmail.com" name="to")

div.form-group

label(for="subject") Tiêu đề

input.form-control(type="text" require=true placeholder="titoe.net" name="subject")

div.form-group

label(for="content") Nội dung

textarea.form-control(rows="5" placeholder="Nội dung" name="text")

div.form-group

label(for="content") Attachments

input.form-control(name="fileSend" type="file" multiple)

button(class=['btn', 'btn-primary', 'btn-block']) Gửi mail

Ở trê khởi tạo môt mixin có tên alert, gọi mixin này khi mà view nhận được biến msg từ route.

Xử lí hành động gửi mail

Với file app.js, Khi submit form người dùng sẽ được chuyển đến route có path là /sendMail và method là POST, ở route tiến hành xử lý các phần như:

//Khởi tạo route POST xử lí khi send mail

app.post("/sendMail", async (req, res) => {

var attachments; //Khởi tạo biến chứa các attachments

//Khởi tạo đối tượng để gửi mail

const transporter = nodemailer.createTransport({

service: "gmail",

auth: {

user: process.env.EMAIL,

pass: process.env.PASSWORD

}

});

//Trường hợp nếu có nhiều file được gửi về

if (req.files.fileSend.length > 0) {

//Gán giá trị vào biến attachments

attachments = await req.files.fileSend.map(file => {

return {

filename: file.name,

path: file.path

};

});

}

//Trường hợp nếu chỉ có 1 file

if (req.files.fileSend.size > 0) {

//Gán giá trị vào biến attachments

attachments = [

{

filename: req.files.fileSend.name,

path: req.files.fileSend.path

}

];

}

//Lấy các giá trị từ fields như nguwoif nhận, tiêu đề, nội dung

let { to, subject, text } = req.fields;

//Chỉnh các giá tri của mail

let mailOptions = {

from: process.env.EMAIL,

to,

subject,

text,

attachments

};

//Tiến hành tạo Promise và gửi mail

const sendMail = new Promise(function(resolve, reject) {

transporter.sendMail(mailOptions, function(error, info) {

//Kiểm tra lỗi

if (error) {

reject({

msg: error,

type: "danger"

});

} else {

resolve({

msg: "Email sent: " + info.response,

type: "success"

});

}

});

//Tiến hành trả về thông báo

sendMail

.then(result => {

res.render("index", result);

})

.catch(err => {

res.render("index", err);

});

Trong bài này mình sử dụng một vài cú pháp của Javascript ES6.

Hoàn thiện dự án và khởi chạy chương trình

Mở terminal nên và gõ dòng lệnh bên dưới để chạy chương trình:

node app.js

Truy cập đường dẫn http://localhost:8080, chúng ta sẽ thấy trang để gửi mail:

Sau khi điền thông tin vào form, và nhận gửi mail. Nếu thành công sẽ nhận được thông báo.

gui mail su dung nodemailer png

2. Request & Response Object trong Express

A. Request Object trong Express là gì ?

Request Object trong Express.js cho phép kiểm tra mọi khía cạnh về yêu cầu mà người dùng (client) gửi đến server(cho dù bằng trình duyệt, bằng cURL hoặc trình duyệt di động, v.v.). Trong request object bao gồm rất nhiều thứ như url, method, form data, header,...Khi bạn khởi tạo một route khi người dùng (client) truy cập đồng nghĩa với việc người dùng đã gửi cho ứng dụng Express một Request.

Ví dụ khi người dùng đăng nhập, request object lúc này bao gồm dữ liệu như email, mật khẩu,...Việc chúng ta cần làm là lấy các giá trị của object và kiểm tra đăng nhập.

app.get('/login', (req, res) => {

//Lấy username và password từ request của nguười dùng

let {username, password} = req.param

})

Request object là tham số req trong callback function của route. Chúng ta sẽ mặc định gọi Request object là req cho ngắn gọn!

- Các thuộc tính trong req mà Express cung cấp :

Làm việc với Request Object

Các thuộc tính có trong Req Object

Đây là một vài thuộc tính có trong req obejct mà Express cung cấp :

#	Thuộc tính	Miêu tả
1.	req.app	Giữ tham chiếu đến đến middleware
2.	req.baseurl	Hiển thị đường dẫn cụ thể đến route được chỉ định
3.	req.body	Nó chứa key - value dữ liệu được gửi đến bởi client. Mặc định, nó có giá trị là undefined, và thông thường được gán gía trị khi parse body bằng middleware body-parse
4.	req.cookies	Chứa các giá trị của cookies mà ngươi dùng gửi đến, khi ta sử dụng middleware cookiep-parse thì thuộc tính vào mới có dữ liệu.
5.	req.fresh	Chỉ định yêu cầu này là mới khởi tạo
6.	req.hostname	Chứa giá trị của của host trong header
7.	req.ip	Chứa địa chỉ IP của người dùng khi request
8.	req.ips	Khi cài đặt proxy tin cậy được bật, thuộc tính này chứa một mảng các IP cụ thể.
9.	req.originalurl	Cũng giống như req.url, tuy nhiên nó lại chứa nguyên url của request, cho phép sửa đổi req.url một cách tùy ý.
10.	req.params	Một object chứa các thuộc tính cho việc định danh route. Ví dụ có một route là /posts/:postID, khi truy cập vào đường dẫn /posts/123 thì để lấy giá trị của postID chỉ cần lấy bằng cách req.params.postID
11.	req.path	Chứa path của URL
12.	req.protocol	Một chuỗi chứa request protocol, 'http' hoặc 'https' khi request với TLS
13.	req.query	Một object chứa các parameter của route VD: localhost:3000/user?titoe=true&laptrinh=nodejs khi này req.query sẽ là bao gồm một object chứa {titoe: true, laptrinh: 'nodejs' }
14.	req.route	Một chuỗi chứa route hiện tại
15.	req.secure	Trả về kiểu boolean có giá trị true nếu kết nối TLS được kích hoạt
16.	req.signedcookies	Khi sử dụng middleware hỗ trợ việc sign cookie, thuộc tính này chứa cookie đã sign theo yêu cầu, chưa sign và sẵn sàng để sử dụng.
17.	req.stale	ngược lại với req.fresh
18.	req.subdomains	Trả về một mảng gía trị của subdomain trong domain chính
19.	req.xhr	Trả về kiểu Boolean là true nếu trường tiêu đề "x-request-with" của yêu cầu là "xmlhttprequest".

Một vài thuộc tính thường dùng

Lấy dữ liệu người dùng gửi đến

Có 3 cách để nhận dữ liệu từ người dùng gửi về tùy theo từng trường hợp : req.params, req.query, và req.body

req.params

// GET https://titoe.net/user/123

app.get('user/:userid', (req, res) => {

console.log(req.params.userid) // "123"

})

req.query

// GET https://titoe.net/user?userID=123&action=changeProfile

app.get('user/', (req, res) => {

console.log(req.query.userID) // "123"

console.log(req.query.action) // "changeProfile"

})

req.body

// POST https://titoe.net/login {username: 'admin', password: '1234'}

app.get('login/', (req, res) => {

console.log(req.body.username) // "admin"

console.log(req.body.password) // "1234"

})

Lấy các giá trị của URL :

Có thể truy cập đến các phần tử lưu giữ các thông tin của URL như protocol, hostname, path, subdomains,.. việc này sẽ hiểu trong quá trình làm việc cần xử lý các tác vu liên quan đến URL

// https://titoe.net/search?keyword=nodejs

app.get('/search', (req, res) => {

console.log(req.protocol) // "https"

console.log(req.hostname) // "titoe.net"

console.log(req.path) // "/search"

console.log(req.originalUrl) // "/keyword=nodejs"

console.log(req.subdomains) // "['']"

})

Lấy giá trị của header

Ngoài gửi các dữ liệu và người dùng, trình duyệt còn gửi đi các header chứa các thông tin bổ sung như Connection, Keep-Alive, Proxy-Authenticate,...

app.post('/login', (req, res) => {

req.header('Content-Type') // "application/json"

req.header('Content-Length') // 75"

req.header('user-agent') // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/82.0.4062.3 Safari/537.36"

req.header('Authorization') // "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."

})

Lấy gíá trị của cookies

Khi sử dụng các midleware hỗ trợ việc parse cookie như cookie-parse, object req.cookies sẽ bao gồm các cookies của người dùng.

app.post('/login', (req, res) => {

req.cookies.isShowPopup; // true

req.cookies.sessionID; //<span style="color: rgb(34, 34, 34); font-family: Roboto, Ubuntu, Arial, sans-serif; font-size: 12px; white-space: pre;">gsnsjfr3j09n02v</span>

})

B. Response Object trong NodeJS

Response Object trong Express thường được viết tắt là res, nó cung cấp cho bạn một cách thức đơn giản để phản hồi các yêu cầu HTTP.

Dưới đây là một vài phương thức cơ bản của response object, mà thường hay được sử dụng.

res.send

res.send có lẽ là phương thức nổi tiếng nhất được sử dụng trên res. Với res.send () bạn có thể trả lời các yêu cầu HTTP với tất cả các loại dữ liệu:

app.get('/', (req, res) => {

res.send({ web: ['titoe', '.net', 'laptrinh'] }) //Tự động chuyển về dạng json

res.send('<h1>titoe</h1>') //Trả về html

res.send('normal text'') //Trả về text thông thường

});

res.json

Phương thức này sẽ phản hồi về dạng json

app.get('/', (req, res) => {

res.json({ web: ['titoe', '.net', 'laptrinh']}) //"{"web":["freetuts",".net","laptrinh"]}"

});

res.status

Chỉ định mã phản hồi HTTP, status thể hiện trạng thái của phàn hổi.

app.get('/', (req, res) => {
res.status(302)
});

Mỗi đầu mã sẽ thể hiện trạng thái phàn hồi khác nhau, dưới đây là các đầu mã và trạng thái của nó:

1xx : Thông tin
2xx: Thành công
3xx: Chuyển hướng
4xx: Lỗi ở clients
5xx: Lỗi ở server

res.redirect

Chuyển hướng khách hàng đến các route trong ứng dụng hoặc đến các trang web khác nhau:

res.redirect('/home')
res.redirect('https://titoe.net')

res.render

Phương thức này sẽ phàn hồi nội dung của HTML trong file chỉ định về clients, nếu kết hợp Express với các template engine như Pug, EJS,... thì phương thức này sẽ tự động biên dịch các template này sang HTML thông thường và phàn hồi cho clients.

app.get('/home', (req, res) => {

res.render('home.html', {name: 'nguyentri'});

});

Ngoài ra, còn có thể truyền tham số vào cho view bằng cách thêm vào một tham số là obejct chứa các giá trị muốn truyền đi.

res.end

Kết thúc phàn hồi đến clients

3. Xử lý form trong Express

A. Xử lý form trong Express

+ Thiết lập module cần thiết

Để bắt đầu với form trong Mongoose cần phải cài đặt thêm một vài module hỗ trợ trong Expresss như body-parser và multer. Đây là 2 middleware hỗ trợ parse form. Thông thường Express sẽ không tự đông parse form nên cần phải cài thêm 2 middleware này. Để cài đặt mở terminal và sử dụng npm để cài đặt :

npm i --save body-parser multer

Sau khi import body-parse và multer, sử dụng body-parser để parse json và x-www-form-urlencoded header request, và multer cho việc parse multipart/form-data. Tiếp theo sau để sử dụng cần khai báo middleware cho express sử dụng đoạn code sau :

var express = require('express');

var bodyParser = require('body-parser');

var multer = require('multer');

var upload = multer();

var app = express();

// parsing application/json

app.use(bodyParser.json());

// parsing application/xwww-

app.use(bodyParser.urlencoded({ extended: true }));

//form-urlencoded

// parsing multipart/form-data

app.use(upload.array());

app.listen(3000);

Xử lý form trong Express

Dữ liệu của form khi được parse qua middleware sẽ được lưu trữ ở thuộc tính body trong request object - req.body :

app.post('/', function(req, res){

console.log(req.body); //Data sẽ ở đây

res.send("recieved your request!");

});

B. Thực hành xử lý form trong Express

Cấu trúc thư mục

Sau khi cài đặt các module cần thiết, cấu trúc thư mục như sau:

form-titoe/
--- app.js
--- uploads/
--- view/
-------form.pug
-------info.pug

Cài đặt module cần thiết

Trong ví dụ này cần phải cài đặt 4 module hỗ trợ đó là express, multer, body-parser, pug. Đê cài đặt bạn truy cập thư mục form-freetuts và mở terminal gõ dòng lệnh để cài đặt :

npm i --save express multer body-parser pug

express nodejs form png

Xây dựng giao diện

Ở đây sử dụng template engine pug trong Express để đi xây dựng giao diện, và sử dụng css framework đó là bootstrap 4.

form.pug

Trong file form.pug xây dựng form dùng để submit

html

head

title Form - titoe.net

meta(http-equiv="Content-Type", content="text/html;charset=UTF-8")

link(href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", rel="stylesheet")

body

div.container

.card(style = "margin-top: 5%;")

h3.card-header Xử lý Form - titoe.net

.card-body

form(action="/", method="post", enctype="multipart/form-data")

.form-group

label(for="name") Họ và tên

input.form-control(type="text", name="name", placeholder="Nguyễn Văn Trí", required)

.form-group

label(for="age") Tuổi

input.form-control(type="number", name="age", placeholder="19", required)

.form-group

label(for="gender") Giới tính

select.form-control(name="gender", required)

option(value="Nam") Nam

option(value="Nữ") Nữ

.form-group

label(for="avatar") Ảnh đại diện

input.form-control(type="file", name="avatar", required)

button.btn.btn-block.btn-success(type="submit") Gửi

( xây dựng một form bao gồm các trường như name, age, gender, avatar,...)

info.html

File này sẽ dùng để hiển thị file nội dung form vừa nhập.

html

head

title Form - titoe.net

meta(http-equiv="Content-Type", content="text/html;charset=UTF-8")

link(href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", rel="stylesheet")

body

div.container

.card(style = "margin-top: 5%;")

h3.card-header Kết quả

.card-body

ul.list-group

li.list-group-item Họ tên: #{body.name}

li.list-group-item Tuổi: #{body.age}

li.list-group-item Giới tính #{body.gender}

li.list-group-item Avatar

img(src="/uploads/" + file.filename +"", alt=file.originalname)

Xử lý form

Ở file app.js chính là file xử lý , tạo file app.js có nội dung như sau:

const express = require("express");

const app = express();

const bodyParser = require("body-parser");

const multer = require("multer");

const storage = multer.diskStorage({

destination: (req, file, cb) => {

cb(null, __dirname + "/uploads"); //Đường dẫn upload ảnh

},

filename: (req, file, cb) => {

//File lúc này sẽ được lưu vào vùng nhớ tạm thời

cb(null, Date.now() +"_" + file.originalname);

}

});

const upload = multer({ storage: storage });

/*

- Bắt đầu khai báo middleware

*/

//Khaiai báo static folder

app.use(express.static('./uploads'));

//Khai báo đường dẫn đến thư mục chứa các template

app.set("views", "./views");

//Khai báo templateEngine sử dụng

app.set("view engine", "pug");

// parsing application/json

app.use(bodyParser.json());

// parsing application/xwww-

app.use(bodyParser.urlencoded({ extended: true }));

/*

- Kết thúc khai báo middleware

*/

//Khởi tạo router get

app.get("/", (req, res) => {

res.render("form");

});

//Khởi tạo router post

app.post("/", upload.single("avatar"), (req, res) => {

const { body, file } = req;

console.log(file)

res.render("info", { body, file });

});

app.listen(8080);

-> tiến hành khởi chạy bằng cách mở terminal và gõ dòng lệnh:

node app, kết quả như hình :

Sau khi submit form, router sẽ trả về nội dung của file info.pug.

4. Middleware trong Express

A. Middleware trong Express là gì ?

Middleware là một phần rất quan trọng trong Express nó giúp lọc và ngăn chặn các request xấu trong quá trình chạy của ứng dụng. Middleware là các hàm khác nhau được gọi bởi [Route Express] trước khi các yêu cầu (request) hoàn tất.

Các hàm middleware có thê thực thi ở đầu, giữa, hoặc cuối vòng đời của một request. Trong stack các middleware function luôn được thêm vào theo thứ tự mà ta mong muốn ngay ban đầu.

middleware trong express jpg

Middleware thường sử dụng để thực hiện các tác vụ như: parseJSON, parseCookie, kiểm tra đăng nhập, thậm chí còn được sử dụng để viết các module một cách nhanh chóng.

B. Middleware Function trong Expresss

Các middlware function là các hàm có quyền truy cập vào các đối tượng như request(req), respone(res), next() trong chu kì của ứng dụng. next() là một hàm trong Route Express, khi được gọi hàm next() sẽ thực thi các middleware tiếp theo. Các middle function có thể thực hiện các chức năng như:

Thay đổi các đối tượng như request(req), respone(res)
Kết thúc vòng đời của một request.
Gọi các middleware sau trong stack

Khởi tạo một middleware function

//middleware function

var myLogger = function(req, res, next) {

console.log("Middleware")

next()

}

//Khai bao su dung middleware

app.use(myLogger)

Khi khởi tạo middleware bằng cách này thì bất cứ các request nào được gửi đến sẽ phải thông qua middleware.

Ví dụ về sử dụng middleware function

Tạo 1 app nhỏ có chức năng kiểm tra đường dẫn và method của request gửi đến và dùng middleware để chặn request.

Tạo thư mục có tên middleware mở terminal và chạy dòng lệnh bên dưới để cài đặt express :

npm install --save express

Trong thư mục middleware tạo file có tên index.js có các phần sau :

Khai báo sử dụng express và khởi tạo app

const express = require('express')

const app = express()

Tạo middleware kiểm tra đường dẫn và method của request

//Middleware function kiểm tra request

var checkRequest = (req, res, next) => {

console.log('Middleware chạy ở route có url ' + req.url + ' và method là ' + req.method )

if (req.url === '/block') {

res.send('Bạn không có quyền truy cập !')

}else{

next()

}

//Khai báo sử dụng middleware

app.use(checkRequest)

//Khởi tạo route mới

TIếp theo khởi tạo các route để cho người dùng truy cập

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

res.send('Truy cập thành công !')

})

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

res.send('Truy cập thành công !')

})

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

res.send('Truy cập thành công !')

})

//Sử dụng port 3000

app.listen(3000)

Cuối cùng file index.js sẽ có nội dung đầy đủ như sau :

const express = require('express')

const app = express()

//Middleware function kiểm tra request

var checkRequest = (req, res, next) => {

console.log('Middleware chạy ở route có url ' + req.url + ' và method là ' + req.method )

if (req.url === '/block') {

res.send('Bạn không có quyền truy cập !')

}else{

next()

}

//Khai báo sử dụng middleware

app.use(checkRequest)

//Khởi tạo route mới

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

res.send('Truy cập thành công / !')

})

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

res.send('Truy cập thành công home!')

})

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

res.send('Truy cập thành công block !')

})

//Sử dụng port 3000

app.listen(3000)

Mở terminal và sử dụng dòng lệnh sau để chạy app

node index.js

Khi truy cập đường dẫn localhost:3000/block thì bạn sẽ nhận được thông báo "bạn không có quyền truy cập" mặc dù trong route bạn đã khai báo response về giá trị 'Truy cập thành công block !'. Lý do bởi khi middleware được chạy ở ở đầu vòng đời của request nên nó đã kiểm tra giá trị và response lại trước khi route response. Bạn có thể chạy và xem kết quả để hiểu rõ hơn nhé !

middleware trong nodejs png

C. Các loại middleware trong Express

Application-level middleware

Có thể khai báo middleware bằng cách thêm nó vào các hàm như app.use(), app.GET(), app.POST(), app.PUT(),..

Khi middleware được khai bái bằng app.use() như trong ví dụ trên tất cả các các request đều phải đi qua middleware function :

var app = express()

app.use(function (req, res, next) {

console.log('Receive all request')

next()

})

Khi middleware được khai báo bằng cách sử dụng các route thì nó chỉ các request trong route đó mới thông qua middleware function :

app.get('/user/:id', function (req, res, next) {

console.log('ID:', req.params.id)

next()

}, function (req, res, next) {

res.send('User Info')

})

Router-level middleware

Cũng có thể sử dụng middleware trong phạm vi Router, cách thức hoạt động giống như trong Application-level middleware nhưng nó phu thuộc vào biến express.Router()

var router = express.Router()

Ví dụ bên dưới thể hiện rất rõ điều đó :

var app = express()

var router = express.Router()

router.use(function (req, res, next) {

console.log('middleware run')

next()

})

router.get('/', function (req, res) {

res.send('hello, user!')

})

Error-handling middleware

Thay vì truyền 3 tham số vào hàm middleware như các ví dụ ở trên, nên bắt lỗi middleware bằng cách truyền vào nó 4 tham số, tham số đầu tiền sẽ là biến nhận kết quả lỗi của middleware.

app.use(function (err, req, res, next) {

console.error(err.stack)

res.status(500).send('Something broke!')

})

Third-party middleware

Cũng có thể sử dụng các middleware bên thứ 3 để có thể mở rộng dự án của mình một cách dễ dàng hơn, sử dụng công cụ npm để cài đặt và đưa nó vào trong dự án. Ví dụ sau mình sẽ cài 1 middleware hỗ trợ có tên là cookie-parser , nó cho phép làm việc với cookie dễ dàng hơn trong Express. Mở terminal và gõ dòng lênh sau :

npm install --save cookie-parse

Thêm middleware này vào trong dự án của bạn

var express = require('express')

var app = express()

var cookieParser = require('cookie-parser')

// load the cookie-parsing middleware

app.use(cookieParser())

5. Cookie trong Expresss

A. Cookie trong NodeJS là gì?

Cookie là những tập tin một trang web gửi đến máy người dùng và được lưu lại thông qua trình duyệt khi người dùng truy cập trang web đó. Cookie được dùng để lưu trữ với rất nhiều mục đích như lưu phiên đăng nhập, hoạt động của người dùng khi truy cập trang web.

Cookie có nhiều loại khác nhau và phân chia theo từng mục đích sử dụng. Dưới đây là một số loại cookie :

Session Cookie: chỉ tồn tại tạm thời trong bộ nhớ của trình duyệt và sẽ bị trình duyệt tự xóa khi người dùng hết phiên đăng nhập, thông thường loại cookie này không có thời hạn.
Third-party cookie : thông thường cookie của trang web sẽ trùng với thanh địa chỉ của trình duyệt nhưng có một vài trường hợp sử dụng cookie bên thứ 3 có tên miền khác với url trang web
Secure cookie: một loại cookie HTTP có bộ thuộc tính secure giới hạn phạm vi của cookie đối với trình duyệt web.

B. Làm việc với cookie bằng middleware cookie-parse

Để sử dụng cookie trong express cần phải cài thêm một vài middleware bên thứ 3 để hỗ trợ việc sử dụng cookie. Ở đây sử dụng middleware có tên cookie-parser, để cài đặt cookie-parser mở terminal lên và gõ dòng lệnh :

npm i --save cookie-parser

Thêm cookie-parser vào Express

Để có thể sử dụng cookie-parser cần thêm middleware này vào trong dự án express của mình bằng cách khai báo sử dụng middleware cookieParse() :

//Sử dụng express

const express = require('express')

//Sử dụng module cookie-parse

const cookieParser = require('cookie-parser')

//Khởi tạo app express mới

const app = express()

//Khai báo sử dụng middleware cookieParse()

app.use(cookieParser())

có thể truyền vào method này 2 tham số :

cookieParser(secret, options)

secret: Có thể truyền vào đây một chuỗi hoặc một mảng dùng để signed cookie. Đây là trường không bắt buộc, nếu được truyền vào một chuỗi thì sẽ lấy chuỗi đó để sign cookie, một mảng thì tạm thời nó sẽ dùng để unsign cookie theo thứ tự của mảng.
options: truyền vào một object dùng để thêm vào cookie.parse

Tạo cookie mới

Để tạo một cookie mới sử dụng cú pháp:

res.cookie(name, value, [options])

name: tên của cookie cần thêm vào (bắt buộc)
value: giá trị của cookie (bắt buộc)
options: các tùy chỉnh khác

tham số options là một objects có thể có các thuộc tính như :

Thuộc tính	Kiểu dữ liệu	Miêu tả
domain	string	Domain của cookie, thường sẽ là domain của app
encode	function	Hàm dùng để encode cookie, mặc định là `encodeURIComponent`
expires	date	Thời điểm và cookie hết hạn, nếu không có giá trị hoặc giá trị bằng 0, nó sẽ tạo ra session cookie
httpOnly	boolean	Đánh dấu cookie chỉ có thể truy cập ở máy chủ web
maxAge	number	Thời gian hết hạn của cookie so với thời điểm đặt cookie, tính bằng mili giây
path	string	path của cookie, mặc định là '/'
secure	boolean	Đánh dấu cookie chỉ có thể được sử dụng ở giao thức https
signed	boolean	Đánh dấu cookie nên được signed
sameSite	boolean hoặc string	Giá trị sameSite của thuộc tính Set-Cookie

Làm ví dụ về Cookie

Cùng tạo một ví dụ nhỏ về tạo cookie. Tạo file index.js có nội dung như sau:

var express = require('express');

var app = express();

var cookieParser = require('cookie-parser');

app.use(cookieParser())

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

res.cookie('name', 'titoe.net', { expires: new Date(Date.now() + 900000)});

res.send('success')

});

app.listen(3000)

mở terminal lên và chạy dòng lệnh:

node index

sau đó mở trình duyệt và truy cập địa chỉ localhost:3000/cookie, có thể xem cookie của trang web trên trìn duyệt bằng cách mở Dev Tools -> Application -> Cookies

Lấy giá trị của cookie

Có thể lấy giá trị của cookie bằng cách sử dụng cú pháp :

req.cookie.[name]

Khi sử dụng middleware cookie-parser bạn sẽ nhận thêm 1 object trong biến request đó là cookie.

Thêm một route vào file index.js trong ví dụ trước bằng cách sử dụng :

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

if (req.cookies.name)

res.send(`Cookie name co gia tri la ${req.cookies.name}`)

res.send('Khong the tim lay cookie co ten la name')

});

Route này có nhiệm vụ in ra giá trị của cookie name, lúc này file index.js có nội dung như sau :

var express = require('express');

var app = express();

var cookieParser = require('cookie-parser');

app.use(cookieParser())

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

res.cookie('name', 'titoe.net', { expires: new Date(Date.now() + 900000)});

res.send('coookie set')

});

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

if (req.cookies.name)

res.send(`Cookie name co gia tri la ${req.cookies.name}`)

res.send('Khong the tim lay cookie co ten la name')

});

app.listen(3000)

mở terminal và sử dụng lệnh

node index

Trên trình duyệt bạn gõ địa chỉ localhost:3000/getCookie để xem kết quả. Nếu cookie có tên 'name' đã được lưu trữ trên trình duyệt rồi thì nó sẽ hiện ra giá trị của cookie,

Cookie name co gia tri la titoe.net

ngược lại sẽ hiển thi :

Khong the tim lay cookie co ten la name

Xóa cookie hiện có

Để xóa cookie ta sẽ sử dụng phương thức clearCookie và truyền vào đó 2 tham số, tham số thứ nhất là tên cookie mà bạn muốn xóa, tham số thứ 2 là 1 object các tùy chỉnh.

res.clearCookie(cookieName, [options]);

Ví dụ như :

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

res.clearCookie('name');

res.send('Da xoa cookie')

});

C. Nói một chút về Session trong Express

Đi song song với khái niệm cookie phải đề cập đến session, nếu như bạn đã từng lập trình PHP rồi thì chắc hẳn bạn có biết qua về session trong PHP. Thực chất session dựa trên cookie để hoạt động. Sau đây mình có một sơ đồ thể hiện cách mà session được tạo ra.

session trong expressjs jpg

Trước tiên, chương trình sẽ kiểm tra cookie có tổn tại hay không ? Tiếp theo chương trình sẽ kiểm tra nếu cookie chưa tồn tại, nó sẽ tạo ra một cookie để chứa giá trị của sessionID đồng thời cũng lưu trữ giá trị sessionID này trong database.

6. Template Engine Pug trong Express

A. Template Engine là gì ?

Nếu như bạn đã quá chán mới việc gõ các thẻ html bằng cách thông thường, khó quản lí các phần với nhau thì Template Engine giúp bạn loại bỏ đi các công đoạn đó. Template Engine tạo ra các khuân mẫu, cho phép bạn sử dụng các tệp mẫu tĩnh trong ứng dụng của mình.

Trong thời gian chạy, Template Engline sẽ thay thế các biến trong tệp mẫu bằng các giá trị thực và chuyển đổi mẫu thành tệp HTML được gửi đến client. Sử dụng cách này sẽ giúp thiết kế trang HTML nhanh và tổ chức các component được nhanh hơn.

Có rất nhiều Template Engine phổ biến được sử dụng rất nhiều như:

Mustache
Embedded JS Templates
Jade templating
Pug
HandlebarsJS

Trong Express người ta thường sử dụng các Template Engine như: Pug, EJS, Jade,...Một trong các Template Engine khá và được sử dụng trong Express rất nhiều đó là Pug

B. Sử dụng Template Engine Pug trong Express

Pug là một template được sử dụng khá nhiều, chúng ta có thể thấy được Template Engine này cú cú pháp khá là gọn gàng và dễ hiểu giống như ngôn ngữ lập trình Python, ở đây mình có một ví dụ về Pug như sau:

doctype html

html(lang='en')

head

title Pug Pug Pug

body

h1 Title

div.container

p This is content

Sau khi được biên dịch về HTML thì sẽ có nội dung như sau :

<!DOCTYPE html>

<html lang="en">

<head>

<title>Pug Pug Pug</title>

</head>

<body>

<h1>Title</h1>

<div class="container">

<p>This is content</p>

</div>

</body>

</html>

Bằng việc sử dung Template Engine giúp cho các đoạn mã dễ dàng được triển khai và mở rộng hơn, các cú pháp cũng gọn gàng hơn. Dễ dàng quản lí các phần. Như ví dụ trên sử dụng Pug đương nhiên sẽ nhanh hơn triển khai bằng html thông thường.

Cài đặt Pug

Bạn cần phải cài đặt Pug vào dự án của bạn bằng cách mở terminal và gõ dòng lệnh :

npm install --save pug

Để sử dụng Template Engine trong Express bạn cần phải khai báo thêm cho Express một thuộc tính, chúng ta sẽ khai báo 2 thuộc tính sau trong file app.js của dự án :

//Khai báo đường dẫn đến thư mục chứa các template

app.set('views', './views')

//Khai báo templateEngine sử dụng

app.set('view engine', 'pug')

Ở đây mình khai báo đường dẫn đến thư mục chứa template là thư mục views và template engine sử dụng là pug. Bạn có thể chỉnh sửa theo từng loại template engine và thư mục chứa template. Lúc này Express sẽ tự động biên dịch các tập tin pug về HTML thông thường. Khi cần sử dụng bạn chỉ cần render và còn có thể truyền dữ liệu từ controller sang view như cách thông thường.

res.render('index', { title: 'Hey', message: 'Hello there!' })

Sử dụng Pug

Ở phần cài đặt Pug mình đã khai báo đường dẫn đến thư mục chứa template là views, lúc này mình sẽ tạo một thư mục có tên là views, trong thư mục này sẽ chứa các file có đuôi là .pug, mặc định phần mở rộng của các file sử dụng pug là .pug nha các bạn. Ví dụ mình sẽ tạo một file có tên index.pug

html  
    head
        title Using Pug 
    body
        header
            h1 This is content of h1
        section
            p This is content of p 
        footer
            This is content of footer

Trong file app.js của dự án sẽ như sau:

const express = require('express')

const app = express()

//Khai báo đường dẫn đến thư mục chứa các template

app.set('views', './views')

//Khai báo templateEngine sử dụng

app.set('view engine', 'pug')

app.get('/', (req, res) => {

res.render('index')

})

app.listen(8888)

Khởi chạy dự án express sẽ tự động render file index.pug trong thư mục views thành file HTML mà trả về cho clients

Khởi tạo class và ID vào các thẻ

Chúng ta có thể tạo các thẻ với các id và class bằng cách thêm dấu chấm (.) cho class và dấu thăng (#) cho id:

PUG

h1.welcome
p#content
span.note#note_1

HTML

<h1 class="welcome"></h1>
<p class="content"></p>
<span class="note" id="note_1"></span>

Thêm thuộc tính vào các thẻ

Các thuộc tính thẻ tương tự như HTML (các thuộc tính cách nhau bằng dấu phẩy), nhưng giá trị của chúng chỉ là JavaScript thông thường.

PUG

a(href='titoe.net') titoe
|
|
a(class='button' href='titoe.net') titoe
|
|
a(class='button', href='titoe.net', class="btn") titoe

HTML

<a href="titoe.net">titoe</a>
<a class="button" href="titoe.net">titoe</a>
<a class="button" href="titoe.net" class="btn">titoe</a>

Thuộc tính Style

Thuộc tính style có thể là một chuỗi, giống như bất kỳ thuộc tính bình thường nào; nhưng nó cũng có thể là một object

PUG

//Giá trị của thuộc tính style là một object
a(style={color: 'red', background: 'green'})

//Giá trị của thuộc tính style là một chuỗi
a(style="color: red; background: "green")

HTML

<a style="color:red;background:green;"></a>
<a style="color:red;background:green;"></a>

Biến trong Pug

Pug cho phép bạn khai báo và sử dụng các biến, để khai báo các biến bạn thêm kí tự ngạch ngang ( - ) và khởi tao các biến như trong javascript. Để lấy giá trị của biến ta thêm dấu bằng ( = ) trước.

PUG

- var titoe= 'Learn Nodejs'
h1=titoe

HTML

<h1>Learn Nodejs</h1>

Biểu thức điều kiện và switch case

Chúng ta có thể sử dụng các biểu thức điều kiện if else trong PUG. Trong file .pug ta có nội dung như sau :

- var isLogin = true

if isLogin

h1(style={color: 'green'}) Welcome to titoe

else

h1(style={color: 'red'}) Login please !!!

HTML

<h1 style="color:red;">Login please</h1>

Ngài ra Pug còn hỗ trợ chúng ta làm việc với swith case

- var girlFriends = 3
case girlFriends
  when 0
    p you have no girlfriends
  when 1
    p you have a girlfriends
  default
    p Ohh !!! you have #{friends} girlfriends

HTML

<p>Ohh !!! you have 3 girlfriends</p>

Comment trong Pug

Pug cung cấp cho chúng ta cú pháp để comment code. Để hiện thị comment trên code html đã render tra sử dụng 2 dấu gạch chéo ( // )

// titoe.net - pug 
p foo
p bar

<!-- titoe.net - pug-->
<p>foo</p>
<p>bar</p>

Nếu bạn chỉ muốn comment trong file pug mà ko muốn pug render ra html sử dụng dấu gạch chéo và dấu gạch ngang kết hợp với nhau ( //- )

//- titoe.net - pug 
p foo
p bar

<p>foo</p>
<p>bar</p>

Template Inheritance

Pug hỗ trợ việc mở rộng các đoạn mã bằng cách thừa kế, Template Inheritance hoạt động dựa vào 2 từ khóa block và extends, chức năng này cho phép bạn mở rộng các phần của dự án. Đơn giản phư phân chia bố cục layout. Sau đây mình sẽ dùng Template Inheritance để tạo một bố cục đơn giản. Chúng ta có thể dùng từ khóa append để thêm giá trị vào block.

File layout.pug chứa các block của chứa các phần để chia bố cục

html
  head
    title titoe.net
  body
    block header
    block body
    block footer
      #footer
        p some footer content

File index.pug để thay thế, ghi đè, thêm giá trị các block trong layout.pug

//- page-a.pug
extends layout.pug
block header 
    h1 Header
block body
    h1 body 
block append footer 
    p Them gia tri vao block footer

Lúc này khi file index.pug được render ra HTML như sau:

<html>
<head>
    <title>titoe.net</title>
</head>
<body>
    <h1>Header</h1>
    <h1>body </h1>
    <h1 id="footer">Footer</h1>
    <p>Them gia tri vao block footer </p>
</body>
</html>

Mixins

Mixins cho phép bạn tạo các khối Pug có thể tái sử dụng, đây là một tính năng khá hay giúp bạn có thể dùng lại các đoạn mã giống nhau nhiều lần. Nó giống như function trong ngôn ngữ lập trình, bạn có thể thêm các tham số vào nó bằng cách để các tham số trong dấu ngoặc tròn (

mixin list(first, second, third)
  ul
    li=first
    li=second
    li=third
+list('ti', 'toe', '.net')
+list('lap trinh', 'nodejs', '.tai titoe.net')

HTML

<ul>
  <li>ti</li>
  <li>toe</li>
  <li>net</li>
</ul>
<ul>
  <li>lap trinh</li>
  <li>nodejs</li>
  <li>tai titoe.net</li>
</ul>

Về bài trước...

Bài tiếp theo...

Tài liệu lập trình NodeJS

	STT. Số tiền = Số vcoin
	1. 5000 = 5vc
	2. 10000 = 10vc
	3. 20000 = 20vc
	4. 50000 = 50vc

Cờ caro	Butterfly	Lật hình (luyện trí nhớ)
Cờ tướng ONLINE	Xếp hình	Ghép hình
15_PUZZLE	Kill ghosts	Banchim
Planet Defense	Tower game	Bắn bóng
Plapy Bird (NH.Đông)	Vượt chướng ngại vật	Vẽ hình cứu người
Game Phases	Game vui chơi có thưởng	Game bắn cá

Express Framework trong Node.js

Mục lục:

A. Chuẩn bị code cho ứng dụng gửi mail NodeJS

B. Xây dựng ứng dụng gửi mail trong Nodejs

A. Request Object trong Express là gì ?

B. Response Object trong NodeJS

A. Xử lý form trong Express

+ Thiết lập module cần thiết

B. Thực hành xử lý form trong Express

Cấu trúc thư mục

Cài đặt module cần thiết

Xây dựng giao diện

info.html

Xử lý form

A. Middleware trong Express là gì ?

B. Middleware Function trong Expresss

C. Các loại middleware trong Express

A. Cookie trong NodeJS là gì?

B. Làm việc với cookie bằng middleware cookie-parse

A. Template Engine là gì ?

B. Sử dụng Template Engine Pug trong Express

Khởi tạo class và ID vào các thẻ

Thêm thuộc tính vào các thẻ

Thuộc tính Style

Comment trong Pug

Template Inheritance

Mixins

Bài viết trong cùng chuyên mục

Góc games giải trí (chơi trực tiếp trên web) Đăng nhập (chơi có thưởng) Danh mục đổi Vcoin STT. Số tiền = Số vcoin 1. 5000 = 5vc 2. 10000 = 10vc 3. 20000 = 20vc 4. 50000 = 50vc Exit

Góc games giải trí (chơi trực tiếp trên web) Đăng nhập (chơi có thưởng)

Danh mục đổi Vcoin

STT. Số tiền = Số vcoin

1. 5000 = 5vc

2. 10000 = 10vc

3. 20000 = 20vc

4. 50000 = 50vc