系统架构图

系统架构图（文字描述）

---

后端架构

技术栈：

• 核心框架：Spring Boot
• ORM框架：MyBatis-Plus
• 代码生成工具：MyBatis-Plus Generator
• API文档：Swagger
• 模板引擎：Freemarker
• 数据库：MySQL
• 构建工具：Maven

模块分层：

1. 控制层（Controller）：

   • 处理HTTP请求，调用Service层接口。
   • 使用@RestController标注，返回统一封装的Result对象。
   • 跨域配置：通过CorsConfig类实现全局跨域支持。

2. 服务层（Service）：

   • 业务逻辑处理，依赖Mapper层操作数据库。
   • 接口继承IService，实现类继承ServiceImpl。

3. 数据访问层（Mapper）：

   • 使用MyBatis-Plus的BaseMapper，支持通用CRUD。
   • 分页插件：PaginationInnerInterceptor。

4. 实体层（Entity）：

   • 数据库表映射的Java实体类，使用Lombok简化代码。

第三方依赖：

• mybatis-plus-boot-starter（MyBatis-Plus核心）
• spring-boot-starter-swagger（API文档生成）
• freemarker（代码生成模板引擎）

---

前端架构

技术栈：

• 核心框架：Vue.js（Vue 2.x）
• UI组件库：Element-UI
• 状态管理：Vuex
• 路由管理：Vue Router
• HTTP请求库：axios
• 构建工具：npm

模块分层：

1. 视图层（Components）：

   • 页面组件：登录页、用户管理页、菜单导航页等。
   • 使用Element-UI组件（如el-table、el-form）。

2. 路由层（Router）：

   • 动态路由生成：根据后端返回的菜单数据动态注册路由。
   • 路由守卫：处理权限跳转。

3. 状态管理层（Store）：

   • 使用Vuex管理全局状态（如用户登录信息、菜单数据）。

4. 请求封装层（axios）：

   • 统一封装请求拦截和响应处理。
   • 全局配置API地址，支持跨域请求。

第三方依赖：

• element-ui（UI组件库）
• vue-router（路由管理）
• vuex（状态管理）
• axios（HTTP请求库）

---

数据库

• 类型：MySQL
• 表结构：
  • 用户表（user）：存储账号、密码、角色等信息。
  • 菜单表（menu）：支持动态路由生成（未完全展示，需根据文档补充）。
• 连接配置：

  spring.datasource.url=jdbc:mysql://localhost:3306/wms
  

---

第三方服务与工具

• 代码生成：MyBatis-Plus Generator + Freemarker
• API文档：Swagger
• 开发工具：
  • 后端：IntelliJ IDEA
  • 前端：Node.js + Vue CLI

---

系统交互流程

1. 前端通过axios发送请求到后端API（如http://localhost:8090/user/list）。
2. 后端Spring Boot处理请求，调用MyBatis-Plus操作数据库，返回统一封装的Result数据。
3. 前端根据响应数据更新Vue组件状态（Vuex）或动态生成路由（Vue Router）。

---

系统架构图

以下为基于SpringBoot + Vue前后端分离的仓库管理系统（WMS）的详细架构及技术组成：

---

1. 前端架构（Vue.js）

• 核心框架: Vue.js
• UI框架: Element-UI
• 路由管理: Vue Router (@3.5.4)
• 状态管理: Vuex (@3.0.0)
• HTTP请求库: Axios
• 构建工具: Vue CLI、Babel、Webpack
• 第三方依赖:
  • element-ui（UI组件库）
  • axios（HTTP客户端）
  • vue-router（路由管理）
  • vuex（全局状态管理）

功能模块:

• 登录认证
• 动态路由（基于角色权限）
• 用户管理、管理员管理
• 表格展示与分页
• 表单验证（自定义规则）
• 跨域请求处理

---

2. 后端架构（SpringBoot）

• 核心框架: Spring Boot
• ORM框架: MyBatis-Plus (v3.4.1)
• API文档: Swagger2 (Springfox)
• 代码生成器: MyBatis-Plus Generator + Freemarker模板引擎
• 依赖管理: Maven
• 第三方依赖:
  • mybatis-plus-boot-starter（数据库操作）
  • mybatis-plus-generator（代码生成）
  • freemarker（模板引擎）
  • spring-boot-starter-swagger（API文档）
  • spring-boot-starter-web（Web支持）

功能模块:

• 用户增删改查（CRUD）
• 分页查询（MyBatis-Plus分页插件）
• 统一响应封装（Result类）
• 跨域配置（CorsConfig）
• 数据库事务管理

---

3. 数据库

• 数据库类型: MySQL
• 关键表设计:
  • user（用户表）
  • menu（动态菜单表，用于权限管理）
• 配置:
  • 字符集: UTF-8
  • 时区: GMT+8
  • 连接池: Spring Boot默认（HikariCP）

---

4. 第三方工具与中间件

• 开发工具: IntelliJ IDEA
• 版本控制: Git
• 包管理:
  • 后端: Maven (pom.xml)
  • 前端: npm (package.json)
• 跨域处理: Spring Boot CorsConfig
• 模板引擎: Freemarker（用于MyBatis-Plus代码生成）

---

5. 交互流程

1. 前端通过Axios发送HTTP请求到后端API。
2. 后端SpringBoot处理请求，调用MyBatis-Plus操作MySQL数据库。
3. 数据返回后，前端Vue.js配合Element-UI渲染页面，Vuex管理全局状态（如用户登录信息）。
4. 动态路由根据用户权限从数据库加载菜单配置，生成可访问的路由。

---

架构图简示

+-------------------+     HTTP (RESTful API)     +-------------------+     JDBC      +-------------+  
|                   | <------------------------> |                   | <-----------> |             |  
|   Vue.js前端      |                            | SpringBoot后端    |              | MySQL数据库 |  
|   - Element-UI    |     Axios请求/响应         | - MyBatis-Plus    |              | - user表    |  
|   - Vue Router    |                            | - Swagger2        |              | - menu表    |  
|   - Vuex          |                            | - 代码生成器      |              +-------------+  
+-------------------+                            +-------------------+  

---

注：以上技术栈及版本均基于提供的项目文件内容整理，关键版本如MyBatis-Plus 3.4.1、Vue Router 3.5.4等需保持一致以避免兼容性问题。