权限管理：菜单管理

权限管理是后台管理系统的核心功能，要给不同工作岗位的用户分配不同的 *** 作权限，就需要进行权限管理

权限管理内部划分为：

控制登录到后台的用户能够访问到哪些后台菜单页面，比如负责广告的人员只能看到广告管理，课程人员只能看到课程管理，就需要进行不同的菜单权限分配

资源对应的是接口，资源权限用于控制用户能够 *** 作哪些接口功能，比如分配资源权限的时候没有禁用用户权限，指的是没有 *** 作这个接口的权限。资源权限与菜单权限不冲突，如果有的用户能够看到用户管理页面，也可以添加用户（有权限 *** 作新增用户接口），但是没法进行禁用用户 *** 作（无禁用用户的接口权限）

代表了菜单权限和资源权限的一种组合方式，比如我设置了多个用户需要相同的菜单权限和资源权限， 就可以将这些权限组合起来，设置为角色，再将角色分配给用户简化 *** 作

在项目中，不会直接对某个用户进行菜单权限或者资源权限的分配，而是提前根据岗位清空设定不同的角色，再将角色分配给用户就可以了

用户需要分配角色，角色需要分配菜单权限和资源权限

由于功能之间存在依赖，我们先从菜单权限和资源权限功能开始制作，最后再依次完成角色和用户的功能

使用Element的 Card卡片

添加到views/menu/index.vue，将标题区域更改为添加菜单按钮，添加后跳转到菜单组件

在menu目录下创建menuCreate.vue，并且创建初始结构

在路由表中添加上去

下面通过Element的Card套Form的方式给menu-create布局

完成

上级菜单数据需要请求接口才能得到，并且要渲染到模板中

用于获取菜单的接口有两个

接下来是设置接口的请求方法

menuCreate.vue中请求数据

添加无上级菜单选项（如果你添加的是一级菜单的话就这么选）

首先要将用于添加菜单的请求功能封装到services/menu.js模块中，由于文件不存在，先进行创建

在createMenu.vue中引入并在在点击提交按钮时发送请求，顺便检验一下是否成功了，成功了要记得提示和跳转

展示数据相关列表，使用Element的 Table表格 组件进行处理，并且根据我们的项目功能，修改模板表格的内容

封装接口请求功能

引入并且请求数据，请求成功保存到data中

数据展示

*** 作部分的内容需要对Table进行自定义

注意：

点击删除的时候，提示用户确认，并且使用当前行数据信息进行删除请求

删除接口： 地址 ，使用Postman测试没问题之后投入使用

观察项目的时候发现，添加菜单和编辑菜单的组件结构几乎是一模一样的，可以封装为组件进行复用

去除menuCreate.vue中的多余内容

创建menuEdit.vue组件，设置内容

将菜单编辑添加到路由表中

给menu/index.vue中的编辑按钮设置点击后的路由跳转

开始之前补充一点，组件CreateOrEdit.vue中的重置按钮，应当设置一个全部清空重置的点击事件

编辑时，将要编辑的菜单项信息展示在表单中

由于添加和编辑时同一个接口，区别在于编辑时是否多了参数id，由于提交时传入为form数据，编辑提交时就会自动包含id，所以提交 *** 作就不需要处理了

除了html代码<a></a>没有关闭  你的逻辑有点乱

htm导航栏是

<li><a href="" ></a></li><!--a标签要关闭 -->

<li><a href="></a></li><!--a标签要关闭 -->

<li>

    <a href="></a>  <!--a标签要关闭 -->

   <div class="nav-list" id="dataTd" style="display: none">

       <a href=“">人物角色</a>

       <a href="">游戏视频</a>

   </div>  

</li>

html文件中有id为dataTd但是没有dataTh

js是

<script type="text/javascript">

    var oDiv1=document.getElementById('dataTh')

    //获取ID 为dataTh的html元素

    var oDiv2=document.getElementById('dataTd')

    //获取ID 为dataTd的html元素

     var timer=null

//onmouseover代表鼠标划入指定范围  触发事件

      oDiv2.onmouseover=oDiv1.onmouseover=function ()

    {

        clearTimeout(timer)

        oDiv2.style.display='block'

        oDiv1.className='data-list'

这几句代码的意思是  当鼠标指向id为dataTh或者id为dataTd的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类

    }

//onmouseout代表鼠标离开指定范围  触发事件

    oDiv2.onmouseout=oDiv1.onmouseout=function ()

    {

        timer=setTimeout(function (){

            oDiv2.style.display='none'id为dataTd的元素隐藏

            oDiv1.className=''id为dataTh的元素去掉类名为“data-list”的class类

        }, 100)

每0.1秒执行一次

    }

</script>

我给你举个例子

要实现的功能是  当鼠标划过列表中的id="dataTh"的元素时，隐藏的子菜单显示

html页面

<li>

    <a href=" id="dataTh"></a>  

<!--子菜单  以下处于隐藏状态 -->

    <div class="nav-list" id="dataTd" style="display: none">

       <a href=“">人物角色</a>

       <a href="">游戏视频</a>

    </div>  

<!--子菜单  以上处于隐藏状态 -->

</li>

JS

<script type="text/javascript">

    var oDiv1=document.getElementById('dataTh')

    //获取ID 为dataTh的html元素

    var oDiv2=document.getElementById('dataTd')

    //获取ID 为dataTd的html元素

     var timer=null

//onmouseover代表鼠标划入指定范围  触发事件

    oDiv1.onmouseover=function ()

    {

        clearTimeout(timer)

        oDiv2.style.display='block'

        oDiv1.className='data-list'

//这几句代码的意思是  当鼠标指向id为dataTh的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类

    }

//onmouseout代表鼠标离开指定范围  触发事件

    oDiv1.onmouseout=function ()

    {

        oDiv2.style.display='none'//id为dataTd的元素隐藏

        oDiv1.className=''//id为dataTh的元素去掉类名为“data-list”的class类

    }

</script>

.DivHidden{ width:autoheight:autoborder:1px solid #ffffffdisplay:nonebackground-color:#ccccccposition:absolutecolor:#ffffffpadding:5pxcursor:move}

.DivHidden .conright_bottom table tr td{background-color:#4A535Apadding:5pxborder-bottom:1px solid #333border-right:1px solid #333}

.DivHidden .conright_bottom{width:500pxheight:auto}

上面是div样式

下面是div

<div class="DivHidden box">

</div>

---