Thiết kế và Triển khai Hệ thống Quản lý Mua sắm Vật Kho dựa trên JavaWeb với Vue.js

Kiến trúc hệ thống

Hệ thống áp dụng kiến trúc tách biệt giữa frontend và backend. Phía frontend sử dụng framework Vue.js, trong khi backend được xây dựng dựa trên Spring Boot. Cơ sở dữ liệu sử dụng MySQL 8.0, với giao tiếp dữ liệu qua RESTful API. Hệ thống bao gồm các module: xác thực người dùng, đề xuất mua hàng, quản lý kho, quản lý nhà cung cấp và báo thống kê.

Công nghệ được sử dụng

Frontend: Vue 3 + Element Plus + Axios + Vue Router + Pinia cho quản lý trạng thái. Backend: Spring Boot 2.7 + MyBatis-Plus + Spring Security + JWT cho xác thực. Công cụ phát triển đề xuất: VS Code và IntelliJ IDEA, với quản lý phụ thuộc bằng Maven và npm.

Thiết kế cơ sở dữ liệu

Các bảng chính bao gồm:

  • nguoi_dung: lưu trữ thông tin tài khoản, mật khẩu mã hóa, vai trò
  • vat_tu: ghi mã vật tư, tên, thông số kỹ thuật
  • nha_cung_cap: quản lý thông tin nhà cung cấp
  • don_dat_hang: kết nối vật tư, số lượng, người đề xuất
  • kho_hang: dữ liệu tồn kho thời gian thực
CREATE TABLE `don_dat_hang` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `vat_tu_id` bigint NOT NULL,
  `so_luong` int NOT NULL,
  `nguoi_dung_id` bigint NOT NULL,
  `trang_thai` varchar(20) DEFAULT 'CHO_DUYET',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Triển khai các chức năng chính

Module xác thực người dùng
Triển khai ký và xác thực JWT token, frontend sử dụng axios interceptor để thêm tiêu đề Authorization. Kiểm soát quyền sử dụng mô hình RBAC, phân biệt vai trò quản trị viên, nhân viên mua hàng và người dùng thông thường.

Quy trình mua hàng
Sau khi đề xuất mua hàng được gửi, hệ thống kích hoạt quy trình phê duyệt bằng state machine với các trạng thái: CHO_DUYET/DUYET_CHO_TU_CHOI/GIAO_HANG. Sử dụng WebSocket để thực hiện thông báo thời gian thực.

// Ví dụ component Vue
const guiDonHang = () => {
  axios.post('/api/don-hang', duLieuDonHang.value)
    .then(phanHoi => {
      ThongBao.thanhCong('Gửi thành công');
      chuyenHuong('/don-hang');
    });
};

Giai đoạn phát triển

  1. Phân tích yêu cầu và thiết kế prototype (2 tuần)
  2. Xây dựng kiến trúc cơ sở (1 tuần): hoàn thiện scaffolding và cấu hình CI/CD
  3. Phát triển chức năng cốt lõi (4 tuần): phát triển song song theo module
  4. Kiểm thử tích hợp hệ thống (2 tuần): bao gồm kiểm tra hiệu năng và bảo mật
  5. Triển khai (1 tuần): sử dụng Docker để đóng gói

Chiến lược kiểm thử

Áp dụng chiến lược kiểm thử phân tầng:

  • Kiểm thử đơn vị: JUnit 5 (backend) + Jest (frontend)
  • Kiểm thử API: bộ kiểm thử tự động bằng Postman
  • Kiểm thử UI: kiểm thử end-to-end với Cypress
  • Kiểm thử hiệu năng: JMeter mô phỏng yêu cầu đồng thời

Triển khai hệ thống

Sử dụng Nginx làm máy chủ tài nguyên tĩnh và reverse proxy, dịch vụ backend được编排 bằng Docker Compose. Cơ sở dữ liệu cấu hình nhân bản master-slave, sao lưu định kỳ hàng ngày. Giám sát sử dụng kết hợp Prometheus + Grafana.

Công nghệ phát triển

Ngôn ngữ và framework backend hỗ trợ:

  • Java (SSM/springboot/springcloud) - IDE: IDEA/Eclipse
  • Node.js + Vue.js - VS Code
  • Python (Flask/Django) - PyCharm/VS Code
  • PHP (ThinkPHP/Laravel) - HBuilderX

Framework frontend: Vue.js
Cơ sở dữ liệu: MySQL (phiên bản không giới hạn)
JDK: phiên bản không giới hạn, tối thiểu JDK 1.8
Công nghệ: JAVA + MySQL + Springboot + Vue + Maven
Công cụ quản lý CSDL: Navicat/SQLyog

MySQL cung cấp các công cụ quản lý trực quan tốt, bao gồm MySQL Workbench. Những công cụ này không chỉ cung cấp giải pháp toàn diện cho thiết kế, phát triển, quản lý và bảo trì cơ sở dữ liệu mà còn giúp việc quản lý trở nên đơn giản thông qua giao diện đồ họa. Điều này giúp tối ưu hóa thiết kế và quản lý hàng ngày, đảm bảo hệ thống ổn định và dữ liệu chính xác.

Spring Framework là mô hình lập trình và cấu hình toàn diện, cung cấp hỗ trợ cơ sở hạ tầng toàn diện cho các ứng dụng doanh nghiệp Java hiện đại. Spring được thiết kế để giải quyết sự phức tạp trong phát triển ứng dụng doanh nghiệp, cung cấp cách tiếp cận đơn giản hơn để đạt được sự kết nối lỏng lẻo giữa các thành phần. Điều này đặc biệt quan trọng đối với hệ thống cần tích hợp nhiều công nghệ và thành phần, bao gồm thao tác cơ sở dữ liệu, dịch vụ web và kiểm soát bảo mật.

Node.js là môi trường chạy JavaScript dựa trên engine V8 của Chrome, cho phép JavaScript chạy trên máy chủ

Java có các đặc trưng điển hình của kế thừa, đóng gói và đa hình, có thể sử dụng lớp và interface, thực hiện nhập/xuất luồng dữ liệu, hỗ trợ đa luồng và phản chiếu, cũng như lập trình mạng. Đa hình của Java cung cấp phương thức ghi đè và tái sử dụng, ngôn ngữ Java không chỉ hỗ trợ phát triển framework backend mà còn có thể tích hợp với web frontend, hỗ trợ các thẻ HTML, CSS, JS, Vue, Node.js để phát triển ứng dụng doanh nghiệp đầy đủ chức năng.

Spring đóng gói nhiều thư viện Java, trong quá trình phát triển không cần viết nhiều lớp phức tạp, chỉ cần tham chiếu framework Spring, có thể hoàn thành nhu cầu phát triển nhanh chóng. Do đó, mã logic Java trở nên rõ ràng hơn, độ kết hợp giữa các lớp được giảm bớt, khả năng tái sử dụng được phát huy tốt, giúp giảm độ khó phát triển. Hai đặc tính chính là dependency injection và tư duy hướng interface; tư duy AOP (aspect-oriented).

Vue loại bỏ thao tác DOM của JavaScript, có thể hoàn thành ràng buộc dữ liệu nhanh hơn. Vue thực hiện framework MVVM, xử lý logic nghiệp vụ qua mô hình backend và ràng buộc dữ liệu vào tầng view, hiển thị các điều khiển trên view, ràng buộc dữ liệu đối tượng Model vào các điều khiển trang, đồng bộ hóa dữ liệu tự động. Khi dữ liệu Model thay đổi, View trang có thể thay đổi tự động theo dữ liệu.

Thẻ: Vue.js JavaWeb Spring Boot mysql Quản lý kho

Đăng vào ngày 5 tháng 6 lúc 03:32