集团企业网站设计方案bt蚂蚁磁力
前端页面的菜单渲染，是项目开发中的很重要一部分，设计思路需要我们好好斟酌一下。
因为我们要根据登录用户的角色，去渲染对应的菜单。如下：
目录
一、数据库设计
1.2 创建role表
1.4 在user表中，填入role_id字段，来声明该用户是什么角色
练习3：查询所有用户的角色名称
二、后端查取全部用户信息（携带菜单数据）
2.1 创建实体类Menu
2.2 创建RoleMenuMapper
2.3 创建MenuMapper
2.4 修改实体类User
2.5 在UserServiceImpl中，编写查询登录用户菜单的业务逻辑
2.6 使用apifox，发送请求，查看返回的登录用户信息
三、前端使用v-for渲染菜单
3.1 使用pinia，存储登录用户的个人信息
3.2 登录页面后，查询pinia中的登录用户信息
3.3 使用pinia存储的登录用户信息中的菜单信息，渲染菜单
四、查看效果
4.1 登录角色：挂号收费员
4.2 登录角色：门诊医生
4.3 登录角色：医技医生
4.4 登录角色：药房操作员
4.5 登录角色：财务管理员
结语
一、数据库设计
1.1 创建menu表
①menu_name：菜单名称，如："门诊挂号收费"、”现场挂号“
②menu_icon：菜单的图标名称(来自element-plus)
③菜单对应的路由路径(vue路由)，如：/registration/onsite_registration
注意：只有子菜单才有路由。而父菜单没路由信息，不跳转。④parent_id：菜单的父菜单id，这是构成层次的关键。（两级菜单：父菜单、子菜单）。如果某个菜单是父菜单（即：该菜单没有父菜单），那么此时parent_id设为0。
根据前端页面，给menu表填充数据：
练习1：从menu表中，根据父菜单id（parent_id为0的那种）查询出子菜单
查询父菜单【门诊挂号收费】的所有子菜单：
查询父菜单【门诊医生工作站】的所有子菜单：
查询父菜单【门诊医技工作站】的所有子菜单：
查询父菜单【门诊药房工作站】的所有子菜单：
查询父菜单【门诊财务管理】的所有子菜单：
1.2 创建role表
1.3 创建rolemenu表
练习2：从rolemenu表，根据role_id（角色id）查询出menu_id（父菜单id）
1.4 在user表中，填入role_id字段，来声明该用户是什么角色
练习3：查询所有用户的角色名称
SELECT
u.*,
r.rolename
FROM
user u
JOIN
role r ON u.role_id = r.id
二、后端查取全部用户信息（携带菜单数据）
2.1 创建实体类Menu
2.2 创建RoleMenuMapper
2.3 创建MenuMapper
2.4 修改实体类User
2.5 在UserServiceImpl中，编写查询登录用户菜单的业务逻辑
@Service //表明这是一个service层
public class UserServiceImpl implements UserService {//注入UserMapper的实例@Autowiredprivate UserMapper userMapper;@Autowiredprivate RolemenuMapper rolemenuMapper;@Autowiredprivate MenuMapper menuMapper;@Overridepublic User login(User user) {//1.查询出当前登录用户loginUserUser loginUser = userMapper.login(user);if(loginUser!=null){//2.给该用户添加菜单//2.1现在已知role_id,根据role_id从rolemenu表查询父菜单idInteger fatherMenuId = rolemenuMapper.queryMenuId(loginUser.getRoleId());//2.2根据fatherMenuId（父菜单id）,从menu表查询出父菜单fatherMenuMenu fatherMenu = menuMapper.queryMenuById(fatherMenuId);//2.3根据fatherMenuId（父菜单id）,从menu表查询出所有子菜单List<Menu> sonMenus = menuMapper.queryAllMenusByFatherId(fatherMenu.getId());//2.4将子菜单集合sonMenus，添加到父菜单fatherMenu中fatherMenu.setChildren(sonMenus);//2.5将父菜单fatherMenu，添加到登录用户user中loginUser.setFatherMenu(fatherMenu);}return loginUser;}
}2.6 使用apifox，发送请求，查看返回的登录用户信息
发送请求：
响应数据：
{
"code": 200,
"message": "登录成功",
"data": {
"id": 6,
"username": "money",
"password": "123",
"avatar": null,
"nickname": "钱雷",
"roleId": 5,
"rolename": "财务管理员",
"fatherMenu": {
"id": 25,
"menuName": "门诊财务管理",
"menuIcon": null,
"menuPath": null,
"parentId": 0,
"children": [
{
"id": 26,
"menuName": "费用科目管理",
"menuIcon": null,
"menuPath": null,
"parentId": 25,
"children": null
},
{
"id": 27,
"menuName": "门诊科室工作量统计",
"menuIcon": null,
"menuPath": null,
"parentId": 25,
"children": null
}
]
}
}
}
可见此时登录的用户是“钱雷”，角色是“财务管理员”，拥有的菜单如下：
三、前端使用v-for渲染菜单
接下来，我们需要将后端返回的菜单数据，渲染到前端页面上。
3.1 使用pinia，存储登录用户的个人信息
3.2 登录页面后，查询pinia中的登录用户信息
登录页面时，会向后端发送登录请求，并将返回的登录用户信息存入pinia中：
3.3 使用pinia存储的登录用户信息中的菜单信息，渲染菜单
获取pinia的登录用户信息
使用登录用户的菜单信息，渲染element-plus菜单组件
<!-- 左侧菜单 --><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#143f6b"text-color="#fff"active-text-color="#ffd04b"@open="handleOpen"@close="handleClose"><!-- 【首页】 --><el-menu-item index="1"><el-icon><HomeFilled /></el-icon><span>首页</span></el-menu-item><!-- 【父菜单】 --><el-sub-menu index="2"><!--菜单标题--><template #title><!-- 小图标 --><!-- <el-icon><location /></el-icon> --><span>{{user.fatherMenu.menuName}}</span></template><!-- 子菜单 --><!-- <el-menu-item index="2-1">现场挂号</el-menu-item><el-menu-item index="2-2">收费</el-menu-item><el-menu-item index="2-3">退号</el-menu-item><el-menu-item index="2-4">患者费用查询</el-menu-item><el-menu-item index="2-5">收费员日结</el-menu-item> --><!-- 使用v-for来渲染子菜单 --><el-menu-itemv-for="childrenMenu in user.fatherMenu.children" :key="childrenMenu.menuName" :index="childrenMenu.menuName">{{childrenMenu.menuName}}</el-menu-item></el-sub-menu></el-menu>四、查看效果
4.1 登录角色：挂号收费员
4.2 登录角色：门诊医生
4.3 登录角色：医技医生
4.4 登录角色：药房操作员
4.5 登录角色：财务管理员
结语
以上就是使用v-for渲染前端菜单的全部流程。
如果有不懂的点，可以私信博主，博主看到就会耐心解答~
喜欢本篇文章的话，可以留个免费的关注~~