使用v-for用户菜单渲染

前端页面的菜单渲染，是项目开发中的很重要一部分，设计思路需要我们好好斟酌一下。

因为我们要根据登录用户的角色，去渲染对应的菜单。如下：

一、数据库设计

1.1 创建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：查询所有用户的角色名称

二、后端查取全部用户信息（携带菜单数据）

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>