Đồ án tìm hiểu reactjs express framework

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THƠNG TIN KHOA CƠNG
NGHỆ PHẦN MỀM

ĐỒ ÁN 1

TÌM HIỂU REACTJS -EXPRESS
FRAMEWORK
Giảng viên hướng dẫn : ThS. Nguyễn Công Hoan

Sinh viên thực hiện 1 : Lê Quang Trung
Mã sinh viên 1 : 20520333
Sinh viên thực hiện 2 : Hà Phi Hùng
Mã sinh viên 2 : 20520526

Tp HCM, tháng 7 năm 2023

1


ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI:
Tìm hiểu ReactJS – Express Framework
Tên đề tài tiếng Anh:
Learn ReactJS – Express Framework
Cán bộ hướng dẫn: ThS. Nguyễn Công Hoan
Thời gian thực hiện: Từ ngày 18/03/2023 đến tháng 05/07/2023
Sinh viên thực hiện:
Lê Quang Trung- 20520333

Hà Phi Hùng – 20520526

2


Nội dung đề tài:
1. Giới thiệu:
Javascript là một ngôn ngữ lập trình được sử dụng rộng rãi hiện nay,
dễ đọc và được hỗ trợ ở mọi nơi. Mà Expressjs lại hỗ trợ Javascript, do đó
nếu bạn đã biết đến Javascript thì chắc chắn việc lập trình bằng Express.js
là vơ cùng đơn giản. Ngay cả những người mới bắt đầu tham gia vào lĩnh
vực phát triển web này cũng có thể sử dụng Expressjs.
Javascript là ngơn ngữ lập trình dễ học với cả những người khơng có
bất kỳ kiến thức gì về ngơn ngữ lập trình khác. Chính vì tính phổ biến, dễ
học và dễ sử dụng này mà Express.js cho phép các tài năng trẻ tham gia và
đạt được nhiều thành công trong phát triển ứng dụng web.
Thông qua đề tài này, nhóm sẽ xây dựng website review phim.
Website review phim sẽ giúp người dùng xem được các lời
đánh giá và điểm số của một bộ phim từ cả khán giả và nhà phê bình chuyên
nghiệp nhằm chọn ra những bộ phim ưng ý nhất khi mua vé. Ngoài ra, website
cịn giúp người dùng chia sẻ đánh giá của chính mình cũng như lưu lại danh
sách các phim đã xem.
Website review phim được xây dựng bằng React, Express,
cùng với một vài thư viện hỗ trợ khác.

2. Mục tiêu:
- Xây dựng được website review phim với số lượng phim phong phú,
giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các
chức năng cần thiết của một website review phim.
3. Phạm vi:

2


• Phạm vi môi trường:
o Triển khai sản phẩm đề tài trên mơi trường web.
• Phạm vi chức năng:
o Quản lý thông tin phim
o Quản lý tài khoản người dùng
o Quản lý thơng tin review
o Tìm kiếm phim theo nhu cầu
o Phân loại phim theo thể loại, hay top phổ biến, ...
o Chia sẻ đánh giá và điểm số ưng ý của bản thân về bộ phim
o Tính tốn thống kê điểm số trung bình và tổng số đánh giá của
bộ phim
o Lưu trữ các phim đã xem của bản thân
4. Đối tượng:
- Người dùng có loại tài khoản bình thường.
- Người dùng có loại tài khoản chuyên gia.

3


5. Phương pháp thực hiện:
- Tìm hiểu về ReactJS, ExpressJs.
- Khảo sát các website review phim có trên thị trường, từ đó tiến
hành phân tích, xác định các u cầu, tính năng cụ thể cho đề tài.
- Phân tích và thiết kế hệ thống website.
- Tìm hiểu quy trình thiết kế UX/UI và tiến hành thiết kế giao diện
cho website.

- Xây dựng website cho từng loại người dùng.
- Tiến hành triển khai và kiểm thử.
6. Cơng nghệ:
•

React và Next.js

•

Express.js

•

PostgreSQL với Prisma ORM

•

Firebase Authentication

•

Docker

•

AWS Lightsail, S3

7. Kết quả mong đợi
- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản
phẩm đề tài.

- Hiểu rõ các nghiệp vụ, chức năng của một website review phim.
- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ
thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển
khai dự án phần mềm để xây dựng website review phim.
- Xây dựng được website review phim đáp ứng được các yêu

4


cầu về giao diện và chức năng đã đề ra.
- Có thể thay đổi giao diện một cách linh động và mở rộng thêm
các chức năng mới cho website review phim để phù hợp với nhu cầu thực tiễn
trong tương lai.

5


Kế hoạch thực hiện:
Thời gian
18/03/2023 – 28/03/2023

Nội dung
Tìm hiểu đề tài, đánh giá thị trường, xác định các
chức năng của hệ thống.

28/03/2023 – 24/04/2023

Tìm hiểu, nghiên cứu cơng nghệ.

25/04/2023 – 15/05/2023

Phân tích và thiết kế hệ thống website.

16/05/2022 – 31/05/2023

Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao
diện cho website

01/06/2023 – 22/06/2023

Cài đặt phần back-end, xử lý của hệ thống.

23/06/2023 – 05/07/2023

Kiểm thử hệ thống và hoàn thiện báo cáo.

Xác nhận của GVHD
(Ký tên và ghi rõ họ tên)
ThS. Nguyễn Công Hoang

TP. HCM, ngày 5 tháng 07 năm 2023
Sinh viên

Sinh viên

(Ký tên và ghi rõ họ tên) (Ký tên và ghi rõ họ tên)

Lê Quang Trung

Hà Phi Hùng

6


LỜI CẢM ƠN

Đầu tiên, nhóm thực hiện đề tài “Xây dựng website review phim” xin gửi lời
cảm ơn đến quý thầy cô đã đang giảng dạy chúng em ở ngôi trường Đại học Công
nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh những kiến thức nền tảng
vững chắc để nhóm có thể tự tìm hiểu và hoàn thiện đề tài này một cách tốt nhất.
Đặc biệt, chúng em xin gửi lời cảm ơn tới cô Nguyễn Cơng Hoan vì sự tận
tình hướng dẫn cũng như những góp ý, đề xuất q báu của cơ dành cho nhóm trong
q trình thực hiện đồ án.
Trong suốt thời gian qua, nhóm đã tự tìm hiểu các cơng nghệ mới và kết hợp
với những kiến thức nền tảng trong quá trình học tập, nghiên cứu và vận dụng để
thực hiện đề tài này. Với quỹ thời gian có hạn cũng như kinh nghiệm xây dựng sản
phẩm còn thiếu, sản phẩm đồ án cuối cùng có thể sẽ mắc phải một số sai sót và
chúng em rất mong sẽ nhận được những góp ý của cơ để bổ sung, cải tiến sản phẩm
cũng như nâng cao kiến thức để xây dựng các sản phẩm tiếp theo sẽ chỉn chu và
hoàn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm quý giá để đáp ứng
tốt cho những công việc thực tế trong tương lai.
Một lần nữa, xin cảm ơn cô vì đã đồng hành cùng chúng em trong suốt học kỳ
II của năm học này.

Sinh viên thực hiện

Lê Quang Trung – Hà Phi Hùng


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
........................................................................................................................................
Tp.HCM, ngày … tháng 7 năm 2023
GVHD

ThS. Nguyễn Công Hoan


MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI ....................................................................................... 7
1.1.Tênđềtài............................................................................................................................................................7
1.2.Môtảđềtài........................................................................................................................................................7
1.3Lýdochọnđềtài...............................................................................................................................................7

1.4.Khảosáthiệntrạng.........................................................................................................................................8
1.5.Côngnghệsửdụng..........................................................................................................................................8
1.6.Môitrườngthiếtkế........................................................................................................................................8
1.7.Côngcụhỗtrợ...................................................................................................................................................8

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT ........................................................................................ 9
2.1.TổngquanvềReactJS:....................................................................................................................................9
2.1.1.GiớithiệuvềReactJS:......................................................................................................................................................9
2.1.2.KháiniệmcơbảntrongReactJS:................................................................................................................................9
2.1.3.Ưuđiểm,nhượcđiểm:..................................................................................................................................................15
2.2TổngquanvềExpress.js..............................................................................................................................15
2.2.1Giớithiệu.............................................................................................................................................................................15
2.2.2Cáckháiniệmcơbảnvàcáchthứchoạtđộng....................................................................................................16
2.2.3Ưuđiểm,nhượcđiểm....................................................................................................................................................18

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................................. 19
3.1.SơđồUse-case:..............................................................................................................................................19
3.1.1.Đăngnhập:.........................................................................................................................................................................19
3.1.2.Đăngxuất:..........................................................................................................................................................................21
3.1.3.Đăngkýthànhviên:.......................................................................................................................................................23
3.1.4.Tạoreview:........................................................................................................................................................................24
3.1.5.Hiểnthịthơngtinphim:...............................................................................................................................................25
3.1.7.Tìmkiếm,lọc:...................................................................................................................................................................27

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN................................................................................... 28
4.1.Trangđăngnhập,đăngký:........................................................................................................................28
4.1.1.Giaodiện:............................................................................................................................................................................28
4.1.2.Môtả:....................................................................................................................................................................................29
4.2.Trangchủ:.......................................................................................................................................................29
4.2.1.Giaodiện:............................................................................................................................................................................29

4.2.2.Môtả:....................................................................................................................................................................................30


4.3.Trangthơngtinphim:.................................................................................................................................31
4.3.1.Giaodiện:............................................................................................................................................................................31
4.3.2.Mơtả:....................................................................................................................................................................................32
4.4.Trangdanhsáchphim:...............................................................................................................................32
4.4.1.Giaodiện:............................................................................................................................................................................32
4.4.2.Mơtả:....................................................................................................................................................................................33
4.5.Trangthơngtinreview:..............................................................................................................................33
4.5.1.Giaodiện:............................................................................................................................................................................33
4.5.2.Mơtả:....................................................................................................................................................................................33
4.6.Trangdanhsáchngườidùng:..................................................................................................................34
4.6.1.Giaodiện:............................................................................................................................................................................34
4.6.2.Mơtả:....................................................................................................................................................................................34
4.7.Trangthơngtinngườidùng:....................................................................................................................35
4.7.1.Giaodiện:............................................................................................................................................................................35
4.7.2.Mơtả:....................................................................................................................................................................................35
4.8.Trangthơngtincánhân:............................................................................................................................36
4.8.1.Giaodiện:............................................................................................................................................................................36
4.8.2.Mơtả:....................................................................................................................................................................................36

CHƯƠNG 5: KẾT LUẬN .................................................................................................. 37
5.1.Nhậnxét:..........................................................................................................................................................37
5.1.1.Thuậnlợi:...........................................................................................................................................................................37
5.1.2.Khókhăn:............................................................................................................................................................................37
5.1.3.Ưuđiểmcủađồán:........................................................................................................................................................37
5.1.4.Nhượcđiểmcủađồán:.................................................................................................................................................38
5.2.Hướngpháttriểncủađồán:.....................................................................................................................38

TÀI LIỆU THAM KHẢO ..................................................................................................... 39


MỤC LỤC HÌNH ẢNH
HÌNH 2.1: VIẾT MỘT COMPONENT DÙNG JSX. ....................................................... 10
HÌNH 2.2: DOM ẢO VÀ DOM THẬT .............................................................................. 11
HÌNH 2.3: FUNCTIONAL COMPONENT CHO MỘT NÚT BẤM.............................. 12
HÌNH 2.4: KHAI BÁO VÀ SỬ DỤNG PROPS COUNT VÀ ONCLICK Ở
FUNCTIONAL COMPONENT ......................................................................................... 12
HÌNH 2.5: MƠ HÌNH UNIDIRECTIONAL DATA FLOW. .......................................... 14
HÌNH 2.6: KHAI BÁO VÀ SỬ DỤNG MỘT MIDDLEWARE TRẢ VỀ CHỮ HELLO
WORLD Ở ROUTE GET / ................................................................................................. 16
HÌNH 2.7: REQUEST ĐƯỢC XỬ LÝ Ở MIDDLEWARE MYLOGGER TRƯỚC
KHI CHUYỂN TỚI MIDDLEWARE Ở ROUTE GET / ................................................ 17
HÌNH 2.8: TẠO VÀ DÙNG ROUTER .............................................................................. 18
HÌNH 3.1: SƠ ĐỒ USE-CASE TỔNG QUÁT .................................................................. 19
HÌNH 3.2: SƠ ĐỒ USE-CASE ĐĂNG NHẬP. ................................................................. 20
HÌNH 3.3: SƠ ĐỒ USE-CASE ĐĂNG XUẤT. ................................................................. 21
HÌNH 3.4: SƠ ĐỒ USE-CASE ĐĂNG KÝ THÀNH VIÊN. ............................................ 23
HÌNH 3.5: SƠ ĐỒ USE-CASE TẠO REVIEW. ............................................................... 24


HÌNH 3.6: SƠ ĐỒ USE-CASE HIỂN THỊ THƠNG TIN PHIM. ................................... 26
HÌNH 3.7: SƠ ĐỒ USE-CASE TÌM KIẾM, LỌC. .......................................................... 27
HÌNH 4.1: GIAO DIỆN ĐĂNG NHẬP.............................................................................. 29
HÌNH 4.2: GIAO DIỆN ĐĂNG KÝ ................................................................................... 29
HÌNH 4.3. GIAO DIỆN TRANG CHỦ. ............................................................................. 30
HÌNH 4.4: GIAO DIỆN TRANG THƠNG TIN CHI TIẾT PHIM. ............................... 31
HÌNH 4.5. GIAO DIỆN TRANG THƠNG TIN CHI TIẾT PHIM................................. 32
HÌNH 4.6: GIAO DIỆN TRANG DANH SÁCH PHIM. ................................................. 33

HÌNH 4.7: GIAO DIỆN THƠNG TIN REVIEW. ............................................................ 33


DANH MỤC BẢNG
BẢNG 3.1: ĐẶC TẢ ĐĂNG NHẬP: .................................................................................. 20
BẢNG 3.2: ĐẶC TẢ ĐĂNG XUẤT: .................................................................................. 21
BẢNG 3.3: ĐẶC TẢ ĐĂNG KÝ THÀNH VIÊN: ............................................................ 23
BẢNG 3.4: ĐẶC TẢ TẠO REVIEW:................................................................................ 24
BẢNG 3.5: ĐẶC TẢ HIỂN THỊ THÔNG TIN PHIM: ................................................... 26
BẢNG 3.6: ĐẶC TẢ TÌM KIẾM, LỌC ............................................................................ 27


Chương 1: GIỚI THIỆU ĐỀ TÀI
1.1. Tên đề tài
XÂY DỰNG WEBSITE REVIEW PHIM
1.2. Mô tả đề tài
Ngày nay, xem phim là một nhu cầu giải trí rất lớn của người dân. Một
bộ phim có thể giúp ta thư giãn sau một thời gian làm việc vất vả. Phim là ngành
công nghiệp rất nhiều tiền nên có rất nhiều bộ phim được sản xuất hàng năm ở
nhiều mức chất lượng khác nhau. Nhiều người có nhu cầu chọn lọc các bộ phim
thật sự hay và đáng tiền để xem.
Website review phim Cinerate sẽ giúp người dùng xem được các lời
đánh giá và điểm số của một bộ phim từ cả khán giả và nhà phê bình chuyên
nghiệp nhằm chọn ra những bộ phim ưng ý nhất khi mua vé. Ngoài ra, website
cịn giúp người dùng chia sẻ đánh giá của chính mình cũng như lưu lại danh sách
các phim đã xem.
Website review phim được xây dựng bằng React, Express, cùng với một
vài thư viện hỗ trợ khác.

1.3 Lý do chọn đề tài

Hiện nay, việc sử dụng các trang web đánh giá review phim là một việc
vô cùng phổ biến của người dùng online. Với sự phát triển của công nghệ, hệ
thống đánh giá review ngày càng chính xác và khiến cho xu hướng coi các bài
đánh giá, điểm số trên các trang web review phim trước khi ra phòng vé đặc
biệt tăng cao ở mọi lứa tuổi .
Do đó, Chúng em quyết định chọn đề tài “Xây dựng website review
phim” bởi vì tính ứng dụng cao, nhu cầu thực tế lớn và chúng em cũng thử
thách bản thân bằng những loại đề tài mới hơn so với những đề tài chúng em đã

7


làm để có thể tăng sự hiểu biết của bản thân ở nhiều mặt hơn.
1.4. Khảo sát hiện trạng
Hiện nay, thị trường đã có rất nhiều website review phim nổi tiếng được
mọi người biết đến như letterboxd, IMDb, Rotten Tomatoes… Với giao diện
bắt mắt, dễ sử dụng, cùng với số lượng phim khổng lồ, chúng nhanh chóng trở
thành những website review phim hàng đầu. Các chức năng của những website
này đều tập trung vào thống kê, tổng hợp thông tin của bộ phim để giúp người
dùng xác định được có nên bộ phim hay không.
Chúng em cũng sẽ xây dựng một website review phim với những tính
năng tóm tắt thơng tin bộ phim và tổng hợp các đánh giá, điểm số của các
chuyên gia, người dùng khác để cung cấp trải nghiệm dễ sử dụng và tiện dụng
cho người dùng.
1.5. Cơng nghệ sử dụng
•

React và Next.js

•

Express.js

•

PostgreSQL với Prisma ORM

•

Firebase Authentication

•

Docker

•

AWS Lightsail, S3

1.6. Mơi trường thiết kế
• Visual Studio Code.
1.7. Cơng cụ hỗ trợ
•

Figma

•

StarUML

•

Google Chrome

8


Chương 2: CƠ SỞ LÝ THUYẾT
2.1. Tổng quan về ReactJS:
2.1.1. Giới thiệu về ReactJS:
React là một thư viện JavaScript front-end miễn phí và mã nguồn
mở nhằm giúp ta xây dựng UI theo hướng dễ tái sử dụng bằng component
(thành phần). React được phát triển bởi Meta và cộng đồng các nhà phát triển
và cơng ty bên ngồi từ năm 2013.
React có thể được dùng để xây dựng ứng dụng single-page, mobile,
hay kết hợp rendering trên server qua các framework như Next.js. React hiếm
khi được dùng đơn lẻ. Nó hay được dùng với các thư viện và framework hỗ
trợ khác. Hiện React là một trong các thư viện front-end phổ biến nhất thế giới
cho web. Các ứng dụng lớn như Facebook, Discord, Reddit,…
2.1.2. Khái niệm cơ bản trong ReactJS:
2.1.2.1. Component và Virtual DOM:
Ta xây dựng UI trong React bằng cách tạo ra và sử dụng các
component. Mỗi component sẽ chứa code HTML và các code logic liên quan
cho một thành phần nào đó của UI. Một component cũng chứa được các
component khác. Ta lồng ghép các component lại để xây dựng nên một UI
phức tạp. Code React được viết bằng ngôn ngữ JSX để ta dễ dàng viết
JavaScript, HTML, và component ở cùng một file. Với JSX, ta có thể dùng
các biến và hàm ngay trong code HTML.

9

Hình 2.1: Viết một component dùng JSX.

Khi chạy ứng dụng, React sẽ xây dựng một mơ hình DOM ảo
(Virtual DOM) từ các component ta có. React sau đó sẽ chuyển DOM ảo
thành DOM thật cho trình duyệt render. Khi có thay đổi trong UI (Vd: cập
nhật giá trị), React sẽ tính tốn các thay đổi giữa DOM ảo và DOM thật để chỉ
cập nhật phần UI bị thay đổi mà khơng cần cập nhật lại cả trang. Ngồi ra,
việc một component được render lần đầu vào DOM thật khi ta cần xem UI của
nó được gọi là mount. Khi một component được gỡ ra khỏi DOM thật vì UI
đã đóng được gọi là unmount.

10


Hình 2.2: DOM ảo và DOM thật
2.1.2.2. Functional Component và Class Component:
Có 2 cách để viết một component. Trong cách Functional
Component, ta viết một hàm trả về JSX mô tả UI của component. Đây là cách
hiện đại và nên dùng nhất ngày nay. Ngồi ra, cịn cách cũ là Class
Component. Ta viết một class kế thừa từ React.Component và cài đặt phương
thức render trả về JSX của UI. Mỗi khi React cần render một component, nó
sẽ gọi hàm Functional Component hay phương thức render của Class
Component để lấy JSX và render UI từ nó.

11


Hình 2.3: Functional Component cho một nút bấm

2.1.2.3. Props
Một component có thể nhận tham số từ ngồi gọi là Props. Tham
số này có thể là tên người dùng, ngày sinh, ID để hiện. Ta khai báo props ở
tham số hàm của Functional Component và có thể dùng nó ngay trong code
HTML.

Hình 2.4: Khai báo và sử dụng props count và onClick ở Functional Component

2.1.2.4. State
Nếu một component chứa dữ liệu có thể thay đổi bởi người dùng,
ta chứa nó trong State. Dùng hàm useState để khai báo một state. Hàm này trả
về một hằng chứa giá trị state và hàm để đặt giá trị state đó. Mỗi khi setState
được gọi, React sẽ render lại component với giá trị state mới. Ta dùng state
trong code HTML y hệt như với props.

12


2.1.2.5. Unidirectional Data Flow
Trong React, ta nên chứa các state được dùng chung bởi nhiều
component ở component cha của các component này. Ta truyền state từ
component cha vào các component con cần nó qua props. Nếu component con
cần cập nhật state này, ta truyền hàm setState vào nó qua props. Mơ hình này
được gọi là mơ hình Dịng dữ liệu Một chiều (Unidirectional Data Flow). Dữ
liệu đi từ component cha xuống con và con có thể đặt state của cha. Mơ hình
này giúp ta dễ đồng bộ dữ liệu giữa các thành phần trong UI và giúp code dễ
bảo trì hơn.

13

Hình 2.5: Mơ hình Unidirectional Data Flow.
2.1.2.6. Hook
Khi dùng Functional Component, ta sử dụng các tính năng của
React thơng qua các hàm gọi là Hook. useState là ví dụ của một hook. React
cịn có một số hook khác hay dùng như:
• useEffect: Chạy hàm khi component được mount, unmount
• useContext: Chia sẻ dữ liệu như theme, dependency giữa các
component
• useRef: Chứa dữ liệu không cần thiết cho việc render nhưng cần
giữ nguyên giữa các lần render.
2.1.2.7. Một số framework và thư viện hay dùng với React
React hay được dùng với các thư viện và framework sau đây:
• Redux: Quản lý các state được chia sẻ bởi nhiều component một
cách chặt chẽ và dễ dự đốn.
• React Router: Hỗ trợ navigation ở client-side.

14


• Next.js: Xây dựng website hỗ trợ render ở cả server và client
dùng React.
• SWR: Cung cấp hook để gọi API có hỗ trợ caching, pagination,
infinite loading, …
2.1.3. Ưu điểm, nhược điểm:
Ưu điểm:
• Dễ học và dùng
• Có tính tái sử dụng cao, dễ bảo trì
• Dễ tạo web động với nhiều dữ liệu

• Nhiều thư viện hỗ trợ
• Rất phổ biến với cộng đồng rộng lớn
Nhược điểm:
• Cập nhật liên tục nên cần học kiến thức mới thường xuyên
• Cần cài đặt thêm thư viện và framework để xây dựng được
website hoàn thiện
2.2 Tổng quan về Express.js
2.2.1 Giới thiệu
Express.js là một framework web back-end miễn phí và mã nguồn
mở. Nó chạy trên mơi trường Node.js. Express hay được dùng để xây dựng
REST API và là framework server phổ biến nhất trên Node. Express hoạt
động theo cơ chế middleware rất đơn giản giúp ta dễ dàng xử lý các request và
trả về response cho API.
Express là một trong những framework back-end phổ biến nhất
hiện nay và được dùng bởi PayPal, Uber, IBM, …

15


2.2.2 Các khái niệm cơ bản và cách thức hoạt động
2.2.2.1 Middleware
Khái niệm chủ chốt nhất của Express là Middleware. Nó là một
hàm nhận một đối tượng request, xử lý nó, và trả về response cho client hoặc
gửi request đến một middleware khác. Một middleware được gắn vào một
API route (bao gồm URL và phương thức HTTP như GET, POST, PATCH,
…) nào đó bằng các hàm get, post, patch,… trên đối tượng app. Dùng hàm use
để chạy một middleware trên mọi route.

Hình 2.6: Khai báo và sử dụng một middleware trả về chữ Hello World ở route GET
/

Một middleware có thể thay đổi một request rồi chuyển request cho
middleware khác. Ta dùng một vài middleware chạy trên mọi route để kiểm
tra thông tin xác thực (Authentication) như Bearer Token, log thông tin, hay
chuyển đổi body của request sang JSON trước khi đưa request tới middleware
của một route cụ thể.

16


Hình 2.7: Request được xử lý ở middleware myLogger trước khi chuyển tới
middleware ở route GET /
Một số middleware hữu dụng có sẵn:
• body-parser: Xử lý body của request sang JSON, text,…
• cookie-parser: Đọc và đặt cookie
• cors: Quản lý chia sẻ tài nguyên liên origin
• morgan: Log request
• session: Quản lý session người dùng ở server
2.2.2.2 Router
Ta có thể nhóm các route có liên quan (cùng base URL) vào một
router. Ta gắn router này vào Express qua hàm use.

17