2023-7-20

@Select注解

获取菜单并区分一级和二级

应用getPermissionByUsername获取全部信息

区分一级菜单和二级菜单

• permission类中增加属性childPermission并增加其set和get方法
  

• 在UserServiceImpl中的getPermissionByUsername方法，对查到的全部数据进行处理

 @Override
    public List<Permission> getPermissionByUsername(String username) {
        //查询到的所有数据放一个集合
        List<Permission> permissionList=userMapper.getPermissionByUsername(username);
        //声明存储二级菜单集合
        List<Permission> childPermissionList=new ArrayList<>();
        //ParentPermissionId=0说明是一级菜单
        for (Permission permission:permissionList){
            if(permission.getParentPermissionId()!=0){
                childPermissionList.add(permission);
            }
        }
        //去掉二级菜单，则只剩一级菜单
        permissionList.removeAll(childPermissionList);
        /**
        permissionList.forEach(p->{
            System.out.println("111"+p.getPermissionName());
        });
        childPermissionList.forEach(c->{
            System.out.println("222" + c.getPermissionName());
        });
         */
        //关联一级菜单和二级菜单
        for (Permission p:permissionList){
            for (Permission c:childPermissionList){
                if (c.getParentPermissionId().equals(p.getPermissionId())){
                   p.getChildPermission().add(c);
                }
            }
        }
        //返回区分好的数据
        return permissionList;
    }

效果如下：

利用elementUI动态渲染菜单栏

前端获取数据

• 导入axios

import axios from "axios";

• 发送请求，这里先把条件写死

mounted() {
    axios.get("http://localhost:9000/getPermissionByUsername?username=guet")
    .then(res=>{
      this.menus=res.data.data;
      console.log(this.menus)
    })
  }

• 效果
  

动态渲染

• 声明一个数组，用于存储数据

  data(){
    return{
      menus:[],
    }
  },

• 渲染数据

<div class="sideBar">
  <el-menu
      v-for="(menu,index) in menus" :keys=menu.id
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">

    <!--  childPermission数组的长度不为0，说明有二级菜单  -->
    <el-submenu :index="index.toString()" v-if="menu.childPermission.length!=0">
      <!-- 先加一级菜单     -->
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{menu.permissionName}}</span>
      </template>
      <!-- 循环放入二级菜单     -->
      <el-menu-item :index="idx.toString()" v-for="(childPermission,idx) in menu.childPermission" :key="idx">
        <i class="el-icon-document"></i>
        <span slot="title">{{childPermission.permissionName}}</span>
      </el-menu-item>
    </el-submenu>
    <!--显示首页 childPermission数据长度为零说明是首页-->
    <el-menu-item v-else-if="menu.childPermission.length==0" :index="index.toString()">
      <i class="el-icon-menu"></i>
      <span slot="title">{{ menu.permissionName }}</span>
    </el-menu-item>

  </el-menu>
</div>

• 效果
  用户为guet
  
  用户为admin
  

用vue+HTML动态生成菜单栏

HTML内容

<ul class="menu">
    <li>
      <a href="#"><i class="fa fa-home"></i>&nbsp;&nbsp;首页</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-user"></i>&nbsp;&nbsp;用户管理</a>
      <ul class="submenu">
        <li>
          <a href="#">用户列表</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fa fa-user-o"></i>&nbsp;&nbsp;角色管理</a>
      <ul class="submenu">
        <li>
          <a href="#">角色列表</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fa fa-bus"></i>&nbsp;&nbsp;权限管理</a>
      <ul class="submenu">
        <li>
          <a href="#">权限列表</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fa fa-book"></i>&nbsp;&nbsp;文章管理</a>
      <ul class="submenu">
        <li>
          <a href="#">文章列表</a>
        </li>
        <li>
          <a href="#">文章分类</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fa fa-user-o"></i>&nbsp;&nbsp;轮播图管理</a>
      <ul class="submenu">
        <li>
          <a href="#">轮播图列表</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fa fa-file-zip-o"></i>&nbsp;&nbsp;新闻管理</a>
      <ul class="submenu">
        <li>
          <a href="publishNews.html" target="content">发布新闻</a>
        </li>
        <li>
          <a href="Page.html" target="content">查看新闻</a>
        </li>
      </ul>
    </li>
  </ul>

/* clear screen */
*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
  position: relative;
  border-style: solid;
  border-width: 1px 0 0;
  border-color: #E5E5E5;
}
.submenu>li{
  position: relative;
  padding-left: 40px;
}
a{
  display: block;
  width: 189px;
  height: 36px;
  color: #5d5d5d;
  text-decoration: none;
  line-height: 36px;
}
.fa{
  display: inline-block;
  margin-left: 14px;
  margin-right: 14px;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
}
.submenu{
  position: relative;
}
.submenu:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 18px;
  top: 0;
  bottom: 0;
  border: 1px dotted;
  border-width: 0 0 0 1px;/* 上 右 下 左 */
}
.submenu > li:before {
  content: "";
  display: block;
  width: 10px;
  position: absolute;
  z-index: 1;
  left: 20px;
  top: 17px;
  border: 1px dotted;
  border-width: 1px 0 0;/* 上 右 下*/
}

加入vue中

• 复制HTML内容
  
• vue中引用图标

npm install font-awesome --save

import 'font-awesome/css/font-awesome.min.css'

效果如下：

动态生成

• data中增加一个属性isExpand

      //显示二级菜单
      isExpand:false,

<div class="sideBar">
  <ul class="menu" v-for="menu in menus">
    <!-- 拥有二级菜单的循环   -->
    <li v-if="menu.childPermission.length!=0">
      <a href="#"  @click.prevent="isExpand=!isExpand"><i :class="menu.icon"></i>&nbsp;&nbsp;{{menu.permissionName}}</a>
      <ul class="submenu" v-show="isExpand" v-for="childPermission in menu.childPermission">
        <li>
          <a href="#">{{childPermission.permissionName}}</a>
        </li>
      </ul>
    </li>
    <!-- “首页”设置   -->
    <li  v-else-if="menu.childPermission.length==0" >
      <a href="menu.url"><i class="fa fa-home"></i>&nbsp;&nbsp;{{ menu.permissionName }}</a>
    </li>

  </ul>
</div>

• 效果如下：
  用户为adim
  
  用户为guet