# user-manage-frontend-2

**Repository Path**: dengkegit/user-manage-frontend-2

## Basic Information

- **Project Name**: user-manage-frontend-2
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 用户管理系统

一个基于 Vue3 + Element Plus 和 Spring Boot + MyBatis-Plus 的前后端分离用户管理系统。

## 技术栈

### 前端
- Vue 3
- Element Plus
- Vue Router
- Pinia（状态管理）
- Axios（HTTP 请求）

### 后端
- Java 8
- Spring Boot 2.7.18
- MyBatis-Plus 3.5.3.1
- MySQL 8.0
- JWT（身份认证）

## 项目结构

```
user-manage/
├── database/              # 数据库相关
│   └── init.sql          # 数据库初始化脚本
├── user-manage-backend/  # 后端工程
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/usermanage/
│   │   │   │   ├── config/        # 配置类
│   │   │   │   ├── controller/    # 控制器
│   │   │   │   ├── dto/           # 数据传输对象
│   │   │   │   ├── entity/        # 实体类
│   │   │   │   ├── interceptor/   # 拦截器
│   │   │   │   ├── mapper/        # Mapper 接口
│   │   │   │   ├── service/       # 服务层
│   │   │   │   ├── util/          # 工具类
│   │   │   │   └── UserManageBackendApplication.java
│   │   │   └── resources/
│   │   │       ├── application.yml
│   │   │       └── mapper/        # MyBatis XML
│   │   └── test/
│   │       └── java/
│   └── pom.xml
└── user-manage-frontend/  # 前端工程
    ├── src/
    │   ├── api/           # API 接口
    │   ├── components/    # 组件
    │   ├── layout/        # 布局组件
    │   ├── router/        # 路由配置
    │   ├── stores/        # 状态管理
    │   ├── utils/         # 工具函数
    │   ├── views/         # 页面视图
    │   ├── App.vue
    │   └── main.js
    ├── index.html
    ├── package.json
    └── vite.config.js
```

## 功能特性

### 后端功能
- ✅ 用户登录认证（JWT Token + Cookie 存储）
- ✅ 退出登录
- ✅ JWT Token 续期（Refresh Token 机制）
- ✅ 前端 Token 自动刷新
- ✅ 用户增删改查
- ✅ 角色管理
- ✅ 菜单权限管理
- ✅ 基于角色的权限控制（RBAC）
- ✅ Cookie 和 localStorage 双重存储机制

### 前端功能
- ✅ 用户登录页面
- ✅ 主页（根据角色显示不同内容）
- ✅ 用户管理页面（CRUD 操作）
- ✅ 角色管理页面
- ✅ 权限配置页面
- ✅ 根据角色权限动态生成路由菜单
- ✅ 前端 Token 自动刷新
- ✅ Cookie 存储 Token（支持自动携带）
- ✅ 权限按钮控制

### 角色权限
- **管理员（ADMIN）**：可以访问所有页面和功能
- **普通用户（USER）**：只能访问首页

## 快速开始

### 1. 数据库初始化

#### 方式一：全新安装（推荐）

```bash
# 登录 MySQL
mysql -u root -p

# 执行初始化脚本（仅支持工号登录）
source database/init_employee_no_only.sql;
```

#### 方式二：已有系统升级

如果已经执行过其他版本的 `init.sql`，只需执行迁移脚本：

```bash
# 登录 MySQL
mysql -u root -p

# 执行迁移脚本
source database/migrate_employee_no_only.sql;
```

### 2. 启动后端

```bash
cd user-manage-backend

# 使用 Maven 运行
mvn spring-boot:run

# 或者先打包再运行
mvn clean package
java -jar target/user-manage-backend-1.0.0.jar
```

后端服务将在 http://localhost:8080 启动

### 3. 启动前端

```bash
cd user-manage-frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

前端服务将在 http://localhost:3000 启动

## 测试账号

### 管理员账号
- 用户名：管理员
- **工号**：ADMIN-001
- 密码：123456
- 权限：可访问所有页面

**仅支持工号登录**：
- 工号：`ADMIN-001`
- 密码：`123456`

### 普通用户账号
- 用户名：普通用户
- **工号**：USER-001
- 密码：123456
- 权限：只能访问首页

**仅支持工号登录**：
- 工号：`USER-001`
- 密码：`123456`

## API 接口文档

### 用户相关
- POST `/api/user/login` - 用户登录
- POST `/api/user/refresh-token` - 刷新 Token
- POST `/api/user/logout` - 退出登录
- GET `/api/user/info` - 获取当前用户信息
- GET `/api/user/list` - 获取用户列表（分页）
- GET `/api/user/{id}` - 根据 ID 获取用户
- POST `/api/user` - 新增用户
- PUT `/api/user` - 修改用户
- DELETE `/api/user/{id}` - 删除用户

## 数据库表结构

### sys_user - 用户表
- id: 用户 ID
- username: 用户名
- password: 密码（BCrypt 加密）
- email: 邮箱
- phone: 手机号
- status: 状态（0=禁用，1=启用）
- create_time: 创建时间
- update_time: 更新时间

### sys_role - 角色表
- id: 角色 ID
- role_name: 角色名称
- role_code: 角色编码
- description: 描述
- create_time: 创建时间
- update_time: 更新时间

### sys_menu - 菜单表
- id: 菜单 ID
- parent_id: 父菜单 ID
- menu_name: 菜单名称
- menu_path: 菜单路径
- menu_component: 组件路径
- menu_icon: 菜单图标
- menu_type: 菜单类型（1=目录，2=菜单，3=按钮）
- permission: 权限标识
- sort_order: 排序
- create_time: 创建时间
- update_time: 更新时间

### sys_user_role - 用户角色关联表
- id: ID
- user_id: 用户 ID
- role_id: 角色 ID

### sys_role_menu - 角色菜单关联表
- id: ID
- role_id: 角色 ID
- menu_id: 菜单 ID

## JWT Token 机制

### Token 结构
- Access Token: 有效期 24 小时，用于 API 请求认证
- Refresh Token: 有效期 7 天，用于刷新 Access Token

### 存储方式
**Cookie 存储（推荐）**:
- Token 和 Refresh Token 都存储在 Cookie 中
- 自动随请求发送，无需手动设置
- 支持多标签页共享
- 同时备份到 localStorage 作为兼容方案

### Token 刷新流程
1. 前端发起 API 请求时自动从 Cookie 获取 Token
2. 如果 Token 过期（返回 401），前端自动使用 Refresh Token 请求刷新接口
3. 刷新成功后，后端更新 Cookie 中的 Token
4. 如果 Refresh Token 也过期，需要重新登录

### Cookie 配置
```
Access Token Cookie:
- Name: token
- Max-Age: 86400 (1 天)
- Path: /
- HttpOnly: false (允许前端访问)
- Secure: false (开发环境)，生产环境建议 true

Refresh Token Cookie:
- Name: refreshToken
- Max-Age: 604800 (7 天)
- Path: /
- HttpOnly: false
- Secure: false
```

## 注意事项

1. 确保 MySQL 服务已启动且端口为 3306
2. 确保数据库账号密码正确（root/123456）
3. 后端服务启动前请先执行数据库初始化脚本
4. 前端通过代理解决跨域问题（vite.config.js 中配置）
5. 生产环境部署时需要修改 API 地址和跨域配置

## 开发说明

### 添加新页面
1. 在 `src/views/` 目录下创建新的 Vue 组件
2. 在 `src/router/index.js` 中添加路由配置
3. 在数据库中插入对应的菜单记录
4. 配置角色菜单权限

### 添加新权限
1. 在数据库 `sys_menu` 表中插入新的权限记录
2. 在前端组件中使用 `v-if="userStore.hasPermission('xxx')"` 控制显示

## License

MIT