# 星禾语管理系统脚手架 [](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.js export default defineConfig({ server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }) ``` ### 后端配置 > 修改数据库信息 ```yaml # application.yml spring: datasource: url: jdbc:mysql://localhost:3306/xm_system username: root password: 123456 ``` > 修改Redis信息 ```yaml spring: 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！