119 lines
4.3 KiB
Markdown
119 lines
4.3 KiB
Markdown
|
# 前端路由配置指南
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
由于本项目使用基于菜单的动态路由系统，需要先在后端数据库中配置菜单，然后前端会自动生成对应的路由。
|
|||
|
|
|
|||
|
|
## 配置步骤
|
|||
|
|
|
|||
|
|
### 1. 执行SQL脚本
|
|||
|
|
在数据库中执行 `backend-server/sql/barmgr_menu_config.sql` 脚本，这会添加以下菜单结构：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
门店管理
|
|||
|
|
├── 酒头管理 (/barmgr/tap)
|
|||
|
|
├── 酒款搜索 (/barmgr/search)
|
|||
|
|
└── 整版酒单 (/template/menu)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 组件映射关系
|
|||
|
|
路由系统会自动将菜单配置的 `component` 字段映射到实际的Vue组件：
|
|||
|
|
|
|||
|
|
| 菜单路径 | 组件路径 | 实际文件位置 |
|
|||
|
|
|----------|----------|--------------|
|
|||
|
|
| `barmgr/tap/index` | `/src/views/barmgr/tap/index.vue` | 酒头管理页面 |
|
|||
|
|
| `barmgr/search/index` | `/src/views/barmgr/search/index.vue` | 酒款搜索页面 |
|
|||
|
|
| `template/menu/index` | `/src/views/template/menu/index.vue` | 整版酒单模板页面 |
|
|||
|
|
|
|||
|
|
### 3. 权限配置
|
|||
|
|
每个菜单项都配置了对应的权限标识：
|
|||
|
|
|
|||
|
|
**酒头管理权限：**
|
|||
|
|
- `barmgr:tap:list` - 酒头列表查看
|
|||
|
|
- `barmgr:tap:query` - 酒头详情查询
|
|||
|
|
- `barmgr:tap:stats` - 统计信息查看
|
|||
|
|
- `barmgr:tap:add` - 新酒上枪
|
|||
|
|
- `barmgr:tap:edit` - 酒款管理编辑
|
|||
|
|
- `barmgr:tap:remove` - 批量下架
|
|||
|
|
|
|||
|
|
**酒款搜索权限：**
|
|||
|
|
- `barmgr:platform:search` - 智能搜索
|
|||
|
|
- `barmgr:platform:beer:list` - 酒款列表
|
|||
|
|
- `barmgr:platform:beer:query` - 酒款详情
|
|||
|
|
- `barmgr:platform:brewery:list` - 品牌列表
|
|||
|
|
- `barmgr:platform:brewery:query` - 品牌详情
|
|||
|
|
|
|||
|
|
**模板管理权限：**
|
|||
|
|
- `barmgr:wineMenuTemplate:list` - 模板列表
|
|||
|
|
- `barmgr:wineMenuTemplate:query` - 模板详情
|
|||
|
|
- `barmgr:wineMenuTemplate:add` - 新增模板
|
|||
|
|
- `barmgr:wineMenuTemplate:edit` - 编辑模板
|
|||
|
|
- `barmgr:wineMenuTemplate:remove` - 删除模板
|
|||
|
|
- `barmgr:wineMenuTemplate:generate` - 生成图片
|
|||
|
|
|
|||
|
|
### 4. 验证配置
|
|||
|
|
配置完成后，可以通过以下方式验证：
|
|||
|
|
|
|||
|
|
1. **检查菜单显示**: 登录系统后，左侧菜单应该显示"门店管理"主菜单及子菜单
|
|||
|
|
2. **检查路由跳转**: 点击菜单项应该能正确跳转到对应页面
|
|||
|
|
3. **检查权限控制**: 不同角色应该看到不同的菜单项和功能按钮
|
|||
|
|
|
|||
|
|
### 5. 故障排除
|
|||
|
|
|
|||
|
|
**问题1: 菜单不显示**
|
|||
|
|
- 检查数据库中的菜单数据是否正确插入
|
|||
|
|
- 检查当前用户角色是否拥有对应的菜单权限
|
|||
|
|
- 查看 `sys_role_menu` 表中的角色菜单关联关系
|
|||
|
|
|
|||
|
|
**问题2: 页面404错误**
|
|||
|
|
- 检查组件文件路径是否正确
|
|||
|
|
- 确认Vue组件文件确实存在于指定位置
|
|||
|
|
- 检查路由组件映射逻辑
|
|||
|
|
|
|||
|
|
**问题3: 权限验证失败**
|
|||
|
|
- 检查后端API的权限注解是否正确
|
|||
|
|
- 确认用户角色拥有对应的功能权限
|
|||
|
|
- 查看 `sys_role_menu` 表中的权限分配
|
|||
|
|
|
|||
|
|
### 6. 菜单图标配置
|
|||
|
|
当前使用的图标：
|
|||
|
|
- 门店管理: `shop`
|
|||
|
|
- 酒头管理: `coffee-cup`
|
|||
|
|
- 酒款搜索: `search`
|
|||
|
|
- 整版酒单: `document`
|
|||
|
|
|
|||
|
|
可以根据实际需要在数据库中修改 `icon` 字段，系统支持Element Plus图标库中的所有图标。
|
|||
|
|
|
|||
|
|
## 自定义配置
|
|||
|
|
|
|||
|
|
### 添加新的子菜单
|
|||
|
|
如果需要添加新的功能菜单，可以参考以下SQL模板：
|
|||
|
|
|
|||
|
|
```sql
|
|||
|
|
-- 添加新菜单项
|
|||
|
|
INSERT INTO sys_menu (menu_name, parent_id, order_num, path, component, query, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, remark)
|
|||
|
|
VALUES ('菜单名称', 父菜单ID, 排序号, '路由路径', '组件路径', '', 1, 0, 'C', '0', '0', '权限标识', '图标', 'admin', sysdate(), '备注说明');
|
|||
|
|
|
|||
|
|
-- 为角色分配菜单权限
|
|||
|
|
INSERT INTO sys_role_menu (role_id, menu_id) VALUES (角色ID, 菜单ID);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 修改菜单顺序
|
|||
|
|
修改 `order_num` 字段可以调整菜单显示顺序：
|
|||
|
|
|
|||
|
|
```sql
|
|||
|
|
UPDATE sys_menu SET order_num = 新顺序号 WHERE menu_id = 菜单ID;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **组件路径规范**: 组件路径必须以 `/src/views` 为基础，配置时只需要从views后的相对路径
|
|||
|
|
2. **权限命名规范**: 权限标识建议使用 `模块:功能:操作` 的命名规范
|
|||
|
|
3. **菜单层级限制**: 建议菜单层级不超过3级，以保证良好的用户体验
|
|||
|
|
4. **图标选择**: 选择语义明确的图标，保持整体风格一致
|
|||
|
|
|
|||
|
|
## 相关文件
|
|||
|
|
|
|||
|
|
- **SQL配置文件**: `backend-server/sql/barmgr_menu_config.sql`
|
|||
|
|
- **路由配置**: `frontend-store/src/router/routes.js`
|
|||
|
|
- **组件映射**: `frontend-store/src/router/index.js`
|
|||
|
|
- **页面组件**: `frontend-store/src/views/barmgr/`
|