修改养殖端小程序,保险前后端和小程序
This commit is contained in:
135
insurance_backend/docs/dynamic_menu_guide.md
Normal file
135
insurance_backend/docs/dynamic_menu_guide.md
Normal file
@@ -0,0 +1,135 @@
|
||||
# 动态菜单功能实现指南
|
||||
|
||||
## 概述
|
||||
|
||||
本文档描述了保险PC端管理系统中动态菜单功能的实现方案,包括后端API设计、数据库设计、前端集成和数据初始化方法。
|
||||
|
||||
## 功能特点
|
||||
|
||||
1. **全动态菜单**: 所有菜单数据从MySQL数据库动态获取
|
||||
2. **菜单层次结构**: 支持多级菜单结构
|
||||
3. **权限控制**: 支持基于用户角色的菜单权限控制
|
||||
4. **自动排序**: 菜单按预定义顺序显示
|
||||
5. **备用菜单**: 当API请求失败时提供默认菜单
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 1. 数据库设计
|
||||
|
||||
菜单数据存储在`menus`表中,使用自关联实现父子菜单关系:
|
||||
|
||||
```sql
|
||||
CREATE TABLE menus (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
name VARCHAR(50) NOT NULL,
|
||||
key VARCHAR(50) NOT NULL UNIQUE,
|
||||
path VARCHAR(100) NOT NULL,
|
||||
icon VARCHAR(50) NULL,
|
||||
parent_id INT NULL,
|
||||
component VARCHAR(100) NULL,
|
||||
`order` INT NOT NULL DEFAULT 0,
|
||||
status ENUM('active', 'inactive') DEFAULT 'active',
|
||||
show BOOLEAN DEFAULT TRUE,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (parent_id) REFERENCES menus(id)
|
||||
);
|
||||
```
|
||||
|
||||
### 2. 后端实现
|
||||
|
||||
#### 2.1 菜单模型
|
||||
|
||||
`models/Menu.js`定义了菜单的数据结构和关联关系:
|
||||
- 支持自关联的父子菜单关系
|
||||
- 包含菜单的名称、唯一标识、路径、图标等属性
|
||||
- 支持菜单排序和状态控制
|
||||
|
||||
#### 2.2 菜单控制器
|
||||
|
||||
`controllers/menuController.js`实现了菜单相关的业务逻辑:
|
||||
- `getMenus`: 获取当前用户的菜单列表(考虑权限)
|
||||
- `getAllMenus`: 获取所有菜单(仅管理员可用)
|
||||
|
||||
#### 2.3 菜单路由
|
||||
|
||||
`routes/menus.js`定义了菜单相关的API接口:
|
||||
- `GET /api/menus`: 获取当前用户的菜单列表
|
||||
- `GET /api/menus/all`: 获取所有菜单(管理员专用)
|
||||
|
||||
#### 2.4 API文档集成
|
||||
|
||||
菜单API已集成到Swagger文档中,可通过`http://localhost:3000/api-docs/#/`访问查看。
|
||||
|
||||
### 3. 前端实现
|
||||
|
||||
#### 3.1 API调用
|
||||
|
||||
`utils/api.js`中添加了菜单相关的API调用方法:
|
||||
- `getMenus()`: 获取当前用户的菜单列表
|
||||
- `getAllMenus()`: 获取所有菜单(管理员专用)
|
||||
|
||||
#### 3.2 动态菜单渲染
|
||||
|
||||
`components/Layout.vue`组件实现了动态菜单的加载和渲染:
|
||||
- 使用`onMounted`生命周期钩子加载菜单数据
|
||||
- 支持菜单点击事件处理和路由跳转
|
||||
- 实现了图标映射和菜单格式化功能
|
||||
- 提供了默认菜单作为API请求失败时的备用方案
|
||||
|
||||
## 菜单数据初始化
|
||||
|
||||
### 方法一:直接执行SQL脚本
|
||||
|
||||
1. 登录MySQL数据库
|
||||
2. 选择`insurance_data`数据库
|
||||
3. 执行`scripts/init_menus.sql`脚本
|
||||
|
||||
```bash
|
||||
mysql -u root -p insurance_data < scripts/init_menus.sql
|
||||
```
|
||||
|
||||
### 方法二:使用Node.js脚本
|
||||
|
||||
1. 确保已安装依赖:`npm install mysql2 dotenv`
|
||||
2. 执行`seed_menus.js`脚本:
|
||||
|
||||
```bash
|
||||
node scripts/seed_menus.js
|
||||
```
|
||||
|
||||
## 菜单列表
|
||||
|
||||
系统包含以下菜单:
|
||||
|
||||
1. **仪表板**
|
||||
2. **数据揽仓**
|
||||
3. **监管任务**
|
||||
4. **待安装任务**
|
||||
5. **监管任务已结项**
|
||||
6. **投保客户单**
|
||||
- 参保申请
|
||||
7. **生资保单**
|
||||
- 生资保单列表
|
||||
8. **险种管理**
|
||||
- 险种管理
|
||||
9. **客户理赔**
|
||||
- 客户理赔
|
||||
10. **消息通知**
|
||||
11. **子账号管理**
|
||||
12. **系统设置**
|
||||
13. **个人中心**
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. 确保后端服务正常运行
|
||||
2. 确保菜单数据已正确初始化到数据库
|
||||
3. 登录系统后,系统会自动从后端API获取并渲染菜单
|
||||
4. 点击菜单项会根据配置的路径进行路由跳转
|
||||
|
||||
## 扩展建议
|
||||
|
||||
1. 可以扩展菜单模型,添加更多的权限控制字段
|
||||
2. 实现菜单管理界面,支持动态增删改查菜单
|
||||
3. 优化菜单缓存机制,减少重复的API请求
|
||||
4. 完善菜单的国际化支持
|
||||
Reference in New Issue
Block a user