# 星禾语管理系统脚手架[](https://vuejs.org/)[](https://spring.io/projects/spring-boot)[](https://element-plus.org/)[](https://sa-token.dev33.cn/)一个基于 Vue 3 + Spring Boot + Element Plus 的现代化轻量级管理系统脚手架，提供完整的 RBAC 权限管理解决方案,没有过多的复杂功能,个人私活/二开利器。## ? 项目截图## ✨ 项目特色### ? 精心定制的UI设计- **基于 Element Plus 深度定制**：在 Element Plus 基础上重新设计了色彩体系,以科技蓝为主色调进行配色- **简约现代风格**：采用简约的视觉设计，避免华丽或刺眼的元素- **表格自适应**：智能表格布局，大屏幕无空白，小屏幕可滚动### ?️ 纯净版脚手架- **零业务代码**：专注于框架搭建，不包含具体业务逻辑- **开箱即用**：提供完整的用户、角色、权限、菜单管理功能- **模块化设计**：清晰的代码结构，便于二次开发- **标准化规范**：遵循最佳实践，代码规范统一### ? 完善的权限体系- **RBAC 权限模型**：基于角色的访问控制，权限管理清晰- **菜单权限集成**：权限管理直接集成到菜单管理中，操作便捷- **动态路由**：根据用户权限动态生成路由，安全可靠- **状态验证**：完善的角色状态验证，禁用角色立即生效## ? 技术栈### 前端技术- **Vue 3** - 渐进式 JavaScript 框架- **Vite** - 下一代前端构建工具- **Element Plus** - 基于 Vue 3 的组件库- **Pinia** - Vue 的状态管理库- **Vue Router** - Vue.js 官方路由管理器- **Axios** - HTTP 客户端- **SCSS** - CSS 预处理器### 后端技术- **Spring Boot ** - Java 应用框架- **Sa-Token** - 轻量级权限认证框架- **MyBatis Plus** - MyBatis 增强工具- **MySQL** - 关系型数据库- **Maven** - 项目构建工具## ? 项目结构```├── xm-vue/ # 前端项目│ ├── src/│ │ ├── api/ # API 接口│ │ ├── components/ # 公共组件│ │ ├── layout/ # 布局组件│ │ ├── router/ # 路由配置│ │ ├── stores/ # 状态管理│ │ ├── styles/ # 样式文件│ │ ├── utils/ # 工具函数│ │ └── views/ # 页面组件│ └── package.json├── xm-boot-huayi/ # 后端项目│ ├── xm-api-business/ # 业务模块│ ├── xm-common/ # 公共模块│ ├── xm-model/ # 实体模块│ └── sql/ # 数据库脚本└── README.md```## ? 核心功能### ? 用户管理- 用户增删改查- 用户状态管理（启用/禁用）- 密码重置功能- 角色分配管理- 批量操作支持### ? 角色管理- 角色增删改查- 角色状态管理- 权限分配功能- 菜单权限分配- 操作权限分配### ? 菜单管理- 菜单树形管理- 菜单权限集成- 动态路由生成- 菜单状态控制- 图标配置支持### ? 权限管理- 权限增删改查- 权限与菜单关联- 权限状态管理- 权限编码规范- 权限描述管理### ?️ 安全特性- JWT Token 认证- 角色状态验证- 权限实时验证- 路由权限控制- 接口权限校验## ? UI 设计特色### 色彩体系- **主色调**：采用蓝色系，专业稳重- **辅助色**：绿色（成功）、橙色（警告）、红色（错误）- **中性色**：灰色系，层次分明- **背景色**：浅色背景，视觉舒适### 组件定制- **按钮样式**：支持文本风格和边框风格- **表格样式**：自适应宽度，响应式设计- **表单样式**：统一的表单布局和验证- **卡片样式**：简洁的卡片设计### 交互体验- **加载状态**：优雅的加载动画- **反馈提示**：及时的操作反馈- **错误处理**：友好的错误提示- **操作确认**：重要的操作确认机制## ? 快速开始### 环境要求- Node.js >= 16.0.0- Java >= 8- MySQL >= 5.8- Maven >= 3.6### 前端启动```bash# 进入前端目录cd xm-vue# 安装依赖npm install# 启动开发服务器npm run dev```### 后端启动```bash# 进入后端目录cd xm-boot-huayi# 编译项目mvn clean compile# 启动应用mvn spring-boot:run```### 数据库初始化```bash# 执行数据库脚本mysql -u root -p < sql/sql.sql```## ? 使用指南### 1. 用户登录- 默认管理员账号：admin / 123456- 支持用户名密码登录- 登录后自动获取用户权限### 2. 权限配置- 在菜单管理中创建菜单- 在权限管理中创建权限- 在角色管理中分配权限- 在用户管理中分配角色### 3. 开发扩展- 新增页面：在 `views` 目录下创建页面组件- 新增接口：在 `api` 目录下创建接口文件- 新增权限：在菜单管理中配置权限标识- 新增路由：系统会根据菜单自动生成路由## ? 配置说明### 前端配置```javascript// vite.config.jsexport default defineConfig({ server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }})```### 后端配置> 修改数据库信息```yaml# application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/xm_system username: root password: 123456```> 修改Redis信息```yamlspring: redis: host: 127.0.0.1 port: 6379 database: 0 timeout: 10000ms lettuce: pool: max-active: 8 max-wait: -1ms max-idle: 8 min-idle: 0 password: ```> 项目基于saToken-redis来实现缓存，如果不需要请移除```xml cn.dev33 sa-token-redis-template ${saToken.version} ```## ? 开源协议本项目采用 [MIT](LICENSE) 开源协议。## ? 致谢- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架- [Element Plus](https://element-plus.org/) - 基于 Vue 3 的组件库- [Spring Boot](https://spring.io/projects/spring-boot) - Java 应用框架- [Sa-Token](https://sa-token.dev33.cn/) - 轻量级权限认证框架## ? 联系我们- 邮箱：wodyiyi@163.com---⭐ 如果这个项目对您有帮助，请给我们一个 Star！