Zs Admin

Appearance

技术选型 ​

整体架构设计 ​

ZsAdmin 项目采用清晰的前后端分离架构，将前端、后端和文档网站三大部分有机结合，形成完整的开发生态系统。系统架构设计遵循模块化、分层化原则，确保各组件之间的高内聚、低耦合。

mermaid
graph TB
subgraph "前端应用"
A[Vue 3]
B[TypeScript]
C[Vite]
D[Arco Design Vue]
E[Pinia]
F[Vue Router]
end
subgraph "后端服务"
G[Spring Boot 3.x]
H[Java 17]
I[Spring Security]
J[MyBatis-Plus]
K[JWT]
L[Druid]
end
subgraph "基础设施"
M[MySQL]
N[Redis]
O[MinIO/OSS]
end
A --> |HTTP/REST API| G
B --> A
C --> A
D --> A
E --> A
F --> A
G --> M
G --> N
G --> O
style A fill:#409EFF,stroke:#333
style G fill:#67C23A,stroke:#333
style M fill:#E6A23C,stroke:#333

技术栈详解 ​

后端技术栈 ​

ZsAdmin 后端基于 Spring Boot 3.x 构建，采用 Java 17 作为开发语言，提供更好的性能和安全性。核心技术组件包括：

技术版本说明
Spring Boot3.2.4开箱即用的 Spring 应用开发框架
Java17企业级开发语言，提供更好的性能和安全性
Maven3.8+项目构建和依赖管理工具
MySQL9.0.0关系型数据库，用于存储系统数据
Druid1.2.23高性能数据库连接池
Spring Security内置认证授权框架
Spring Boot AOP内置面向切面编程
Lombok内置Java 代码简化工具

前端技术栈 ​

前端采用 Vue3 + TypeScript + Vite 构建，基于 Arco Design Vue 组件库，提供现代化的开发体验：

技术版本说明
Vue3.5.16渐进式 JavaScript 框架
TypeScript5.8.3类型安全的 JavaScript 超集
Vite6.3.5下一代前端构建工具
Arco Design Vue2.57.0基于 Vue 3 的企业级 UI 组件库
Pinia3.0.2Vue 3 官方推荐的状态管理库
Vue Router4.5.1Vue 官方路由管理器
Axios1.9.0基于 Promise 的 HTTP 客户端

目录结构 ​

后端目录结构 ​

├── zs-project-java/       # 后端根目录
│   ├── zs-admin/           # 主应用模块
│   ├── zs-common/          # 公共模块
│   │   ├── zs-common-aop/        # 切面编程模块
│   │   ├── zs-common-core/       # 核心工具类模块
│   │   ├── zs-common-mybatis/    # MyBatis配置模块
│   │   ├── zs-common-redis/      # Redis工具模块
│   │   └── zs-common-security/   # 安全配置模块
│   ├── zs-generator/       # 代码生成器模块
│   ├── zs-quartz/          # 定时任务模块
│   ├── zs-modules/         # 业务模块集合
│   │   ├── zs-file/              # 文件管理模块
│   │   ├── zs-mail/              # 邮件管理模块
│   │   ├── zs-sms/               # 短信管理模块
│   │   ├── zs-system/            # 系统管理模块
│   │   └── zs-websocket/         # WebSocket模块
│   └── pom.xml            # 父工程pom.xml

前端目录结构 ​

├── zs-ui-acro-design/      # 前端根目录
│   ├── config/             # Vite配置目录
│   │   ├── plugin/               # Vite插件配置
│   │   └── vite.config.*.ts      # Vite配置文件
│   ├── src/                # 源代码目录
│   │   ├── api/                  # API请求定义
│   │   ├── assets/               # 静态资源
│   │   │   └── icons/            # SVG图标
│   │   ├── components/           # 自定义组件
│   │   ├── directives/           # 自定义指令
│   │   ├── hooks/                # 自定义Hooks
│   │   ├── layouts/              # 布局组件.
│   │   ├── router/               # 路由配置
│   │   ├── stores/               # Pinia状态管理
│   │   ├── utils/                # 工具函数
│   │   ├── views/                # 页面组件
│   │   ├── App.vue               # 根组件
│   │   └── main.ts               # 入口文件
│   ├── .env                  # 环境变量配置
│   ├── package.json          # 项目依赖配置
│   └── vite.config.ts        # Vite主配置文件

核心功能模块 ​

后端核心模块 ​

模块主要功能
认证授权登录认证、Token 管理、权限校验、密码加密
系统管理用户管理、角色管理、菜单管理、字典管理、部门管理、岗位管理
文件管理文件上传、文件下载、文件预览
邮件管理邮件发送、邮件模板管理
短信管理短信发送、短信模板管理
定时任务定时任务管理、任务日志查询
代码生成代码生成器、模板管理、表结构管理
WebSocket实时消息推送、在线用户管理

前端核心模块 ​

模块主要功能
登录模块用户登录、退出登录、验证码
仪表盘数据统计、系统概览、快捷操作
系统管理用户管理、角色管理、菜单管理、字典管理、部门管理、岗位管理
文件管理文件上传、文件列表、文件预览
邮件管理邮件发送、邮件模板配置
短信管理短信发送、短信模板配置
定时任务任务管理、任务日志查询、任务执行
代码生成代码生成、表结构设计、模板配置
个人中心个人信息管理、密码修改、消息通知
日志管理操作日志查询、登录日志查询

技术亮点 ​

后端技术亮点 ​

  1. 模块化架构：基于 Spring Boot 构建，支持模块化扩展，便于功能拆分和独立部署
  2. 权限管理：基于 RBAC 模型，支持细粒度的权限控制，可精确到按钮级别
  3. 代码生成：内置代码生成器，支持生成前后端代码，提高开发效率
  4. 安全设计：采用 Spring Security + JWT 认证，密码加密存储，防止 SQL 注入和 XSS 攻击
  5. 监控中心：集成 Spring Boot Actuator，提供系统监控和健康检查
  6. 切面编程：使用 AOP 实现日志记录、权限校验、事务管理等横切关注点

前端技术亮点 ​

  1. 现代化技术栈：采用 Vue3 + TypeScript + Vite 构建，具有更好的性能和开发体验
  2. 组件化设计：基于 Arco Design Vue 组件库，采用组件化开发模式，提高代码复用性和可维护性
  3. 类型安全：使用 TypeScript，提供更好的类型检查和开发体验
  4. 状态管理：采用 Pinia 进行状态管理，支持持久化存储
  5. 国际化支持：集成 Vue I18n，支持多语言切换
  6. SVG 图标管理：使用 Vite Plugin SVG Icons 管理 SVG 图标，支持按需加载
  7. 性能优化：采用懒加载、代码分割、缓存等技术，提高页面加载速度
  8. 主题定制：支持动态主题切换，提供丰富的主题配置选项

学习资源 ​

官方文档 ​