Đồ án tìm hiểu về reactjsexpress framework

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA HỆ THỐNG THÔNG TIN

BÁO CÁO ĐỒ ÁN 2

ĐỀ TÀI: TÌM HIỂU VỀ REACTJSEXPRESS FRAMEWORK

Lớp:

SE122.N21

Giảng viên hướng dẫn:

ThS. Nguyễn Công Hoan

Sinh viên thực hiện:

Nguyễn Bảo Duy – 19520488

🙡 TP. Hồ Chí Minh, 6/2023 🙣


ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA HỆ THỐNG THÔNG TIN

BÁO CÁO ĐỒ ÁN 2
ĐỀ TÀI: TÌM HIỂU VỀ REACTJSEXPRESS FRAMEWORK

Lớp:

SE122.N21

Giảng viên hướng dẫn:

ThS. Nguyễn Công Hoan

Sinh viên thực hiện:

Nguyễn Bảo Duy – 19520488

🙡 TP. Hồ Chí Minh, 6/2023 🙣


LỜI CẢM ƠN
Em xin gửi lời cảm ơn tới thầy Nguyễn Công Hoan đã giúp đỡ, hướng dẫn,
định hướng cách làm việc của em trong suốt quá trình thực hiện đồ án. Em vơ cùng
biết ơn thầy vì đã tận tình chỉ dẫn em thực hiện đề tài này. Trong q trình thực hiện
của em cịn hạn chế và cịn nhiều khó khăn nên khơng tránh khỏi những thiếu sót nên
em mong thầy sẽ đưa ra những góp ý, hướng dẫn để em có thêm cho mình nhiều kiến
thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc. Em xin chân thành cảm ơn thầy!
TP. Hồ Chí Minh, tháng 6 năm 2023
Sinh viên thực hiện

Nguyễn Bảo Duy

1


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

………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………, ngày ……… tháng ……… năm ………
Giảng viên hướng dẫn

Nguyễn Công Hoan

2


MỤC LỤC
DANH MỤC HÌNH ẢNH ............................................................................... 6
DANH MỤC BẢNG ........................................................................................ 7
Chương 1 Tổng quan về đề tài ....................................................................... 8

1.1. Lý do chọn đề tài .................................................................................. 8
1.2. Mục tiêu................................................................................................. 8
1.3. Phạm vi nghiên cứu .............................................................................. 8
1.4. Đối tượng sử dụng ................................................................................ 9
1.5. Phương pháp thực hiện ....................................................................... 9
1.6. Công nghệ ............................................................................................. 9
Chương 2 Cơ sở lý thuyết ............................................................................. 10
2.1. Reactjs ................................................................................................. 10
2.1.1. Giới thiệu chung ............................................................................ 10
2.1.2. Các khái niệm cơ bản .................................................................... 10
2.1.2.1. Tiến cận component-based......................................................... 10
2.1.2.2. Virtual DOM .............................................................................. 11
2.1.2.3. Props và State ............................................................................ 12
2.1.2.4. Vòng đời của component ............................................................ 12
2.1.2.5. React Hook ................................................................................. 13
2.1.2.6. Cách Reactjs hoạt động ............................................................. 14
2.1.2.7. Ưu điểm của Reactjs .................................................................. 14
2.2. React-Route ........................................................................................ 16
2.3. React Redux và Redux-toolkit .......................................................... 17
2.4. Expressjs ............................................................................................. 18
2.5. Mongoose ............................................................................................ 18
2.6. JSON Web Token ............................................................................... 19
Chương 3 Phân tích và thiết kế hệ thống .................................................... 20

3


3.1. Xây dựng hệ thống ............................................................................. 20
3.1.1. Kiến trúc hệ thống ......................................................................... 20
3.1.2. Mô tả chi tiết ................................................................................. 20

3.2. Phân tích yêu cầu ............................................................................... 20
3.2.1. Yêu cầu chức năng ........................................................................ 20
3.2.2. Yêu cầu phi chức năng .................................................................. 21
3.3. Sơ đồ use-case ..................................................................................... 22
3.3.1. Danh sách actor ............................................................................. 23
3.3.2. Danh sách use-case ....................................................................... 23
3.4. Sơ đồ use-case ..................................................................................... 24
3.4.1. Đăng ký ......................................................................................... 24
3.4.2. Đăng nhập ..................................................................................... 24
3.4.3. Tìm kiếm ....................................................................................... 25
3.4.4. Xem tin tức .................................................................................... 25
3.4.5. Đánh giá sản phẩm ........................................................................ 26
3.4.6. Thêm sản phẩm vào giỏ hàng ....................................................... 26
3.4.7. Sửa sản phẩm trong giỏ hàng ........................................................ 27
3.4.8. Xóa sản phẩm trong giỏ hàng ....................................................... 27
3.4.9. Xử lý đơn hàng .............................................................................. 27
3.4.10. Thêm sản phẩm ........................................................................... 28
3.4.11. Sửa sản phẩm .............................................................................. 28
3.4.12. Xóa sản phẩm .............................................................................. 29
3.4.13. Thêm tin tức ................................................................................ 29
3.4.14. Sửa tin tức ................................................................................... 30
3.4.15. Xóa tin tức ................................................................................... 30
Chương 4 Xây dựng website ........................................................................ 32
4.1. Giao diện bên phía người dùng ......................................................... 32
4.1.1. Trang chủ ...................................................................................... 32

4


4.1.2. Đăng nhập ..................................................................................... 33

4.1.3. Đăng ký ......................................................................................... 34
4.1.4. Tin tức ........................................................................................... 34
4.1.5. Giỏ hàng ........................................................................................ 35
4.2. Giao diện bên phía người dùng ......................................................... 36
4.2.1. Đăng nhập ..................................................................................... 36
4.2.2. Tổng quan...................................................................................... 36
4.2.3. Danh sách các hãng sản phẩm....................................................... 37
4.2.4. Danh sách sản phẩm ...................................................................... 38
Chương 5 Kết luận ........................................................................................ 39
5.1. Thuận lợi ............................................................................................. 39
5.2. Khó khăn ............................................................................................. 39
5.3. Ưu điểm của đồ án ............................................................................. 39
5.4. Nhược điểm của đồ án ....................................................................... 39
5.5. Hướng phát triển đề tài ..................................................................... 39
TÀI LIỆU THAM KHẢO ............................................................................... 40

5


DANH MỤC HÌNH ẢNH
Hình 2.1.2.2.1 Mơ tả Virtual DOM................................................................. 12
Hình 2.1.2.4.1 Vịng đời của component ........................................................ 13
Hình 3.1.1.1 Sơ đồ kiến trúc hệ thống ............................................................ 20
Hình 3.2.2.1 Sơ đồ use-case ............................................................................ 22
Hình 3.2.2.2 Sơ đồ phân rã use-case ............................................................... 22
Hình 4.1.1.1 Trang chủ ................................................................................... 32
Hình 4.1.2.1 Màn hình đăng nhập ................................................................... 33
Hình 4.1.3.1 Màn hình đăng ký ...................................................................... 34
Hình 4.1.4.1 Màn hình tin tức ......................................................................... 34
Hình 4.1.5.1 Màn hình giỏ hàng ..................................................................... 35

Hình 4.2.1.1 Màn hình đăng nhập ................................................................... 36
Hình 4.2.2.1 Màn hình tổng quan ................................................................... 36
Hình 4.2.3.1 Màn hình các hãng sản phẩm ..................................................... 37
Hình 4.2.4.1 Màn hình danh sách sản phẩm ................................................... 38

6


DANH MỤC BẢNG
Bảng 3.1.2.1 Kiến trúc hệ thống ..................................................................... 20
Bảng 3.2.1.1 Yêu cầu chức năng..................................................................... 20
Bảng 3.3.1.1 Danh sách Actor ........................................................................ 23
Bảng 3.3.2.1 Danh sách use-case .................................................................... 23
Bảng 3.4.1.1 Đặc tả use-case Đăng ký ............................................................ 24
Bảng 3.4.2.1 Đặc tả use-case Đăng nhập ....................................................... 24
Bảng 3.4.3.1 Đặc tả use-case Tìm kiếm ......................................................... 25
Bảng 3.4.4.1 Đặc tả use-case Xem tin tức ..................................................... 25
Bảng 3.4.5.1 Đặc tả use-case Đánh giá sản phẩm ......................................... 26
Bảng 3.4.6.1 Đặc tả use-case Thêm sản phẩm vào giỏ hàng ......................... 26
Bảng 3.4.7.1 Đặc tả use-case Sửa sản phẩm trong giỏ hàng ......................... 27
Bảng 3.4.8.1 Đặc tả use-case Xóa sản phẩm trong giỏ hàng ......................... 27
Bảng 3.4.9.1 Đặc tả use-case Xử lý đơn hàng ............................................... 27
Bảng 3.4.10.1 Đặc tả use-case Thêm sản phẩm ............................................. 28
Bảng 3.4.11.1 Đặc tả use-case Sửa sản phẩm ................................................ 28
Bảng 3.4.12.1 Đặc tả use-case Xóa sản phẩm ............................................... 29
Bảng 3.4.13.1 Đặc tả use-case Thêm tin tức .................................................. 29
Bảng 3.4.14.1 Đặc tả use-case Sửa tin tức ..................................................... 30
Bảng 3.4.15.1 Đặc tả use-case Xóa tin tức .................................................... 30

7

Chương 1 Tổng quan về đề tài
1.1.Lý do chọn đề tài
Trong thời đại khoa học công nghệ ngày càng phát triển thì website là thứ cơng
cụ ngày càng cần thiết và quan trọng đối với các doanh nghiệp. Website giúp doanh
nghiệp giao tiếp và tiếp cận khách hàng dễ dàng hơn, hiệu quả hơn, thơng qua đó biết
được nhu cầu tìm hiểu sản phẩm và các phản hồi đến từ khách hàng. Một website
chất lượng và chuyên nghiệp giúp nâng cao hình ảnh và uy tín của doanh nghiệp. Vì
vậy, việc xây dựng và thiết kế một website là một bước thiết yếu để doanh nghiệp có
thể phát triển mạnh mẽ.
Hiện nay, để có thể xây dựng và phát triển một ứng dụng web một cách nhanh
chóng thì đã có rất nhiều thư viện, framework hỗ trợ cho chúng ta sử dụng.
• Về phía client: Reactjs sẽ giúp các developers xây dựng một giao diện người dùng
linh hoạt thông qua component nhằm để dễ dàng tái sử dụng, bảo trì các
component này. Ngoài ra, Reactjs sử dụng Virtual DOM để tăng hiệu suất của
ứng dụng web và giảm tải cho trình duyệt.
• Về phía server: Express.js giúp đơn giản hóa việc xây dựng ứng dụng web phía
server bằng cách cung cấp các APIs đơn giản và dễ hiểu. Nó cũng linh hoạt cho
phép bạn tùy chỉnh và mở rộng theo nhu cầu của ứng dụng.

1.2.Mục tiêu
-

Tìm hiểu và nghiên cứu cách thức hoạt động của ReactJS và Express.js.

-

Sử dụng các nghiên cứu đó để xây dựng một hệ thống ứng dụng web.

1.3.Phạm vi nghiên cứu
• Phạm vi mơi trường:
o Triển khai ứng dụng trên mơi trường web.
• Phạm vi chức năng:
o Quản lý thông tin sản phẩm
o Quản lý giỏ hàng
o Tìm kiếm sản phẩm theo nhu cầu

8


o Phân loại các sản phẩm
o Đánh giá các sản phẩm

1.4.Đối tượng sử dụng
• Người dùng khách
• Người dùng có tài khoản
• Quản trị viên (Admin)

1.5.Phương pháp thực hiện
-

Tìm hiểu về Reactjs, Express.js và một số thư viện khác.

-

Khảo sát các website bán hàng có trên thị trường để xác định các yêu cầu, tính
năng của ứng dụng.

-

Xây dựng hệ thống Backend kết nối với cơ sở dữ liệu.

-

Thiết kế giao diện website cho người dùng và cho quản trị viên

1.6.Công nghệ
-

Front-end: Reactjs với Redux.

-

Back-end: Express.js.

-

Database: MongoDB.

9


Chương 2 Cơ sở lý thuyết
2.1.Reactjs
2.1.1.Giới thiệu chung
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi
Facebook. Nó được sử dụng để xây dựng giao diện người dùng (UI) động và tương
tác trên các ứng dụng web. ReactJS giúp phân chia giao diện thành các component
độc lập, cho phép việc quản lý và tái sử dụng mã dễ dàng hơn.

Một trong những đặc điểm nổi bật của ReactJS là việc sử dụng Virtual DOM
(DOM ảo) để tối ưu hiệu năng. Thay vì tương tác trực tiếp với DOM thực, ReactJS
sử dụng DOM ảo để cập nhật chỉ những phần cần thiết thay vì tồn bộ giao diện.
Điều này giúp giảm tải và tăng tốc độ hiển thị giao diện.
2.1.2.Các khái niệm cơ bản
2.1.2.1.Tiến cận component-based
Cách tiếp cận component-based trong ReactJS là một cách cấu trúc ứng dụng
của bạn bằng cách chia nhỏ nó thành các component độc lập và có thể tái sử dụng.
Mỗi component đại diện cho một phần hoặc tính năng cụ thể trong ứng dụng của
bạn và nó có thể được tổng hợp, lồng vào nhau và sử dụng lại trong các phần khác
nhau của ứng dụng của bạn.
Dưới đây là các nguyên tắc chính của cách tiếp cận component-based trong
ReactJS:
1. Khả năng tái sử dụng: Các component được thiết kế để có thể tái sử
dụng, nghĩa là bạn có thể sử dụng cùng một component nhiều lần trong các phần
khác nhau của ứng dụng. Điều này giúp giảm trùng lặp mã và thúc đẩy cơ sở mã
modular và có thể bảo trì.
2. Tách biệt: Mỗi component trong ReactJS tập trung vào một mối quan tâm
hoặc chức năng cụ thể. Bằng cách chia nhỏ ứng dụng của bạn thành các component
nhỏ hơn, bạn có thể quản lý các phần khác nhau của ứng dụng một cách riêng biệt
và dễ dàng thực hiện các thay đổi hoặc cập nhật mà không ảnh hưởng đến các phần
khác.

10


3. Component: ReactJS cung cấp một cách để kết hợp các component lại
với nhau để xây dựng các giao diện người dùng phức tạp hơn. Bạn có thể lồng các
component bên trong các component khác để tạo một hệ thống phân cấp các
component đại diện cho cấu trúc ứng dụng của bạn.

4. Quản lý trạng thái: Các component trong ReactJS có thể có trạng thái
riêng, cho phép chúng quản lý và kiểm sốt dữ liệu của chính chúng. Bằng cách
đóng gói trạng thái bên trong các component , bạn có thể đảm bảo rằng mỗi
component đều độc lập và độc lập.
2.1.2.2.Virtual DOM
Virtual DOM là một khái niệm quan trọng trong ReactJS. Nó là một cơ chế
tối ưu hóa để làm việc với DOM (Document Object Model) trong ứng dụng web.
Trước khi đi vào chi tiết về Virtual DOM, chúng ta cần hiểu DOM là gì.
DOM là một biểu diễn cấ trúc của một tài liệu HTML hoặc XML mà trình
duyệt web sử dụng để hiển thị nội dung vàản lý sự tương tác của người dùng với nội
dung đó.
Khi một ứng dụng React được render, React tạo ra một bản sao ảo của DOM
hiện tại, được gọi là Virtual DOM. Virtual DOM là một biểu diễn của DOM trong
bộ nhớ và nó cung cấp một cách tiếp cận hiệu quả hơn để cập nhật và tái render các
component của ứng dụng.
Khi trạng thái của ứng dụng thay đổi, React so sánh Virtual DOM mới với
Virtual DOM cũ để tìm ra sự khác biệt. Sau đó, React chỉ cập nhật những phần thay
đổi duy nhất trên DOM thực tế, thay vì cập nhật toàn bộ DOM. Điều này giúp tăng
hiệu suất và tối ưu hóa sự render của ứng dụng. Virtual DOM cũng cho phép React
gom nhóm nhiều thay đổi vào một lần cập nhật, giúp giảm số lần truy cập và cập
nhật.

11


Hình 2.1.2.2.1 Mơ tả Virtual DOM

2.1.2.3.Props và State
Trong ReactJS, "props" là một cách để truyền dữ liệu từ một thành phần cha
xuống các thành phần con. "Props" là viết tắt của "properties" và nó được sử dụng

để truyền các giá trị tĩnh từ một thành phần cha xuống các thành phần con.
Khi một thành phần nhận được một giá trị "prop" từ thành phần cha, nó có
thể sử dụng giá trị đó để hiển thị và tương tác với người dùng. Một lợi ích quan
trọng của việc sử dụng props là nó cho phép tái sử dụng các thành phần và tạo ra
các thành phần động dựa trên dữ liệu đầu vào.

Cịn State là một đặc tính của các component. Nó được sử dụng để lưu
trữ và quản lý các dữ liệu có thể thay đổi trong component. Khi state thay đổi,
React sẽ tự động cập nhật và render lại component để hiển thị dữ liệu mới.
2.1.2.4.Vòng đời của component
Một loạt các thay đổi mà Component trải qua từ khi nó được tạo ra cho tới
khi nó kết thúc (bị hủy) được gọi là một vòng đời (lifecycle) của Component. Trong
quá trình tồn tại của Component các phương thức sẽ được gọi, dưới đây là hình ảnh
minh họa vịng đời của Component và các phương thức sẽ được gọi trong các giai
đoạn khác nhau.

12


Hình 2.1.2.4.1 Vịng đời của component

Các phương thức trong React Component Lifecycle có thể chia ra làm 3 pha
chính là:
• Mounting: giai đoạn component được tạo ra và render lần đầu tiên trên cây
DOM. Các phương thức có thể sử dụng là contructor(), render(),
componentDidMount()
• Updating: giai đoạn component cần cập nhật lại giao diện mỗi khi props và
state của component đó có sự thay đổi. Các phương thức có thể sử dụng là
render(), shouldComponentUpdate(), componentDidUpdate()
• Unmounting: giai đoạn component bị xóa khỏi cây DOM. Phương thức có thể

sử dụng là componentWillUnmount()
2.1.2.5.React Hook
Để có thể sử dụng trạng thái (state) và các hoạt động (lifecycle) trong các
thành phần React, chúng ta phải sử dụng các lớp (class components). Tuy nhiên,
việc sử dụng lớp có thể dẫn đến các vấn đề callback các phương thức phức tạp và
khó khăn trong việc chia sẻ logic giữa các thành phần.

13


Với React Hook, chúng ta có thể viết mã logic trong các hàm (functional
components) mà không cần sử dụng lớp. Hook cho phép chúng ta sử dụng các tính
năng như trạng thái, hoạt động và các hiệu ứng của React mà không cần viết lại
thành các lớp.
Các hook thường dùng là:
• useState: dùng để khai báo một biến state và một phương thức cập nhật setState
thay cho việc sử dụng this.state trong class. Khi có nhu cầu cập nhật biến state,
ta chỉ cần gọi phương thức setState() và truyền tham số mới để cập nhật.
• useEffect: dùng để thực hiện các side effect bên trong component function (ví
dụ như thay đổi DOM, lấy dữ liệu, …). Nó cùng mục đích với
componentDidMount, componentUpdate và componentWillUnmount nhưng
được thống nhất lại trong một API duy nhất.
2.1.2.6.Cách Reactjs hoạt động
ReactJS thường được sử dụng để tạo giao diện cho các single page
application (SPA). Ứng dụng web được chia thành các component. Mỗi component
bao gồm hai thành phần chính: state và props. Props là dữ liệu được truyền từ
component cha sang component con, trong khi state là dữ liệu của component. Ứng
dụng web không render toàn bộ trang web mà chỉ render lại phần mà người dùng sử
dụng; phần chỉ được render khi tình trạng của nó thay đổi. ReactJS đã cải thiện hiệu
suất của ứng dụng web và trở thành thư viện phát triển giao diện phổ biến vì nguyên

tắc hoạt động cùng với các component chỉ định nghĩa một lần có thể sử dụng nhiều
lần.
2.1.2.7.Ưu điểm của Reactjs
• Dễ tiếp cận:

React là thư viện khá dễ tiếp cận và sử dụng đối với những lập trình
viên mới bắt đầu học, thậm chí bạn có thể sử dụng React chỉ trong vài ngày
học theo tuturial và đọc các tài liệu liên quan. Trong mô hình MVC (Model-

14


View-control) thì React đảm nhận nhiệm vụ View. Nó hoạt động bằng cách
kết hợp HTML và Javascript thuần, vì thế cú pháp trong React khá là dễ hiểu.
• Tăng tốc độ tải trang với Virtual DOM:

Việc sử dụng Real DOM cấu trúc dạng tree với kích thước lớn, khi thay
đổi gía trị, cây DOM được cập nhật lại tồn bộ gây tốn thời gian và rủi ro.
Để giải quyêt vấn đề trên, React sử dụng Virual DOM (DOM ảo), mỗi
khi render thì React sẽ tạo ra một DOM ảo và lưu nó vào trong bộ nhớ, khi
thay đổi state của component thì DOM ảo sẽ được cập nhật lại và so sách với
DOM ảo cũ (được đồng bộ với DOM thật trước đó) bằng thuật tốn ‘diffing‘,
để tìm ra những node cần thay đổi và cuối cùng cập nhật lại những node đó
trên DOM thật. Vì thế q trình cập nhật lại cây DOM sẽ không bị gián đoạn
và làm chậm phản hồi, giúp website chạy mượt mà và nhanh hơn.
• Tái sử dụng dễ dàng:

React giúp lập trình viên hồn tồn có thể sử dụng lại các component
đã khai báo trước đó để phát triển các ứng dụng khác nhau có cùng chứ năng.
Đây là một điểm mạnh cũng như lợi thế của ReactJS giúp các lập trình

viên có thể dễ thở hơn trong các dự án.
• Viết component dễ dàng với JSX:

Khi nhắc đến React ta không thể bỏ qua JSX (Javascript + XML), đây
là cú pháp mở rộng gần giống XML, người dùng có thể lập trình React bằng
cú pháp của XML thay vì sử dụng Javascript mà khơng làm thay đổi ý nghĩa
của Javascript, nó giúp chúng ta dễ dàng định nghĩa và quản lý các
component phức tạp cũng như việc dễ dàng đọc hiểu được ý nghĩa của các
component hơn.
• Thân thiện với SEO:

15


Một vai trò quan trọng trong tối ưu SEO là tốc độ tải trang. React có
thể tăng tốc dộ tải trang của ứng dụng thông qua Virtual DOM, nên rất có
hiệu quả với việc cải thiện kết quả SEO.
Mặt khác, React có khả năng tạo ra các giao diện người dùng có thể
truy cập vào các cơng cụ tìm kiếm. Tuy nhiên React không thể cải thiện 100%
khả năng SEO của trang web, còn cần phải phụ thuộc vào các thư viện bổ
sung, nội dung trang web, định tuyến, tương tác người dùng, v.v…
• Dễ tích hợp và kiểm thử:

Như đã giới thiệu ở trên, React chỉ là một thư viện giúp tạo ra giao diện
người dùng (View) nên có thể dễ dàng tích hợp vào các framework khác như
Angular, BackbooneJS…
React được thiết kế với việc tạo ra các component riêng lẻ, nên việc
kiểm thử UI, chức năng cũng được đơn giản hóa theo từng component. Bằng
cách tích hợp các thư viện kiểm thử như Jest, Enzyme, React Testing Library
… sẽ giúp cho việc kiểm thử dễ dàng hơn.

2.2.React-Route
React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Nó
giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt. ReactRouter cho phép bạn định tuyến "luồng dữ liệu" (data flow) trong ứng dụng của bạn
một cách rõ ràng. Nó tương đương với sự khẳng định, nếu bạn có URL này, nó sẽ
tương đương với Route này, và giao diện tương ứng.
Bao gồm các thành phần cơ bản:
• BrowserRouter: Được sử dụng phổ biến hơn, nó sử dụng History API có
trong HTML5 để theo dõi lịch sử bộ định tuyến của bạn.
• Route: Định nghĩa một ánh xạ (mapping) giữa một URL và một Component.
Điều đó có nghĩa là khi người dùng truy cập theo một URL trên trình duyệt,
một Component tương ứng sẽ được render trên giao diện.

16


• Link: Trong HTML thì cặp thẻ để chuyển hướng đó là thẻ <a></a> thì trong
react chúng ta sẽ dử dụng cặp thẻ <Link></Link> được import từ ReactRouter.
• NavLink: NavLink thì rất giống với Link về cách sử dụng, nhưng NavLink tốt
hơn

vì

nó

hỗ

trợ

thêm

một

số

thuộc

tính

như

là activeClassName và activeStyle 2 thuộc tính này giúp cho khi mà nó trùng
khớp thì nó sẽ được active lên và chúng ta có thể style cho nó.
2.3.React Redux và Redux-toolkit
Redux là công cụ quản lý state phổ biến và khá gây tranh cãi trong hệ sinh
thái react, vì có khá nhiều dev than phiền là redux dài dịng và khó sử dụng. Riêng
mình thì khơng thấy khó nhưng nhiều lúc cũng thấy hơi dài dịng thật . Vì để tạo ra
một store hồn chỉnh thì chúng ta cần qua khá nhiều bước, tạo nhiều file với các
đoạn code lặp lại khá nhiều, ngồi ra redux khơng hề xây dựng một quy chuẩn rõ
ràng cho việc viết logic., cũng như ngồi redux thì đơi khi ta cần cài đặt thêm một
số thư viện nữa như middleware, selectors... thì mới có thể viết hồn chỉnh
logic quản lý state.
Redux-toolkit là một package được sinh ra nhằm giải quyết phần lớn những
vấn đề kể trên, được phát triển bởi chính chủ reduxjs team, giúp chúng ta viết code
redux nhanh gọn, hoàn chỉnh theo một quy chuẩn thống nhất.
Redux có 3 thành phần:
• Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng
Redux nào. Bạn có thể access các state được lưu, update state, và đăng ký or
hủy đăng ký các listeners thơng qua helper methods.
• Action: là các event, Chúng là cách mà chúng ta send data từ app đến Redux
store. Những data này có thể là từ sự tương tác của user vs app, API calls hoặc

cũng có thể là từ form submission.
• Reducer: là các function nguyên thủy chúng lấy state hiện tại của app, thực
hiện một action và trả về một state mới. Những states này được lưu như những

17


objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản
hồi một action được gửi đến store.
2.4.Expressjs
Expressjs là một framework được xây dựng trên nền tảng của Nodetjs. Nó
cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. Expressjs hỗ trợ các
method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.
Ưu điểm:
• Rất dễ học: có thể sử dụng ngôn ngữ JavaScript dễ học, không cần học
thêm ngơn ngữ mới.
• Giúp cho việc phát triển back-end dễ dàng hơn nhiều khi sử dụng Expressjs
• Mã JavaScript được diễn giải thông qua Google V8 JavaScript Engine của
Node.JavaScript. Do đó, mã sẽ được thực hiện một cách nhanh chóng và
dễ dàng.
• Expressjs rất đơn giản để tùy chỉnh và sử dụng theo nhu cầu.
• Cung cấp một module phần mềm trung gian linh hoạt và rất hữu ích để
thực hiện các tác vụ bổ sung theo phản hồi và u cầu.
• Hỗ trợ phát triển ứng dụng theo mơ hình MVC, đây là mơ hình phổ biến
cho việc lập trình web hiện nay.
2.5.Mongoose
Mongoose là một framework JavaScript thường được sử dụng trong ứng dụng
Node.JavaScript với database là MongoDB. Mongoose cho phép định nghĩa các
object (đối tượng) với một schema được định nghĩa rõ ràng, được ánh xạ tới một
MongoDB document.

Mongoose là một thư viện mơ hình hóa đối tượng (Object Data Model - ODM)
cho MongoDB và Node.JavaScript. Nó quản lý mối quan hệ giữa dữ liệu, cung cấp sự
xác nhận giản đồ và được sử dụng để dịch giữa các đối tượng trong mã và biểu diễn
các đối tượng trong MongoDB.

18


2.6.JSON Web Token
JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên
Client – Server , các thông tin trong chuỗi JWT được định dạng bằng JSON . Trong
đó chuỗi Token phải có 3 phần là header , phần payload và phần signature được ngăn
bằng dấu “.”
Cấu trúc của JSON Web Token:
• Header: chứa kiểu dữ liệu và thuật tốn sử dụng mã hóa
• Payload: chứa các thơng tin muốn đặt trong chuỗi
• Signature: Phần chử ký này sẽ được tạo ra bằng cách mã hóa
phần header , payload kèm theo một chuỗi secret (khóa bí mật) , ví dụ:
data = base64urlEncode( header ) + "." + base64urlEncode( payload )
signature = Hash( data, secret );

base64UrlEncoder : thuật tốn mã hóa header và payload. Sau đó mã hóa 2
chuỗi trên kèm theo secret (khóa bí mật) bằng thuật tốn HS256 ta sẽ có chuỗi
signature. Kết hợp 3 chuỗi trên lại ta sẽ có được một chuỗi JWT hồn chỉnh
Khi nào dùng JWT:
• Authentication: Đây là trường hợp phổ biến nhất thường sử dụng JWT. Khi
người dùng đã đăng nhập vào hệ thống thì những request tiếp theo từ phía người
dùng sẽ chứa thêm mã JWT. Điều này cho phép người dùng được cấp quyền truy
cập vào các url, service, và resource mà mã Token đó cho phép. Phương pháp này
không bị ảnh hưởng bởi Cross-Origin Resource Sharing (CORS) do nó khơng sử

dụng cookie.
• Trao đổi thơng tin: JSON Web Token là 1 cách thức khá hay để truyền thơng tin
an tồn giữa các thành viên với nhau, nhờ vào phần signature của nó. Phía người
nhận có thể biết được người gửi là ai thông qua phần signature. Và chữ ký được
tạo ra bằng việc kết hợp cả phần header, payload lại nên thơng qua đó ta có thể
xác nhận được chữ ký có bị giả mạo hay không.

19


Chương 3 Phân tích và thiết kế hệ thống
3.1.Xây dựng hệ thống

3.1.1.Kiến trúc hệ thống

Hình 3.1.1.1 Sơ đồ kiến trúc hệ thống

3.1.2.Mô tả chi tiết
Bảng 3.1.2.1 Kiến trúc hệ thống

Ý nghĩa

STT Thành phần

1

View

Dùng Reactjs để hiển thị giao diện người dùng

Controller

Xử lý yêu cầu người dùng từ View, lấy data

Frontend

cho View từ RestfulAPI
RestfulAPI

Sử dụng thư viện Axios thực hiện kết nối giữa
Frontend và Backend

2

Backend

3

Database

Controller

Nơi tiếp nhận các yêu cầu từ Frontend

Model

Lưu trữ và truy xuất dữ liệu từ database
Nơi lưu trữ các thơng tin của người dùng

3.2.Phân tích u cầu

3.2.1.u cầu chức năng
Bảng 3.2.1.1 Yêu cầu chức năng

Nhóm chức năng

Chức năng

Mô tả

Người dùng

Đăng ký

Đăng ký tài khoản mới cho người dùng

20


Đăng nhập
Tìm kiếm

Người dùng đăng nhập vào tài khoản
Người dùng nhập thơng tin để tìm
kiếm sản phẩm theo nhu cầu

Xem tin tức

Trang tin tức cho người dùng

Đánh giá sản phẩm

Người dùng cho đánh giá sản phẩm

Thêm sản phẩm vào Người dùng thêm sản phẩm mới vào
giỏ hàng

giỏ hàng

Sửa sản phẩm trong Người dùng sửa thông tin sản phẩm
giỏ hàng

trong giỏ hangf

Xóa sản phẩm trong Người dùng xóa sản phẩm có trong giỏ
giỏ hàng
Xử lý đơn hàng

Quản lý

hàng
Quản lý tiến hành xử lý tình trạng đơn
hàng

Thêm sản phẩm

Quản lý thêm sản phẩm mới

Sửa sản phẩm

Quản lý sửa sản phẩm được chọn

Xóa sản phẩm

Quản lý xóa sản phẩm được chọn

Thêm tin tức

Quản lý thêm tin tức mới

Sửa tin tức

Quản lý sửa tin tức được chọn

Xóa tin tức

Quản lý xóa tin tức được chọn

3.2.2.u cầu phi chức năng
• Tính bảo mật: Phải đảm bảo an tồn thơng tin dữ liệu của người dùng, ngăn
chặn các cuộc tấn cơng từ bên ngồi, giảm thiểu tối đa rủi ro, rị rỉ thơng
tin tài khoản người dùng.
• Tính tiện dụng: Phần mềm thân thiện với người dùng, dễ sử dụng.
• Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, nhanh chóng.
• Tính tương thích: Ứng dụng có thể chạy ổn định và tương thích với nhiều
nền tảng trên nhiều hệ điều hành khác nhau.

21

3.3.Sơ đồ use-case

Hình 3.2.2.1 Sơ đồ use-case

Hình 3.2.2.2 Sơ đồ phân rã use-case

22


3.3.1.Danh sách actor
Bảng 3.3.1.1 Danh sách Actor

Ý nghĩa

STT Tên actor
1

Người dùng

Là người dùng sử dụng website

2

Quản trị viên

Là quản trị viên quản lý website admin

3.3.2.Danh sách use-case
Bảng 3.3.2.1 Danh sách use-case

STT Tên use-case

Ý nghĩa

1

Đăng ký

Đăng ký tài khoản mới cho người dùng

2

Đăng nhập

Người dùng đăng nhập vào tài khoản

3

Tìm kiếm

4

Xem tin tức

Trang tin tức cho người dùng

5

Đánh giá sản phẩm

Người dùng cho đánh giá sản phẩm

6

7

8

Thêm sản phẩm vào
giỏ hàng
Sửa sản phẩm trong
giỏ hàng
Xóa sản phẩm trong
giỏ hàng

Người dùng nhập thơng tin để tìm kiếm sản phẩm
theo nhu cầu

Người dùng thêm sản phẩm mới vào giỏ hàng
Người dùng sửa thông tin sản phẩm trong giỏ hangf
Người dùng xóa sản phẩm có trong giỏ hàng

9

Xử lý đơn hàng

Quản lý tiến hành xử lý tình trạng đơn hàng

10

Thêm sản phẩm

Quản lý thêm sản phẩm mới

11

Sửa sản phẩm

Quản lý sửa sản phẩm được chọn

12

Xóa sản phẩm

Quản lý xóa sản phẩm được chọn

13

Thêm tin tức

Quản lý thêm tin tức mới

14

Sửa tin tức

Quản lý sửa tin tức được chọn

15

Xóa tin tức

Quản lý xóa tin tức được chọn

23