当前位置：首页 > news >正文

使用v-for用户菜单渲染

news 来源：原创 2025/6/7 11:04:29

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

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

一、数据库设计

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的实例
    @Autowired
    private UserMapper userMapper;
    @Autowired
    private RolemenuMapper rolemenuMapper;
    @Autowired
    private MenuMapper menuMapper;
    @Override
    public User login(User user) {
        //1.查询出当前登录用户loginUser
        User loginUser = userMapper.login(user);
        if(loginUser!=null){
            //2.给该用户添加菜单
            //2.1现在已知role_id,根据role_id从rolemenu表查询父菜单id
            Integer fatherMenuId = rolemenuMapper.queryMenuId(loginUser.getRoleId());
            //2.2根据fatherMenuId（父菜单id）,从menu表查询出父菜单fatherMenu
            Menu 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-menu
    default-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-item
        v-for="childrenMenu in user.fatherMenu.children" 
        :key="childrenMenu.menuName" 
        :index="childrenMenu.menuName">
          {{childrenMenu.menuName}}
      </el-menu-item>
    </el-sub-menu>

  </el-menu>