Kiến trúc kỹ thuật phiên bản v2 của mạng xã hội Bouyouquan - Lô Đề Nohu76

| Mar 20, 2025 | 4 min read

Ngày 01 tháng 11 năm 2024 - Công nghệ máy tính

Mạng xã hội Bouyouquan phiên bản v1 (mã nguồn: boyouquan) là một ứng dụng Java tích hợp cả giao diện trước và sau, được quản lý bằng Maven và sử dụng công nghệ Spring Boot + Thymeleaf + MyBatis, trong đó Thymeleaf chịu trách nhiệm về việc hiển thị trang web.

Sau quá trình cải tiến, phiên bản v2 (mã nguồn giao diện trước: boyouquan-ui, mã nguồn phía sau: boyouquan-api) đã tách rời phần giao diện trước và sau của dự án đơn lẻ. Giao diện trước hiện sử dụng khung React; phần phía sau vẫn giữ nguyên Spring Boot + MyBatis nhưng loại bỏ phần hiển thị của Thymeleaf, biến nó thành một nhà cung cấp API REST thuần túy.

Bài viết này sẽ tập trung giới thiệu kiến trúc kỹ thuật của giao diện trước và sau của phiên bản v2 Bouyouquan, cũng như Rio66 Bet Tại Game Bài Đổi Thưởng Nạp Bằng Sms kiến trúc triển khai.

1. Kiến trúc giao diện trước

Giao diện trước của Bouyouquan được viết bằng React, với công cụ quản lý phụ thuộc và xây dựng là npm, và công cụ đóng gói là webpack. Cấu trúc dự án chủ yếu chia thành hai lớp: một là lớp trang, hai là lớp thành phần, ngoài ra còn có các hằng số và bộ công cụ hỗ trợ cho hai lớp này. Việc gửi yêu cầu đến phía sau sử dụng phương pháp gốc fetch().

!Kiến trúc dịch vụ giao diện trước của Bouyouquan
(Kiến trúc dịch vụ giao diện trước của Bouyouquan)

2. Kiến trúc phía sau

Dịch vụ phía sau của Bouyouquan cung cấp API REST cho giao diện trước, toàn bộ sử dụng khung Spring Boot + MyBatis. Trong đó, Spring Boot là khung tổng thể của dự án, mô-đun SpringMVC chịu trách nhiệm xử lý yêu cầu và tiêm phụ thuộc, mô-đun MyBatis chịu trách nhiệm truy cập cơ sở dữ liệu. Cơ sở dữ liệu được sử dụng là MySQL.

Kiến trúc dịch vụ phía sau của Bouyouquan được minh họa qua hình ảnh dưới đây, từ trên xuống dưới áp dụng mô hình ba tầng kinh điển: Tầng kiểm soát (Controller Layer), Tầng dịch vụ (Service Layer) và Tầng truy cập dữ liệu (DAO Layer).

  • Tầng kiểm soát bao gồm một nhóm các bộ điều khiển SpringMVC, chịu trách nhiệm nhận yêu cầu, xác thực tham số, gọi dịch vụ và trả về kết quả;
  • Tầng dịch vụ bao gồm một nhóm dịch vụ, chịu trách nhiệm xử lý logic nghiệp vụ cốt lõi;
  • Tầng truy cập dữ liệu bao gồm một nhóm giao diện MyBatis, chịu trách nhiệm tương tác với cơ sở dữ liệu.

Ngoài ra, Tầng lập lịch (Scheduler Layer) và Tầng trợ giúp (Helper Layer) lần lượt chứa một nhóm tác vụ định thời và các lớp công cụ trợ giúp.

!Kiến trúc dịch vụ phía sau của Bouyouquan
(Kiến trúc dịch vụ phía sau của Bouyouquan)

3. Kiến cổng game trực tuyến r88 trúc triển khai

Khi triển khai dịch vụ giao diện trước của Bouyouquan, công cụ webpack sẽ được sử dụng để xây dựng dự án gốc React thành các tệp tĩnh thuần túy (JS, HTML và CSS), sau đó đặt vào thư mục tương ứng.

Phía sau khi khởi động sẽ là một chương trình Java phổ thông.

Vì vậy, sử dụng Nginx để thực hiện đại lý ngược đồng thời cho cả giao diện trước và sau là đủ để cung cấp dịch vụ bên ngoài, kiến trúc triển khai được minh họa qua hình ảnh dưới đây.

!Kiến trúc triển khai của Bouyouquan
(Kiến trúc triển khai của Bouyouquan)

4. Thiết lập và chạy chương trình

Về cách thiết lập và chạy chương trình giao diện trước hoặc phía sau tại địa phương, xin tham khảo tài liệu README trên GitHub tương ứng.

5. Kết luận bài viết

Như vậy, bài viết này đã giới thiệu kiến trúc giao diện trước, phía sau và kiến trúc triển khai của phiên bản v2 Bouyouquan. Một mặt là để tổng kết kiến thức, mặt khác là để hỗ trợ những bạn sử dụng mã nguồn mở của Bouyouquan.

#Thiết kế kiến trúc #React #Phát triển giao diện trước #Spring #Java