Xây dựng website bán đồ công nghệ với spring boot và reactjs
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.04 MB, 124 trang )
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
----------
BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ
VỚI SPRING BOOT VÀ REACTJS
Giảng viên hướng dẫn:
ThS. Trần Thị Hồng Yến
Sinh viên thực hiện:
Phạm Tấn Khang
19521670
Bùi Minh Huy
19521597
Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
----------
BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ
VỚI SPRING BOOT VÀ REACTJS
Giảng viên hướng dẫn:
ThS. Trần Thị Hồng Yến
Sinh viên thực hiện:
Phạm Tấn Khang
19521670
Bùi Minh Huy
19521597
Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022
LỜI CẢM ƠN
Đầu tiên, nhóm xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại
học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoa Công nghệ
phần mềm đã giúp cho em có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này.
Đặc biệt, em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới cô Trần Thị Hồng Yến
(Giảng viên khoa Công Nghệ Phần Mềm). Cô đã trực tiếp hướng dẫn tận tình, sửa chữa và
đóng góp nhiều ý kiến q báu giúp em hồn thành tốt báo cáo mơn học của mình. Trong
thời gian một học kỳ thực hiện đề tài, em đã vận dụng những kiến thức nền tảng đã tích
lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới. Từ đó, em vận
dụng tối đa những gì đã thu thập được để hồn thành một báo cáo đồ án tốt nhất. Tuy nhiên,
trong q trình thực hiện, em khơng tránh khỏi những thiếu sót. Chính vì vậy, em rất mong
nhận được những sự góp ý từ phía Cơ nhằm hồn thiện những kiến thức mà em đã học tập
và là hành trang để em thực hiện tiếp các đề tài khác trong tương lai.
Xin chân thành cảm ơn các q Thầy Cơ!
Nhóm sinh viên thực hiện
Phạm Tấn Khang
Bùi Minh Huy
1
ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ
VỚI SPRING BOOT VÀ REACTJS
TÊN ĐỀ TÀI TIẾNG ANH:
BUILDING TECHNOLOGY SHOP WEBSITE
WITH SPRING BOOT AND REACTJS
Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày: 21/02/2022 đến ngày: 10/06/2022
Sinh viên thực hiện:
Phạm Tấn Khang – 19521670
Bùi Minh Huy – 19521597
Nội dung đề tài:
1. Giới thiệu đề tài:
Trong thời đại chuyển giao công nghệ cộng với sự tác động của đại dịch mà người
tiêu dùng chuyển thói quen mua hàng tại các cửa hàng siêu thị sang mua sắm
online. Bởi vì sự tiện lợi, giá cả rõ ràng, vận chuyển đơn hàng ngày càng nhanh
chóng hơn, các cửa hàng kinh doanh luôn nhận thấy được tiềm năng của việc tiếp
thị và bán hàng online.Đặc biệt đối với các cửa hàng bán đồ công nghệ cần phải
mở rộng hơn trong việc quảng bá các mặt hàng của mình tới khách hàng. Nhận
thấy được nhu cầu của cửa hàng và tiềm năng trong việc kinh doanh online, nhóm
2
chúng em đã tiến hành xây dựng "Website bán hàng công nghệ" nhằm thúc đẩy
doanh thu của cửa hàng thông qua việc bán hàng online.
Phần mềm sẽ là nơi cũng cấp cho người dùng những thơng tin chính xác và giá cả
trực quan nhất của sản phẩm, góp phần làm cho việc mua bán các thiết bị công
nghệ trong thời kì dịch bệnh trở nên dễ dàng hơn. Ngồi ra cịn giúp của hàng có
thể quản lý kho hàng, các đơn xuất nhập hàng và doanh thu.
2. Mục tiêu đề tài:
Nắm bắt và áp dụng được framework Spring Boot và ReactJS để xây
-
dựng sản phẩm đề tài.
Xây dựng được website bán đồ công nghệ với nội dung 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 thương mại điện tử. Website được phát triển dựa trên
VueJs.
Xây dựng được website quản trị cho nhân viên của hàng với các chức
-
năng quản lý thông tin đa dạng và tiện dụng. Website được phát triển dựa
trên ReactJs.
3. Phạm vi đề tài:
•
Phạm vi mơi trường:
o
•
Triển khai sản phẩm trên mơi trường web.
Phạm vi chức năng:
o
Đối với phía admin:
▪
Quản lý sản phẩm, biến thể sản phẩm.
▪
Quản lý thương hiệu, loại sản phẩm.
▪
Quản lý đơn hàng.
▪
Quản lý nhập hàng.
▪
Quản lý khuyến mãi.
▪
Quản lý tài khoản nhân viên.
▪
Thống kê.
3
o
Đối với phía website:
▪
Đăng nhập, đăng ký tài khoản.
▪
Xác thực mail, quên mật khẩu.
▪
Quản lý thông tin tài khoản.
▪
Hiển thị danh sách sản phẩm, chi tiết sản phẩm.
▪
Tìm kiếm sản phẩm.
▪
Bộ lọc chi tiết sản phẩm.
▪
Chức năng giỏ hàng.
▪
Chức năng đặt hàng.
▪
Lịch sử mua hàng.
4. Đối tượng sử dụng:
-
Tất cả người dùng có nhu cầu mua đồ cơng nghệ tại cửa hàng.
-
Nhân viên, chủ cửa hàng.
5. Phương pháp thực hiện:
-
Tìm hiểu về Spring Boot, ReactJS, VueJS, PostgreSQL.
-
Tham khảo các website liên quan để hiểu rõ về nghiệp vụ.
-
Tiến hành phân tích và thiết kế hệ thống.
-
Tìm hiểu UX/UI và tiến hành thiết kế giao diện cho website.
-
Xây dựng website cho người dùng và website cho nhân viên.
-
Tiến hành triển khai và kiểm thử.
6. Công nghệ sử dụng:
-
Backend: Spring Boot
-
Front-end: ReactJS, VueJS
-
Database: PostgreSQL
-
Source Control: GitHub
4
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 thương mại điện tử.
-
Á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 sản phẩm đề tài.
-
Giao diện website đẹp mắt, dễ sử dụng đối với người dùng.
-
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 sản phẩm đề tài để phù hợp với nhu cầu thực tiễn
trong tương lai.
5
8. Kế hoạch thực hiện:
Giai đoạn
Thời gian
- Tìm hiểu về Spring Boot và ReactJS,
Chuẩn bị
kiến thức về
Công việc
21/02/2022 – 07/03/2022
PostgreSQL
công nghệ
- Phân tích, xác định, chức năng.
Phân tích,
thiết kế
08/03/2022 – 08/04/2021
hệ thống
- Thiết kế database.
- Xây dựng base source.
- Thiết kế UI.
- Xây dựng giao diện admin với ReactJS.
- Xây dựng giao diện website với VueJS.
Xây dựng
ứng dụng
- Xây dựng RESTful API cho các chức
09/04/2021 – 16/05/2021
năng.
- Tích hợp API để hoàn thiện giao diện
admin và website.
- Thực hiện kiểm thử các luồng chức
Kiểm thử
và sửa lỗi
năng.
17/05/2021 – 31/05/2021
- Tiến hành sửa lỗi phát sinh nếu có.
- Cải thiện giao diện và hoàn thành ứng
dụng
- Viết báo cáo.
Hoàn thiện
báo cáo và
slide thuyết
01/06/2022 – 10/06/2022
- Làm slide thuyết trình.
trình
6
9.
Phân công công việc:
Công việc
Công việc chung
Mô tả công việc
- Tìm hiểu cơng nghệ.
- Phân tích, xác định, chức năng yêu cầu.
- Kiểm thử.
- Chuẩn bị tài liệu, viết báo cáo.
- Xây dựng website bán hàng.
Công việc cá nhân
Phạm Tấn Khang
Bùi Minh Huy
- Lập trình Backend, xây
- Lập trình Frontend, xây dựng
dựng RESTful API.
giao diện admin.
- Thiết kế cơ sở dữ liệu.
- Crawl data cho website.
TP. HCM, ngày 10 tháng 06 năm 2022
Xác nhận của CBHD
Sinh viên
(Ký tên và ghi rõ họ tên)
(Ký tên và ghi rõ họ tên)
ThS. Trần Thị Hồng Yến
Phạm Tấn Khang | Bùi Minh Huy
7
MỤC LỤC
LỜI CẢM ƠN ......................................................................................................1
ĐỀ CƯƠNG CHI TIẾT .......................................................................................2
MỤC LỤC ............................................................................................................8
DANH MỤC BẢNG ..........................................................................................12
DANH MỤC HÌNH ẢNH .................................................................................15
Chương 1. GIỚI THIỆU ĐỀ TÀI ....................................................................17
1.1
Tên đề tài ..............................................................................................17
1.2
Mô tả đề tài ...........................................................................................17
1.3
Lý do chọn thiết kế Website .................................................................17
1.4
Công nghệ sử dụng ...............................................................................19
Chương 2. CƠ SỞ LÝ THUYẾT ....................................................................20
2.1
Tổng quan về ReactJS...........................................................................20
2.2
Tổng quan về VueJS .............................................................................20
2.3
Tổng quan về Spring Boot ....................................................................21
2.4
Tổng quan về Spring Data JPA ............................................................22
2.5
Tổng quan về Postgres SQL .................................................................22
2.6
Tổng quan về Cloudinary .....................................................................23
2.7
Tổng quan về Json Web Token (JWT) .................................................24
Chương 3. PHÂN TÍCH ĐẶC TẢ U CẦU ................................................26
3.1
Mơ tả yêu cầu ........................................................................................26
3.1.1
Yêu cầu chức năng .........................................................................26
3.1.2
Yêu cầu phi chức năng ...................................................................28
3.2
Phân tích Use case ................................................................................29
3.2.1
Use case quản lý .............................................................................29
3.2.1.1 Sơ đồ Use case .........................................................................29
3.2.1.2 Danh sách Actor ......................................................................30
3.2.1.3 Danh sách Use-case .................................................................30
3.2.1.4 Đặc tả Use-case........................................................................31
3.2.2
Use case website ............................................................................49
3.2.2.1 Sơ đồ Use case .........................................................................49
8
3.2.2.2 Danh sách Actor ......................................................................49
3.2.2.3 Danh sách Use case .................................................................50
3.2.2.4 Đặc tả Use Case .......................................................................51
Chương 4. THIẾT KẾ HỆ THỐNG ................................................................62
4.1
Kiến trúc hệ thống.................................................................................62
4.1.1
Kiến trúc hệ thống BackEnd ..........................................................62
4.1.1.1 Mô tả kiến trúc hệ thống ..........................................................62
4.1.1.2 Mô tả thành phần trong hệ thống .............................................63
4.1.2
Mơ tả kiến trúc FrontEnd ...............................................................65
4.1.2.1 Phía hệ thống quản lý ..............................................................65
4.1.2.2 Phía website. ............................................................................66
Chương 5. THIẾT KẾ CƠ SỞ DỮ LIỆU ........................................................67
5.1
Sơ đồ dữ liệu .........................................................................................67
5.2
Danh sách các bảng dữ liệu ..................................................................68
5.3
Mô tả từng bảng dữ liệu ........................................................................69
5.3.1
Bảng BRAND ................................................................................69
5.3.2
Bảng CATEGORY ........................................................................69
5.3.3
Bảng ATTRIBUTE ........................................................................70
5.3.4
Bảng TAG ......................................................................................70
5.3.5
Bảng CATEGORY_ATTRIBUTE ................................................71
5.3.6
Bảng PRODUCT............................................................................71
5.3.7
Bảng VARIANT ............................................................................71
5.3.8
Bảng VARIANT_ATTRIBUTE ....................................................72
5.3.9
Bảng IMPORT ...............................................................................72
5.3.10 Bảng IMPORT_DETAIL .............................................................73
5.3.11 Bảng VOUCHER..........................................................................73
5.3.12 Bảng ORDERS .............................................................................74
5.3.13 Bảng ORDER_DETAIL ...............................................................75
5.3.14 Bảng USER ...................................................................................75
5.3.15 Bảng ROLE ..................................................................................76
5.3.16 Bảng VERIFICATION_TOKEN .................................................76
9
5.3.17 Bảng PASSWORD_RESET_TOKEN .........................................77
Chương 6. THIẾT KẾ GIAO DIỆN ................................................................78
6.1
Phía hệ thống quản lý............................................................................78
6.1.1
Sơ đồ các màn hình ........................................................................78
6.1.2
Danh sách các màn hình.................................................................79
6.1.3
Mơ tả chi tiết ..................................................................................81
6.1.3.1 Màn hình quản lý phân loại .....................................................81
6.1.3.2 Màn hình thêm phân loại .........................................................82
6.1.3.3 Màn hình chỉnh sửa phân loại ..................................................83
6.1.3.4 Màn hình quản lý thương hiệu .................................................84
6.1.3.5 Màn hình tạo mới thương hiệu ................................................85
6.1.3.6 Màn hình chỉnh sửa thương hiệu .............................................87
6.1.3.7 Màn hình quản lý sản phẩm .....................................................88
6.1.3.8 Màn hình tạo mới sản phẩm ....................................................89
6.1.3.9 Màn hình chỉnh sửa sản phẩm .................................................90
6.1.3.10 Màn hình chỉnh sửa phiên bản ...............................................92
6.1.3.11 Màn hình quản lý đơn hàng ...................................................93
6.1.3.12 Màn hình xem chi tiết đơn hàng ............................................94
6.1.3.13 Màn hình xuất hóa đơn ..........................................................95
6.1.3.14
Màn hình quản lý nhập hàng ................................................96
6.1.3.15 Màn hình tạo mới đơn nhập ...................................................97
6.1.3.16 Màn hình xem chi tiết đơn nhập ............................................98
6.1.3.17 Màn hình xuất đơn nhập ........................................................99
6.1.3.18 Màn hình quản lý tài khoản khách hàng ............................. 100
6.1.3.19 Màn hình quản lý tài khoản nhân viên ............................... 100
6.1.3.20 Màn hình tạo mới tài khoản nhân viên ............................... 101
6.1.3.21 Màn hình quản lý khuyến mãi ............................................ 102
6.1.3.22 Màn hình tạo mới khuyến mãi ............................................ 103
6.1.3.23 Màn hình chỉnh sửa khuyến mãi ......................................... 104
6.1.3.24
6.2
Màn hình thống kê ............................................................. 105
Phía Website ...................................................................................... 106
10
6.2.1
Sơ đồ màn hình ........................................................................... 106
6.2.2
Danh sách các màn hình.............................................................. 106
6.2.3
Chi tiết màn hình ......................................................................... 108
6.2.3.1 Trang chủ .............................................................................. 108
6.2.3.2 Xem sản phẩm theo thương hiệu .......................................... 109
6.2.3.3 Xem sản phẩm theo phân loại............................................... 110
6.2.3.4 Xem giỏ hàng ........................................................................ 111
6.2.3.5 Thông tin đặt hàng ................................................................ 112
6.2.3.6 Chi tiết sản phẩm .................................................................. 113
6.2.3.7 Lịch sử mua hàng .................................................................. 114
6.2.3.8 Thay đổi thông tin cá nhân ................................................... 114
6.2.3.9 Thay đổi mật khẩu ................................................................ 115
6.2.3.10 Đăng nhập ........................................................................... 116
6.2.3.11 Đăng ký ............................................................................... 117
6.2.3.12 Quên mật khẩu .................................................................... 118
6.2.3.13 Đặt lại mật khẩu .................................................................. 119
KẾT LUẬN ..................................................................................................... 120
TÀI LIỆU THAM KHẢO ............................................................................... 122
11
DANH MỤC BẢNG
Bảng 3.1 Yêu cầu chức năng..............................................................................28
Bảng 3.2 Danh sách Actor quản lý.....................................................................30
Bảng 3.3 Danh sách use-case quản lý ................................................................31
Bảng 3.4 Đăc tả use-case đăng nhập (quản lý) ..................................................31
Bảng 3.5 Đặc tả use-case đăng xuất (quản lý) ...................................................32
Bảng 3.6 Đặc tả use-case chỉnh sửa thông tin (quản lý) ....................................33
Bảng 3.7 Đặc tả use-case đổi mật khẩu (quản lý) ..............................................34
Bảng 3.8 Đặc tả use-case quản lý phân loại sản phẩm (quản lý) .......................36
Bảng 3.9 Đặc tả use-case quản lý thương hiệu sản phẩm (quản lý) ..................37
Bảng 3.10 Đặc tả use-case quản lý sản phẩm, phiên bản (quản lý) ...................40
Bảng 3.11 Đặc tả use-case quản lý đơn hàng (quản lý) .....................................42
Bảng 3.12 Đặc tả use-case quản lý nhập hàng (quản lý) ...................................43
Bảng 3.13 Đặc tả use-case quản lý tài khoản (quản lý) .....................................45
Bảng 3.14 Đặc tả use-case quản lý khuyến mãi (quản lý) .................................47
Bảng 3.15 Đặc tả use-case thống kê (quản lý) ...................................................48
Bảng 3.16 Danh sách Actor (website) ...............................................................50
Bảng 3.17 Danh sách use case (website) ...........................................................50
Bảng 3.18 Đặc tả use case xem sản phẩm theo phân loại (website) ..................52
Bảng 3.19 Đặc tả use case xem sản phẩm theo thương hiệu (website) .............53
Bảng 3.20 Đặc tả use case xem chi tiết sản phẩm (website) ..............................54
Bảng 3.21 Đcặ tả use case giỏ hàng (website) ...................................................55
Bảng 3.22 Đặc tả use case đặt hàng (website) ...................................................56
Bảng 3.23 Đặc tả use case chỉnh sửa tài khoản (website) ..................................57
Bảng 3.24 Đặc tả use case thay đổi mật khẩu (website) ....................................58
Bảng 3.25 Đặc tả use case xem lịch sử đặt hàng (website) ...............................58
Bảng 3.26 Đặc tả use case đăng ký (website) ....................................................59
Bảng 3.27 Đặc tả use case đăng nhập (website) ................................................60
Bảng 3.28 Đặc tả use case quên mật khẩu (website) .........................................61
12
Bảng 4.1 Mô tả thành phần hệ thống BackEnd – 1............................................64
Bảng 4.2 Mô tả thành phần hệ thống BackEnd - 2 ............................................64
Bảng 4.3 Mơ tả thành phần hệ thống phía quản lý ............................................65
Bảng 4.4 Mô tả thành phần hệ thống phía website ............................................66
Bảng 5.1 Dach sách các bảng dữ liệu ................................................................69
Bảng 5.2 Bảng BRAND .....................................................................................69
Bảng 5.3 Bảng CATEGORY .............................................................................70
Bảng 5.4 Bảng ATTRIBUTE .............................................................................70
Bảng 5.5 Bảng TAG ...........................................................................................70
Bảng 5.6 Bảng CATEGORY_ATTRIBUTE .....................................................71
Bảng 5.7 Bảng PRODUCT ................................................................................71
Bảng 5.8 Bảng VARIANT .................................................................................72
Bảng 5.9 Bảng VARIANT_ATTRIBUTE .........................................................72
Bảng 5.10 Bảng IMPORT ..................................................................................73
Bảng 5.11 Bảng IMPORT_DETAIL .................................................................73
Bảng 5.12 Bảng VOUCHER..............................................................................74
Bảng 5.13 Bảng ORDERS .................................................................................75
Bảng 5.14 Bảng ORDER_DETAIL ...................................................................75
Bảng 5.15 Bảng USER .......................................................................................76
Bảng 5.16 Bảng ROLE ......................................................................................76
Bảng 5.17 bảng VERFICATION_TOKEN .......................................................77
Bảng 5.18 Bảng PASSWORD_RESET_TOKEN .............................................77
Bảng 6.1 Danh sách các màn hình .....................................................................81
Bảng 6.2 Bảng mơ tả màn hình quản lý phân loại .............................................82
Bảng 6.3 Bảng mơ tả màn hình thêm phân loại .................................................83
Bảng 6.4 Bảng mơ tả màn hình chỉnh sửa phân loại.........................................84
Bảng 6.5 Bảng mơ tả màn hình quản lý thương hiệu........................................85
Bảng 6.6 Bảng mơ tả màn hình tạo mới thương hiệu .......................................86
Bảng 6.7 Bảng mơ tả màn hình chỉnh sửa thương hiệu .....................................87
13
Bảng 6.8 Bảng mơ tả màn hình quản lý sản phẩm ............................................88
Bảng 6.9 Bảng mơ tả màn hình tạo mới sản phẩm ............................................90
Bảng 6.10 Bảng mơ tả màn hình chỉnh sửa sản phẩm .......................................91
Bảng 6.11 Bảng mơ tả màn hình chỉnh sửa phiên bản ......................................93
Bảng 6.12 Bảng mô tả màn hình quản lý đơn hàng ..........................................94
Bảng 6.13 Bảng mơ tả màn hình xem chi tiết đơn hàng ...................................95
Bảng 6.14 Bảng mơ tả màn hình xuất hố đơn .................................................95
Bảng 6.15 Bảng mơ tả màn hình quản lý nhập hàng ........................................96
Bảng 6.16 Bảng mơ tả màn hình tạo mới đơn nhập ..........................................97
Bảng 6.17 Bảng mơ tả màn hình xem chi tiết đơn nhập ....................................98
Bảng 6.18 Bảng mơ tả màn hình thống kê ...................................................... 105
Bảng 6.19 Danh sách các màn hình website ................................................... 107
Bảng 6.20 Bảng mơ tả chi tiết màn hình trang chủ ......................................... 108
Bảng 6.21 Bảng mô tả chi tiết màn hình xem sản phẩm theo thương hiệu .... 110
Bảng 6.22 Bảng mơ tả chi tiết màn hình xem sản phẩm theo thương hiệu .... 111
Bảng 6.23 Bảng mô tả chi tiết màn hình giỏ hàng .......................................... 112
Bảng 6.24 Bảng mơ tả chi tiết màn hình thơng tin đặt hàng ........................... 112
Bảng 6.25 Bảng mơ tả chi tiết màn hình ......................................................... 114
Bảng 6.26 Bảng mơ tả chi tiết màn hình thay đổi mật khẩu ........................... 115
Bảng 6.27 Bảng mô tả chi tiết màn hình đăng nhập ....................................... 116
Bảng 6.28 Bảng mơ tả chi tiết màn hình đăng ký ........................................... 117
Bảng 6.29 Bảng mơ tả chi tiết màn hình qn mật khẩu ................................ 118
Bảng 6.30 Bảng mơ tả chi tiết màn hình đặt lại mật khẩu .............................. 119
14
DANH MỤC HÌNH ẢNH
Hình 3.1 Sơ đồ use case quản lý ........................................................................29
Hình 3.2 Sơ đồ use-case website ........................................................................49
Hình 4.1 Kiến trúc hệ thống - BackEnd .............................................................62
Hình 4.2 Cấu trúc folder - BackEnd ..................................................................63
Hình 4.3 Cấu trúc folder phía quản lý ................................................................65
Hình 4.4 Cấu trúc folder phía website ...............................................................66
Hình 5.1 Sơ đồ dữ liệu .......................................................................................67
Hình 6.1 Sơ đồ các màn hình (quản lý) .............................................................78
Hình 6.2 Màn hình quản lý phân loại.................................................................81
Hình 6.3 Màn hình thêm phân loại ....................................................................82
Hình 6.4 Màn hình chỉnh sửa phân loại .............................................................83
Hình 6.5 Màn hình quản lý thương hiệu ............................................................84
Hình 6.6 Màn hình tạo mới thương hiệu ............................................................85
Hình 6.7 Màn hình chỉnh sửa thương hiệu.........................................................87
Hình 6.8 Màn hình quản lý sản phẩm ................................................................88
Hình 6.9 Màn hình tạo mới sản phẩm ................................................................89
Hình 6.10 Màn hình chỉnh sửa sản phẩm ...........................................................90
Hình 6.11 Màn hình chỉnh sửa phiên bản ..........................................................92
Hình 6.12 Màn hình quản lý đơn hàng ..............................................................93
Hình 6.13 Màn hình quản lý nhập hàng .............................................................96
Hình 6.14 Màn hình tạo mới đơn nhập ..............................................................97
Hình 6.15 Màn hình xem chi tiết đơn nhập .......................................................98
Hình 6.16 Màn hình thống kê ......................................................................... 105
Hình 6.17 Sơ đồ màn hình website ................................................................. 106
Hình 6.18 Màn hình trang chủ ........................................................................ 108
Hình 6.19 Màn hình xem sản phẩm theo thương hiệu .................................... 109
Hình 6.20 Màn hình xem sản phẩm theo thương hiệu .................................... 110
Hình 6.21 Màn hình giỏ hàng ......................................................................... 111
15
Hình 6.22 Màn hình thơng tin đặt hàng .......................................................... 112
Hình 6.23 Màn hình chi tiết sản phẩm ............................................................ 113
Hình 6.24 Màn hình thay đổi thơng tin cá nhân.............................................. 114
Hình 6.25 Màn hình thay đổi mật khẩu .......................................................... 115
Hình 6.26 Màn hình đăng nhập ....................................................................... 116
Hình 6.27 Màn hình đăng ký........................................................................... 117
Hình 6.28 Màn hình quên mật khẩu ................................................................ 118
Hình 6.29 Màn hình đặt lại mật khẩu.............................................................. 119
16
Chương 1.
GIỚI THIỆU ĐỀ TÀI
1.1 Tên đề tài
Tên của đề tài là “Xây dựng website bán đồ công nghệ với Spring Boot và
ReactJS”.
1.2 Mô tả đề tài
Tên gọi website của đề tài là GearShop. GearShop là một website hỗ trợ quản
lý hàng hóa và cung cấp giải pháp bán hàng online cho cửa hàng công nghệ. Ở
GearShop là nơi cung cấp một thế giới về đồ công nghệ như laptop, màn hình, chuột,
bàn phím, bàn ghế thơng minh, …
Website cung cấp chức năng cho 2 phía người dùng chính: quản lý cửa hàng,
khách hàng. Về phía quản lý GearShop cung cấp các chức năng phục vụ cho việc
quản lý phân loại sản phẩm, thương hiệu, sản phẩm và phiên bản, nhập hàng hóa,
quản lý các đơn hàng, khuyến mãi, người dùng trong hệ thống và cuối cùng là thống
kê. Về phía đối tượng sử dụng là khách hàng thì GearShop cung cấp các tính năng
như: xem danh sách sản phẩm theo phân loại, thương hiệu, lọc sản phẩm, sắp xếp,
xem chi tiết sản phẩm, quản lý giỏ hàng, quản lý hồ sơ và thông tin của khách hàng
nếu khách hàng đăng nhập vào hệ thống.
1.3 Lý do chọn thiết kế Website
-
Lý do khách quan:
Cuộc cách mạng khoa học và công nghệ đã và đang diễn ra vô cùng sôi động
trên toàn thế giới đã đưa thế giới bước sang một kỉ nguyên mới, kỉ nguyên của công
nghệ thông tin. Việc ứng dụng tin học vào đời sống nói chung và cơng tác quản lý
nói riêng đang phát triển mạnh mẽ, nó góp vai trị khơng nhỏ trong việc đưa tin học
trở thành một phần không thể thiếu trong tất cả mọi nghành nghề từ văn phịng, quảng
cáo, tài chính.
17
Từ khóa “e-Commerce” chắc chắn khơng cịn xa lạ với chúng ta. Các hoạt
động kinh doanh mua bán đang chuyển dần từ trực tiếp sang các đơn đặt hàng online.
Điều đó đặt ra u cầu phải chuyển đổi mơ hình kinh doanh của các cửa hàng, nhà
bán lẻ nói chung và thị trường bán lẻ thiết bị điện tử nói riêng. Để có thể triển khai
tốt mơ hình kinh doanh mới này các cửa hàng, nhà bán lẻ phải quản lý tốt được số
lượng sản phẩm trong kho của mình cũng như quản lý các hoạt động khác trong kinh
doanh online để tránh mất mát về lợi nhuận.
-
Lý do chủ quan:
Bản thân nhóm chúng em muốn xây dựng một ứng dụng gần hơn với ứng dụng
thực tế, có thể giải quyết được vấn đề về việc xây dựng một cửa hàng kinh doanh
online mà các cửa hàng bán đồ công nghệ mắc phải. Cùng với đó là nhu cầu sử dụng
phần mềm của một thành viên trong nhóm, tụi em sẽ cố gắng phát triển thêm để có
thể đưa phần mềm vào sử dụng thực tế.
18
1.4 Cơng nghệ sử dụng
-
Front-End:
• Website bán hàng: Vue, Vuex, thư viện UI Vuetify.
• Website quản lý: React Js, dva, umi, thư viện UI Ant design.
-
Back-End:
• Framework: Spring Boot.
• Security Standard: JWT.
-
Lưu trữ:
• Storage: Cloudinary.
• Database: Postgre SQL.
-
Mơi trường thiết kế:
• IntelliJ IDEA.
• Visual Studio Code.
-
Cơng cụ hỗ trợ:
• Postman.
• Chrome, React tool dev, Vue tool dev
19
Chương 2.
CƠ SỞ LÝ THUYẾT
2.1 Tổng quan về ReactJS
-
Tổng quan:
React là một thư viện để xây dựng giao diện người dùng có thể kết hợp. Nó
khuyến khích việc tạo ra các thành phần giao diện người dùng có thể tái sử dụng,
hiển thị dữ liệu thay đổi theo thời gian. Rất nhiều người sử dụng React làm V trong
MVC. React trừu tượng hóa DOM khỏi bạn, cung cấp mơ hình lập trình đơn giản
hơn và hiệu suất tốt hơn. React cũng có thể hiển thị trên máy chủ bằng Node và nó
có thể cung cấp năng lượng cho các ứng dụng gốc bằng React Native. React triển
khai luồng dữ liệu phản ứng một chiều, điều này giúp giảm bớt phần soạn sẵn và dễ
lý luận hơn so với ràng buộc dữ liệu truyền thống.
-
Ưu điểm nổi bật:
• Sử dụng DOM ảo là một đối tượng JavaScript. Điều này sẽ cải thiện
hiệu suất ứng dụng, vì DOM ảo JavaScript nhanh hơn DOM thơng
thường.
• Có thể được sử dụng trên máy khách và máy chủ cũng như với các
khn khổ khác.
• Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì các
ứng dụng lớn hơn.
2.2 Tổng quan về VueJS
-
Tổng quan:
VueJS là một framework khá nổi tiếng, nó được xây dựng theo mơ hình Step
by Step, nên khá là tiện và rất đễ sử dụng và phát triển website trên nền Front-end.
Vue hỗ trợ khá tốt cho các bạn, nó cũng rất dễ học và xây dựng website hiệu quả,
đặc biết là nó sẽ xây dựng website của các bạn theo dạng SPA (Single Page
Application) nên cải thiện hiệu suất khá là tốt.
20
-
Ưu điểm nổi bật:
• Dễ dàng học và tiếp cận cho người mới
• Vue có thể tạo cấu trúc project nhanh chóng hơn nhờ vào command
line interface.
• Vue sở hữu một hệ sinh thái vững chắc nên có thể cung cấp một số addons rất hữu ích cho việc xây dựng một ứng dụng fontend điển hình nhất.
Nó có thể bao gồm: vue-router, vuex, vue-test-utils, vue-dev-tools, vuecli, …
• No build step required: Nếu sử dụng Vue thì bạn sẽ khơng cần phải trải
qua quá nhiều bước để build mà có thể đi thẳng vào vấn đề một cách
dễ dàng.
2.3 Tổng quan về Spring Boot
-
Tổng quan:
Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh
thái Spring framework. Nó giúp cho các lập trình viên chúng ta đơn giản hóa q
trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business
cho ứng dụng.
-
Ưu điểm nổi bật:
• Phát triển web một cách đơn giản và nhanh chóng.
• Config an tồn.
• Có tính quản trị cao.
• Dễ dàng ứng dụng Spring và các sự kiện.
• Có thể cấu hình ở bên ngồi và tạo ra những tệp thuộc tính.
• Tính bảo mật cao.
21
2.4 Tổng quan về Spring Data JPA
-
Tổng quan:
Spring Boot JPA là một bản ghi chi tiết của Java để quản lý dữ liệu quan hệ
trong các ứng dụng Java. Nó cho phép chúng ta truy cập và lưu trữ dữ liệu giữa các
object/class Java và database quan hệ. JPA tuân theo Object-Relation Mapping
(ORM). Nó là một tập hợp các interface. Nó cũng cung cấp một API EntityManager
runtime để xử lý các câu query và giao dịch trên các object dựa trên database. Nó sử
dụng ngơn ngữ truy vấn hướng đối tượng độc lập nền tảng JPQL (Java Persistent
Query Language).
-
Tính năng nổi bật:
• Là một repository mạnh mẽ và object-mapping abstraction tùy chỉnh .
• Hỗ trợ cho cross-store persistence. Tức là một entity có thể được lưu
trữ một phần trong MySQL và Neo4j (Hệ thống quản lý cơ sở dữ liệu
đồ thị).
• Tự động tạo các truy vấn từ ngay chính tên các phương thức truy vấn.
• Các lớp dựa vào tên miền cung cấp các thuộc tính cơ bản.
• Hỗ trợ kiểm tra quản lý minh bạch.
• Khả năng tích hợp mã repository tùy chỉnh.
• Dễ dàng tích hợp với Spring Framework với namespace tùy chỉnh.
2.5 Tổng quan về Postgres SQL
-
Tổng quan:
PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ và đối tượng
(object-relational database management system) miễn phí và nguồn mở (RDBMS)
tiên tiến nhất hiện nay. khả năng mở rộng cao và tuân thủ các tiêu chuẩn kỹ thuật. Nó
được thiết kế để xử lý một loạt các khối lượng công việc lớn, từ các máy tính cá nhân
đến kho dữ liệu hoặc dịch vụ Web có nhiều người dùng đồng thời.
22
-
Ưu điểm nổi bật:
• Cung cấp nhiều kiểu dữ liệu: PostgreSQL cung cấp đa dạng kiểu dữ
liệu như nguyên hàm, cấu trúc, hình học, ...
• Bảo đảm tồn vẹn dữ liệu: Dữ liệu trong PostgreSQL ln được đảm
bảo tính tồn vẹn.
• Tính năng thiết lập linh hoạt: PostgreSQL cho phép người dùng thiết
lập danh mục từ cơ bản đến nâng cao, tối ưu ưu hóa tốc độ truy cập, hỗ
trợ thống kê trên nhiều cột. Cùng với đó là vơ số thiết lập khác.
• Chức năng bảo mật: PostgreSQL hỗ trợ xây dựng hàng rào bảo mật,
xác thực mạnh.
• Khả năng mở rộng: Người dùng có thể thực hiện mở rộng hệ thống qua
các phức thức lưu trữ, kết nối cơ sở dữ liệu.
• Chức năng tìm kiếm văn bản: PostgreSQL cung cấp tính năng tìm kiếm
văn bản đầy đủ, hệ thống hóa ký tự theo cách khoa học.
2.6 Tổng quan về Cloudinary
-
Tổng quan:
Cloudinary là một giải pháp quản lý hình ảnh từ đầu đến cuối cho trang web
và ứng dụng di động của bạn. Cloudinary bao gồm mọi thứ, từ tải lên hình ảnh, lưu
trữ, thao tác, tối ưu hóa để phân phối. Bạn có thể dễ dàng tải hình ảnh lên đám mây,
tự động thực hiện các thao tác hình ảnh thơng minh mà khơng cần cài đặt bất kỳ phần
mềm phức tạp nào. Tất cả hình ảnh của bạn sau đó được phân phối liền mạch thơng
qua CDN nhanh, được tối ưu hóa và sử dụng các thực tiễn tốt nhất trong ngành.
Cloudinary cung cấp API toàn diện và khả năng quản trị và dễ dàng tích hợp với các
ứng dụng web và di động mới và hiện có.
-
Ưu điểm nổi bật:
• Miễn phí
• Config dễ dàng tiện lợi
23
