星禾语开源项目

# 星禾语管理系统脚手架

[](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！