Xây dựng website bán quần áo với công nghệ Spring Boot và ReactJS
MỤC LỤC
MỤC TIÊU CỦA ĐỀ TÀI Phía người dùng
- Thống kê doanh thu của cửa hàng bao gồm: xem thông tin doanh thu, xuất file excel (.xlsx) danh sách hóa đơn theo khoảng ngày chỉ định.
KHẢO SÁT HIỆN TRẠNG VÀ Mễ HèNH HểA YấU CẦU 1.1. KHẢO SÁT HIỆN TRẠNG
XÁC ĐỊNH YÊU CẦU 1. Yêu cầu chức năng
Thư viện này được sử dụng để tạo ra các ứng dụng trang web hấp dẫn với hiệu quả cao, tốc độ tải nhanh và khả năng tái sử dụng mã nguồn cao. Thư viện này ban đầu được phát triển và duy trì bởi Facebook nay còn được gọi với cái tên Meta, và sau đó dần được ứng dụng WhatsApp và Instagram. Lập trình viên có thể chia nhỏ các cấu trúc của trang web hay còn gọi là component để tái sử dụng hoặc dễ quản lý hơn trong các folder khác nhau.
Vì thế ý tưởng sử dụng DOM ảo giúp ReactJS biết chính xác khi nào cần render lại hoặc khi nào bỏ đi những phần tử của DOM chính vì phát hiện ra những thay đổi trên data. Cơ chế hoạt động của Tailwind CSS là sẽ tiến hành quét hết tất cả các tệp HTML, thành phần JavaScript hoặc bất kì các template nào khác để tìm tên lớp (class name), sau đó sẽ tạo ra các kiểu CSS tương ứng với các tên lớp vừa quét được rồi ghi vào một tệp tĩnh CSS. - Sau khi build xong thì chúng ta có thể sử dụng Taildwind CSS như bình thường và hoàn tất quá trình tích hợp Tailwind CSS cùng với ReactJS.
- Việc sử dụng Tailwind css khiến cho việc thiết kế trang web dễ dàng hơn bằng cách nhúng các thuộc tính được định nghĩa sẵn vào class của component đó. Trong đoạn mã trên đã áp dụng tính năng config các tên lớp do người phát triển tự định nghĩa để tối ưu hơn trong việc thay đổi toàn bộ màu sắc hay các thuộc tính khác của toàn trang web khi sử dụng các tên lớp tự định nghĩa.
CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END 1. RESTFUL API
- Có nhúng sẵn trực tiếp các server như Tomcat, Jetty, Undertow - Cung cấp các dependency cơ bản để đơn giản hóa các cấu hình - Tự động cấu hình thư viện Spring hay của các bên thứ ba khi khả thi - Cung cấp các chỉ số, độ ổn định và cấu hình ngoại hóa. MySQL là 1 hệ thống quản trị về cơ sở dữ liệu với mã nguồn mở (được gọi tắt là RDBMS) và đang hoạt động theo mô hình dạng client-server. Khả năng sao chép dữ liệu và phân vùng bảng để có hiệu suất và độ bền tốt hơn Truy cập dữ liệu của mình bằng các lệnh SQL tiêu chuẩn.
Là một framework trong hệ sinh thái của Spring Framework, nó giúp chúng ta phân quyền và xác thực người dùng trước khi cho phép họ truy cập vào các tài nguyên của hệ thống. Với authentication thì framework sẽ cung cấp các service giúp lập trình viên dễ dàng xác thực người dùng khi người dung đăng nhập vào hệ thống. Áp dụng vào trong đề tài là sử dụng lớp User Detail Service để kiểm tra tài khoản, mật khẩu của người dùng khi đăng nhập vào hệ thống.
Cách mà lớp User Detail Service sẽ lấy username, password và role từ payload, đồng thời truy vấn xuống database lấy password, role theo username của người dùng đó. Việc sử dụng User detail service được cung cấp từ spring framework thì giúp cho người lập trình viên tiện dụng trong việc phân quyền và bảo mật hệ thống.
THIẾT KẾ PHẦN MỀM 3.1. Mễ HèNH HểA YấU CẦU
CÀI ĐẶT VÀ KIỂM THỬ 4.1. CÀI ĐẶT
Thêm voucher Quản trị viên Quản trị viên thêm voucher vào hệ thống Chỉnh sửa voucher Quản trị viên Quản trị viên chỉnh sửa voucher trong hệ. Kiểm thử - Nhập đầy đủ Thông báo đăng Thông báo chức năng thông tin đăng kí thành công và đăng kí thành. Kiểm thử Ở thanh header Trang hiển thị Trang hiển thị chức năng nhập vào ô tìm danh sách sản danh sách sản.
Kiểm thử Ở màn hình chi Thông báo đặt Thông báo đặt chức năng tiết sản phẩm, hàng thành công hàng thành. Kiểm thử - Ở trang giỏ hàng Trang hiển thị đã Trang hiển thị chức năng chọn phương thức đặt hàng thành đã đặt hàng. 13 xóa địa chỉ địa chỉ giao hàng database và cập dưới database Đạt giao hàng nhấn nút xóa nhật lại danh sách và cập nhật lại.
Kiểm thử -Ở trang đánh giá Đánh giá sẽ được Đánh giá sẽ chức năng sản phẩm nhập hệ thống cập nhật được hệ thống. Kiểm thử Ở trang thanh Hệ thống hiển thị Hệ thống hiển chức năng toán người dùng thông báo mã thị thông báo thêm áp nhập mã voucher voucher đó có mã voucher đó dụng và nhấn nút áp được áp dụng hay có được áp. Kiểm thử chức - Ở trang Quản lý Thông báo Thông báo năng chỉnh sửa sản phẩm chọn chỉnh sửa chỉnh sửa.
Kiểm thử chức - Ở trang Quản lý Thông báo xóa Thông báo năng xóa thuộc màu chọn Xóa thành công. Kiểm thử chức - Ở trang Quản lý Thông báo Thông báo năng chỉnh sửa màu chọn Chỉnh chỉnh sửa chỉnh sửa. Kiểm thử chức - Ở trang Quản lý Thông báo xóa Thông báo năng xóa thuộc màu chọn Xóa thành công.
Kiểm thử chức - Ở trang Quản lý Thông báo Thông báo năng vô hiệu đánh giá chọn nút đánh giá bị vô đánh giá bị hóa đánh giá vô hiệu hóa hiệu hóa. Kiểm thử chức - Ở trang Quản lý Thông báo Thông báo năng sửa voucher chọn voucher đã sửa voucher đã. Người quản trị có thể quản lý được các thuộc tính sản phẩm, quán lý được từng sản phẩm và đơn hàng.