Tìm hiểu về reactjs và spring boot 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 CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN Đề tài: Tìm hiểu ReactJS Spring Boot Framework Giảng viên hướng dẫn: NGUYỄN CÔNG HOAN Sinh viên thực hiện: TRIỆU TUẤN TÚ 20522103 Thành phố Hồ Chí Minh, ngày tháng năm 2023 Đồ án Triệu Tuấn Tú 2052103 NHẬN XÉT CỦA GIẢNG VIÊN …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… TRANG Đồ án Triệu Tuấn Tú 2052103 MỤC LỤC Giới thiệu tổng quan I Thành viên nhóm: Tổng quan đề tài: Công cụ sử dụng: II Xây dựng ứng dụng Tổng quan đề tài: 1.1 Lý chọn đề tài: 1.2 Đối tượng hướng đến: 1.3 Kết mong đợi Phân tích thiết kế hệ thống 2.1 Xác định yêu cầu .9 Thiết kế liệu 34 3.1 Danh sách collection liệu: 34 3.2 Mô tả collection liệu .34 Thiết kế hệ thống 36 4.1 Kiến trúc hệ thống: 36 4.2 Chi tiết thành phần hệ thống 37 Thiết kế giao diện 38 5.1 Trang Home 38 5.2 Trang Blog 39 5.3 Giao diện xem chi tiết viết .40 5.4 Trang Introduction .41 5.5 Trang Support 42 5.6 Trang Destination 43 5.7 Giao diện chi tiết tour 44 5.8 Trang booking 45 5.9 Trang search 46 5.10 Thiết kế trang Admin Dashboard 47 5.11 Thiết kế trang quản lý đơn đặt tour 47 Cài đặt kiểm thử .47 Source code 48 III Tìm hiểu ReactJS 48 Giới thiệu .48 TRANG Đồ án IV Triệu Tuấn Tú 2052103 Các thành phần ReactJS 49 2.1 Components 49 2.2 Virtual DOM 50 2.3 JSX .50 2.4 State .51 2.5 Props 51 2.6 Lifecycle 52 2.7 React route dom 52 2.8 Server-side Rendering(SSR) 53 2.9 Client-side Rendering(CSR) 53 Spring boot 53 Giới thiệu .53 Một số component .54 2.1 Spring Boot starter .54 2.2 Spring Boot mybatis-plus 55 2.3 Spring Boot spring cache .56 2.4 Spring Boot rabbitmq 56 2.5 Spring Boot elasticsearch .57 2.6 Spring Boot docker 58 2.7 Spring Boot elk 59 2.8 Spring Boot Admin 2.0 60 2.9 Spring Boot apollo .61 2.10 Spring Boot Security, OAuth2 + API, JWT + API, OAuth2 + JWT 61 2.11 Spring Boot Actuator Prometheus .62 2.12 Spring Boot Seata 63 2.13 Spring Boot JSR303 63 2.14 Spring Boot với Eureka .64 2.15 Spring Boot với rest + ribbon 64 2.16 Spring Boot với Feign 64 2.17 Spring Boot với Hystrix Turbine and Dashboard 65 2.18 Spring Boot với Gateway .65 V Tài liệu tham khảo 66 TRANG Đồ án Triệu Tuấn Tú 2052103 Danh mục hình ảnh Hình 1: Sơ đồ use case .10 Hình 2: Chi tiết use case Xem viết 12 Hình : Chi tiết use case Xem địa điểm .13 Hình 4: : Chi tiết use case Xem tour 15 Hình : Chi tiết use case Quản lý viết 19 Hình : Chi tiết use case Quản lý user 21 Hình : Chi tiết use case Quản lý tour .24 Hình : Chi tiết use case Quản lý địa điểm .26 Hình : Chi tiết use case Quản lý voucher 29 Hình 10 : Chi tiết use case Quản lý review 31 Hình 11 : Chi tiết use case Quản lý xác nhận đơn đặt tour 33 Hình 12: Giao diện trang home 38 Hình 13: Giao diện trang Blog 39 Hình 14: Giao diện xem chi tiết viết .40 Hình 15: Giao diện trang Introduction .41 Hình 16: Giao diện trang Support 42 Hình 17: Giao diện trang Destination 43 Hình 18: Giao diện chi tiết tour 44 Hình 19: Giao diện đặt tour .45 Hình 20: Giao diện trang Tìm kiếm đơn đặt tour .46 Hình 21: Bản thiết kế trang Admin Dashboard 47 Hình 22: Bản thiết kế trang Quản lý đơn đặt tour .47 Hình 23: Virtual Dom 50 Hình 24: Ví dụ sử dụng JSX 50 Hình 25: Ví dụ khơng sử dụng JSX .51 Hình 26: Ví dụ khai báo thay đổi state 51 Hình 27: Ví dụ truyền props từ component cha 51 Hình 28: Ví dụ nhận props từ component cha .52 Hình 29: Ví dụ react route dom .53 Hình 30: Ví dụ sử dụng springboot starter 54 Hình 31: Ví dụ sử dụng interface mybatis plus 55 Hình 32: Ví dụ code sử dụng mybatis plus 56 Hình 33: Câu lênh SQL tương ứng sử dung mybatis plus 56 Danh mục bảng Bảng 1: Thành viên nhóm Bảng 2: Danh sách tác nhân .10 Bảng 3: Đặc tả use cáe đăng nhập .11 Bảng 4: Đặc tả use case đăng ký 12 Bảng 5: Đặc tả use case Xem viết 12 TRANG Đồ án Triệu Tuấn Tú 2052103 Bảng 6:Đặc tả use case Xem viết theo tên 13 Bảng 7: Đặc tả use case Xem viết theo tag 13 Bảng 8: Đặc tả use case Xem danh sách địa điẻm .14 Bảng 9: Đặc tả use case Xem chi tiết địa điểm 14 Bảng 10 : : Đặc tả use case Xem tour khởi hành 15 Bảng 11 : : Đặc tả use case Xem danh sách tour địa điểm 16 Bảng 12: Đặc tả use case Xem chi tiết tour 16 Bảng 13: Đặc tả use case Đặt tour .17 Bảng 14: Đặc tả use case Tra cứu đơn đặt tour 17 Bảng 15: Đặc tả use case Đánh giá 18 Bảng 16: Đặc tả use case Xem thống kê báo cáo .18 Bảng 17: Đặc tả use case Hiển thị danh sách viết 19 Bảng 18: Đặc tả use case Thêm viết .20 Bảng 19: Đặc tả use case Sửa viết 20 Bảng 20: Đặc tả use case Xóa viết 21 Bảng 21: Đặc tả use case Hiênr thị danh sách user 22 Bảng 22: Đặc tả use case Thêm user 22 Bảng 23: Đặc tả use case Sửa user .23 Bảng 24: Đặc tả use case Xóa user .23 Bảng 25: Đặc tả use case Hiển thị danh sách tour .24 Bảng 26: Đặc tả use case Thêm tour 25 Bảng 27: Đặc tả use case Sửa tour .25 Bảng 28: Đặc tả use case Xóa tour .26 Bảng 29: Đặc tả use case Hiển hị danh sach địa điểm .27 Bảng 30: Đặc tả use case Thêm địa điểm 27 Bảng 31: Đặc tả use case Sửa địa điểm 28 Bảng 32: Đặc tả use case Xóa địa điểm 28 Bảng 33: Đặc tả use case Hiển thị danh sách voucher .29 Bảng 34: Đặc tả use case Thêm voucher 30 Bảng 35: Đặc tả use case Sửa voucher .30 Bảng 36: Đặc tả use case Xóa coucher .31 Bảng 37: Đặc tả use case Hiển thị danh sách review 32 Bảng 38: Đặc tả use case Xóa review 32 Bảng 39: Hiển thị danh sách đơn đặt tour 33 Bảng 40: Đặc tả use case Sửa đơn đặt tour .34 Bảng 41: Danh sách collection liệu .34 Bảng 42: Mô tả collection blog 34 Bảng 43: Mô tả collection booking 35 Bảng 44: Mô tả collection destination .35 Bảng 45: Mô tả collection review 35 Bảng 46: Mô tả collection review 35 Bảng 47: Mô tả collection tour 36 Bảng 48: Mô tả collection user 36 Bảng 49: Mô tả collection Voucher 36 Bảng 50: Kết cài đặt 48 TRANG Đồ án I Triệu Tuấn Tú 2052103 Giới thiệu tổng quan Thành viên nhóm: MSSV Họ tên 20522103 Triệu Tuấn Tú Email 20522103@gmail.co m Số điện thoại 0393666925 Bảng 1: Thành viên nhóm Tổng quan đề tài: Đồ án tập trung vào việc xây dựng website sử dụng hai cơng nghệ Spring Boot ReactJS - Spring Boot framework phát triển ứng dụng Java, cung cấp cho tính mạnh mẽ để xây dựng ứng dụng web dịch vụ web hiệu - ReactJS thư viện JavaScript phát triển Facebook, sử dụng để xây dựng giao diện người dùng đáng tin cậy tương tác ứng dụng web Mục tiêu đồ án tạo website Giúp hiểu rõ, sử dụng cơng nghệ tìm hiểu Để đạt mục tiêu này, sử dụng Spring Boot làm backend để xây dựng API xử lý logic nghiệp vụ Sử dụng ReactJS làm frontend để xây dựng giao diện người dùng tương tác gửi yêu cầu tới backend Chúng ta sử dụng RESTful API để truyền thông tin hai phần hệ thống Các công nghệ công cụ khác MongoDB , CSS, Bootstrap Git sử dụng trình phát triển đồ án Đồ án hướng đến việc rèn kỹ lập trình phát triển ứng dụng web, làm quen với hai công nghệ phổ biến Spring Boot ReactJS Ngồi ra, nhằm cung cấp cho nhìn tổng quan quy trình phát triển ứng dụng web từ việc thiết kế sở liệu, triển khai backend, xây dựng giao diện người dùng triển khai website Cơng cụ sử dụng: Visual Studio Code: IDE để xây dựng ứng dụng MongoDB Compass: Kiểm tra, quản lý sở liệu Postman: Hỗ trợ test API tạo Server II Xây dựng ứng dụng Tổng quan đề tài: - Tên website : DREAM HOLIDAY - Chức : Giúp cung cấp nơi cho khách hàng xem, đặt tour du lịch TRANG Đồ án - Triệu Tuấn Tú 2052103 Nền tảng phát triển: ReactJS, SpringBoot, MongoDB Mơ hình Client Server Kiến trúc lớp 1.1 Lý chọn đề tài: Trong đợt đại dịch COVID-19, xã hội phải trải qua giai đoạn cách ly điều tạo bùng nổ ngành du lịch sau dịch bệnh qua Với phát triển mạnh mẽ này, doanh nghiệp lĩnh vực du lịch cần phát triển website hỗ trợ đặt tour du lịch trực tuyến, điều trở nên vô cần thiết để tạo hội tiếp cận khách hàng dễ dàng tối ưu hố hoạt động thơng qua công nghệ Một website hỗ trợ đặt tour du lịch đóng góp quan trọng cho khách hàng doanh nghiệp kinh doanh cách sau: - Đối với khách hàng: Website cung cấp tảng cho phép khách hàng tiếp cận thông tin tour du lịch cách nhanh chóng, xác trực quan nhất, giảm thiểu thời gian công sức phải đến trực tiếp đại lý trước Khách hàng dễ dàng tìm hiểu tour du lịch, xem lịch trình, điểm đến, giá thông tin cần thiết khác Họ so sánh lựa chọn tour phù hợp với mong muốn ngân sách cách thuận tiện từ đâu với số thao tác website - Đối với doanh nghiệp: Website hỗ trợ đặt tour du lịch giúp doanh nghiệp tối ưu hóa q trình quản lý tour có Thơng qua website, doanh nghiệp dễ dàng cập nhật thơng tin tour, thay đổi lịch trình, giá chi tiết khác cách linh hoạt Họ thu thập thơng tin sở thích xu hướng khách hàng dễ dàng thông qua hệ thống đặt tour trực tuyến Dựa liệu này, doanh nghiệp phân tích đưa chiến lược kinh doanh hợp lý hơn, nhằm tăng cường hấp dẫn tour đáp ứng nhu cầu khách hàng cách tốt Tóm lại, việc phát triển website hỗ trợ đặt tour du lịch trực tuyến mang lại nhiều lợi ích cho khách hàng doanh nghiệp Đối với khách hàng, website cung cấp tiện ích tiếp cận thơng tin nhanh chóng tiện lợi, doanh nghiệp, tạo hội tối ưu hóa hoạt động kinh doanh tăng cường tương tác với khách hàng 1.2 Đối tượng hướng đến: Đối tượng website nhắm tới tất người có nhu cầu đặt tour, muốn du lịch - Những người trẻ muốn tự đặt tour du lịch Những người biết sử dụng internet giúp người khác đặt tour Những người muốn tiết kiệm thời gian không cần đến trung tâm, đại lý TRANG Đồ án Triệu Tuấn Tú 2052103 1.3 Kết mong đợi - Học cách phát triển ứng dụng web - Triển khai, hoàn thành sản phẩm - Áp dụng kiến thức học vào phát triển đồ án Phân tích thiết kế hệ thống 2.1 Xác định yêu cầu Các yêu cầu ứng dụng cần có như: - - Cho customer  Đăng nhập, đăng kí  Đổi mật  Thay đổi thơng tin cá nhân  Xem, tìm kiếm tour, địa điểm  Đặt tour  Đánh giá tour  Xem viết Cho Admin  Quản lý tour: thêm xóa sửa thơng tin  Quản lý địa điểm: thêm xóa sửa địa điểm  Quản lý viết: thêm xóa sửa viết  Xác nhận đơn đặt tour  Xem thống kê báo cáo TRANG Đồ án Triệu Tuấn Tú 2052103 Hình 1: Sơ đồ use case Actor Customer Admin Người sử dụng website Có thể thực chức để đặt tour Người quản lý website Kiểm soát, chỉnh sửa đối tượng có website Bảng 2: Danh sách tác nhân TRANG 10