EXPRESS FRAMEWORK

A - LÝ THUYẾ T

I. GIỚ I THIỆ U VỀ FRAMEWORK EXPRESS

1. Framework Express

Express là một framework giúp tạo một ứng dụng web nhanh, đơn giản cho NodeJS.

2. Cài đặt và sử dụng

a. Cài đặt

Express đượ c cà i đặ t thô ng qua trình quả n lý package củ a NodeJS là NPM. Vì thế để cà i
đặ t express chú ng ta thự c thi command sau.

Code:

npm install express

b. Sử dụng

Code:

const express = require("express");

3. Khởi tạo server HTTP bằng Express

Tạ o file app.js vớ i nộ i dung sau

Code:

const express = require("express");

const app = express();

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

res.send("<h1>Welcome NodeJS !</h1>");
});

app.listen(port = 3000, (req, res)=>{

console.log(`Server running on port ${port}`);
 });

Trong đó:
 express: module Express đã đượ c cài đặ t trướ c đó để phụ c vụ cho việc xâ y dự ng các ứ ng
dụ ng web.
 app: đố i tượ ng đượ c khở i tạ o từ express, đố i tượ ng nà y đượ c hỗ trợ rấ t nhiều các thuộ c
tính và phương thứ c giú p chú ng ta xử lý cá c cô ng việc trong quá trình xâ y dự ng các tính
nă ng củ a ứ ng dụ ng web.
 listen: phương thứ c lắ ng nghe cá c kết nố i từ Client gử i lên Server
 req: tham số nà y lưu trữ đố i tượ ng Request, đâ y là đố i tượ ng lưu trữ cá c thuộ c tính và
phương thứ c để xử lý các thô ng tin trong quá trình Client gử i yêu cầu lên Server
 res: tham số nà y lưu trữ đố i tượ ng Response, đâ y là đố i tượ ng lưu trữ cá c thuộ c tính và
phương thứ c để xử lý các thô ng tin trong quá trình Server phả n hồ i lạ i Client
 get: phương thứ c truyền dữ liệu
 send: phương thứ c sử dụ ng để Server trả dữ liệu về cho Client đượ c cache dướ i dạ ng
HTML

Kết quả:

Truy cậ p trình duyệt vớ i địa chỉ: http://localhost:3000

II. ROUTE TRONG EXPRESS

1. Router là gì ?

Router xác định cách thức ứng dụng xử lý các yêu cầu của client tới một điểm cuối cụ thể.

2. Đăng ký một router trong express

Cú pháp:

app.<METHOD>(<PATH>, <HANDLE>)

Trong đó:
 app: là mộ t phiên bả n đượ c khở i tạ o từ module express.
 METHOD: là tên các phương thứ c dù ng để gử i dữ liệu về server củ a giao thứ c http. (GET,
POST, PUT hoặ c DELETE).
 PATH: là mộ t chuỗ i dù ng để so khớ p vớ i từ ng phâ n đoạ n trên URL đượ c yêu cầu từ
ngườ i dù ng.
 HANDLE: là mộ t hàm dù ng để xử lý router khi khớ p vớ i yêu cầ u củ a ngườ i dù ng.

Chú ý:
 Mỗ i router có thể có mộ t hoặc nhiều hàm xử lý.
Code:

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

res.send("<h1>Welcome NodeJS !</h1>");
});
app.get("/search", (req, res)=>{
res.send(
`
<form method="post">
<input type="text"/>
<input type="submit" name="sbm" value="Search"/>
</form>
`
);
});
app.post("/search", (req, res)=>{
res.send(
`
<form method="post">
<input type="text"/>
<input type="submit" name="sbm" value="Search"/>
</form>
`
);
});

3. Truyền và nhận tham số qua Router (Router parameters)

Tham số router là các phân đoạn URL được đặt tên sử dụng để bắt các giá trị chỉ định tại
vị trí của chúng trong URL.

Cú pháp

:<param_name>

Trong đó
 ( : ) : Cho biết rằ ng router nà y sẽ có mộ t giá trị thay đổ i tù y theo yêu cầ u mà ngườ i dù ng
gử i lên
 param_name: tên củ a param, tên nà y sẽ đượ c express lưu lạ i và đưa và đố i tượ ng
req.params

Code:
 // http://localhost:3000/users/10/products/200

app.get("/users/:id/products/:productId", (req, res)=>{

console.log(req.params);
});

Chú ý:
 1 router path chú ng ta có thể đă ng ký nhiều params khác nhau

5. express.Router
express.Router là một lớp được sử dụng để tạo các trình xử lý router và có thể gắn với
ứng dụng (app). Nó là một hệ thống router và middleware hoàn chỉnh, vì lý do này nó thường
được gọi là mini-app.

Code:

const express = require("express");

const router = express.Router();

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

res.send("<h1>Welcome NodeJS !</h1>");
});

app.use(router);

III. SERVER STATIC FILE

Trong phần này chúng ta sẽ học cách để cung cấp các tài nguyên tĩnh như image, css,
javascript hoặc các tập tin tĩnh khác ở trong express.

1. Cung cấp tài nguyên tĩnh trong express bằng express.static()

Express cung cấp sẵ n cho chú ng ta mộ t middleware express.static() giú p cho việc cung
cấ p cá c tà i nguyên tĩnh cho ngườ i dù ng hoặc cho ứ ng dụ ng củ a mình. Bằ ng cá ch dù ng đơn giả n
là chỉ định thư mụ c bạ n đã lưu trữ các tà i nguyên tĩnh củ a mình.

Cú pháp:
 app.use(<ROOT_PATH>, express.static(<ROOT>, [<OPTIONS>]));

Trong đó:
 ROOT: tham số chỉ định thư mụ c gố c lưu trữ cá c tài nguyên tĩnh.
 ROOT_PATH: đườ ng dẫ n gố c đượ c sử dụ ng để truy cậ p và o tậ p tin tĩnh. (mặ c định /)
 OPTIONS: các options đượ c sử dụ ng cho middleware, tham khả o tạ i Đâ y

2. Ví dụ đơn giản về sử dụng phương thức tĩnh Static

Bước 1: Tạ o 1 thư mụ c vớ i tên "public" để lưu trữ các tà i nguyên tĩnh trên server.

Bước 2: Tạ o file style.css trong thư mụ c public vớ i nộ i dung sau.

Code:

body{
background: yellow;
}

Bước 3: cập nhậ t code file app.js (ngang hà ng vớ i thư mụ c public)

Code:

// http://localhost:3000/static/style.css

app.use("/static", express.static(__dirname+"/public"));

Trong đó:
 __dirname: là mộ t biến toà n cụ c, cho phép lấ y ra đườ ng dẫ n tớ i thư mụ c hiện tạ i củ a file

Kết quả:

B – THỰ C HÀ NH
I – THỰ C HÀ NH XÂ Y DỰ NG DỰ Á N TRÊ N LỚ P
1. Xây dựng file điều hướng chính
Tạ o file app.js, đâ y đượ c coi là file điều hướ ng cá c xử lý chính trong ứ ng dụ ng nodejs

2. Xây dựng hệ thống Router cho Backend của dự án

Xâ y dự ng hệ thố ng Router cho Backend theo cấ u trú c sau

/admin/login
/admin/logout
/admin/dashboard

/admin/products
/admin/products/create
/admin/products/edit/:id
/admin/products/delete/:id

3. Xây dựng hệ thống Router riêng

Bó c cấ u trú c Router đã hoà n thiện ở trên thà nh file Router riêng web.js

4. Xây dựng file Server

Bó c con Server đượ c tạ o bở i module Express thà nh file Server riêng www.js, đồ ng thờ i
đâ y chính là file chạ y chính (config lạ i file chạ y chính trong default.json)

II – CÔ NG VIỆ C VỀ NHÀ
1. Hoàn thiện cấu trúc Router cho Backend
Bổ sung thêm cá c Router cho User và Category

/admin/users
/admin/users/create
/admin/users/edit/:id
/admin/users/delete/:id

/admin/categories
/admin/categories/create
/admin/categories/edit/:id
/admin/categories/delete/:id