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 ĐỀ TÀI: TÌM HIỂU VỀ REACTJS-EXPRESS 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 ĐỀ TÀI: TÌM HIỂU VỀ REACTJS-EXPRESS 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 em suốt trình thực đồ án Em vơ biết ơn thầy tận tình dẫn em thực đề tài Trong q trình thực em cịn hạn chế cịn nhiều khó khăn nên khơng tránh khỏi thiếu sót nên em mong thầy đưa góp ý, hướng dẫn để em có thêm cho 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 năm 2023 Sinh viên thực Nguyễn Bảo Duy 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 MỤC LỤC DANH MỤC HÌNH ẢNH .6 DANH MỤC BẢNG Chương Tổng quan đề tài .8 1.1 Lý chọn đề tài 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 1.5 Phương pháp thực 1.6 Công nghệ Chương 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 10 2.1.2.1 Tiến cận component-based .10 2.1.2.2 Virtual DOM 11 2.1.2.3 Props State 12 2.1.2.4 Vòng đời 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 Reactjs 14 2.2 React-Route .16 2.3 React Redux Redux-toolkit 17 2.4 Expressjs 18 2.5 Mongoose 18 2.6 JSON Web Token .19 Chương Phân tích thiết kế hệ thống 20 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 20 3.2.2 Yêu cầu phi chức 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 giỏ hàng 27 3.4.8 Xóa sản phẩm 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 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.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 hãng sản phẩm .37 4.2.4 Danh sách sản phẩm 38 Chương Kết luận 39 5.1 Thuận lợi 39 5.2 Khó khăn 39 5.3 Ưu điểm đồ án 39 5.4 Nhược điểm đồ án .39 5.5 Hướng phát triển đề tài 39 TÀI LIỆU THAM KHẢO .40 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 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 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 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 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 giỏ hàng 27 Bảng 3.4.8.1 Đặc tả use-case Xóa sản phẩm 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