管理后台项目-07-菜单管理和动态展示菜单和按钮

这篇具有很好参考价值的文章主要介绍了管理后台项目-07-菜单管理和动态展示菜单和按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1-菜单管理

1.1-菜单管理列表

1.2-添加|修改功能

1.3-删除菜单

2-动态菜单按钮展示

2.1-路由文件的整理

2.2-动态展示不同的路由


1-菜单管理

管理后台项目-07-菜单管理和动态展示菜单和按钮

 

当用户点击菜单管理的时候,会展示当前所有菜单,树型结构展示...并且可以对菜单进行新增编辑删除操作。需要留意页面结构,菜单默认最多三级(全部数据不算菜单),但是服务端需要拼凑四级菜单数据(全部数据算顶级level=1),到了第三级(按钮级别),就不能再新增下一级了。

1.1-菜单管理列表

进入页面,需要直接获取菜单的全部数据,并且树型结构展示,,需要使用到el-table树形数据。需要调用服务端接口,页面结构如下:

管理后台项目-07-菜单管理和动态展示菜单和按钮

 页面加载完成需要调用接口
getPermissionList() {return request({url: `${api_name}`,method: 'get'})}

管理后台项目-07-菜单管理和动态展示菜单和按钮

服务端返回数据类似如下:
 

管理后台项目-07-菜单管理和动态展示菜单和按钮 

 管理后台项目-07-菜单管理和动态展示菜单和按钮

 

 

管理后台项目-07-菜单管理和动态展示菜单和按钮

  1.2-添加|修改功能

管理后台项目-07-菜单管理和动态展示菜单和按钮

 

当用户点击列表的添加或者编辑按钮时,需要展示dialog对话框,并且我们需要动态显示添加几级菜单文字。而且还需要对添加的内容进行简单的校验rules自定义校验规则;一些小的细节,菜单两级(level=2||level=3),按钮(level=4)一级总共三级,需要一些按钮进行判断disabled。
管理后台项目-07-菜单管理和动态展示菜单和按钮

 管理后台项目-07-菜单管理和动态展示菜单和按钮

 动态计算标题和校验规则;管理后台项目-07-菜单管理和动态展示菜单和按钮

 这里需要用到的组件调用的api方法和页面的methods方法贴出

管理后台项目-07-菜单管理和动态展示菜单和按钮

 

 /* 根据级别得到要显示的添加dialog的标题*/
    getAddTitle (level) {
      if (level===1 || level===2) {
        return '添加菜单'
      } else if (level===3){
        return '添加功能'
      }
    }, 
   
    /* 显示添加权限的界面(菜单或功能)*/
    toAddPermission (row) {
      this.dialogPermissionVisible = true
      this.permission.pid = row.id
      this.permission.level = row.level + 1
      this.permission.type = this.permission.level===4 ? 2 : 1
      this.permission.pname = row.name // 用于显示父名称, 但提交请求时是不需要的
      
      // 清除校验(必须在界面更新之后)
      this.$nextTick(() => this.$refs.permission.clearValidate())
    },

    /* 显示菜单添加或更新的dialog*/
    toUpdatePermission(row) {
      this.dialogPermissionVisible = true
      this.permission = {...row}  // 使用浅拷贝
      this.permission.type = this.permission.level===4 ? 2 : 1
      // 清除校验(必须在界面更新之后)
      this.$nextTick(() => this.$refs.permission.clearValidate())
    },


    /* 添加或更新功能权限*/
    addOrUpdatePermission() {
      this.$refs.permission.validate(async valid => {
        if (valid) {
          const {pname, ...perm} = this.permission // pname不需要携带
          const result = await this.$API.permission[perm.id ? 'updatePermission' : 'addPermission'](perm)
          this.$message.success(result.message || `${perm.id ? '修改' : '添加'}成功!`)
          this.resetData()
          this.fetchPermissionList()
        }
      })
    }

管理后台项目-07-菜单管理和动态展示菜单和按钮

 

1.3-删除菜单

当我们点击删除按钮的时候,我们需要调用服务端接口删除对应的数据;

管理后台项目-07-菜单管理和动态展示菜单和按钮

 管理后台项目-07-菜单管理和动态展示菜单和按钮

 

管理后台项目-07-菜单管理和动态展示菜单和按钮

 

2-动态菜单按钮展示

当我们给不同的角色授权成功的时候,当不同的用户登录后,每个用户看到的界面菜单不一样,这时我们就需要动态展示菜单;所以我们需要对当前的路由进行划分几类,比如常量路由(所有欧用户都可以看到),异步路由(授权的用户才可以看到),任意路由。

2.1-路由文件的整理

src\router\index.js文件中我们需要将之前的路由分类,之前我们是放到了常量路由里面,不管什么用户登录进来都可以看到,现在我们需要将路由进行分类。

管理后台项目-07-菜单管理和动态展示菜单和按钮

 

管理后台项目-07-菜单管理和动态展示菜单和按钮

 

管理后台项目-07-菜单管理和动态展示菜单和按钮

 管理后台项目-07-菜单管理和动态展示菜单和按钮

  2.2-动态展示不同的路由

我们在登录成功后,调用了服务器获取用户详细信息,服务器返回了当前用户的路由和按钮信息,我们需要拿到这些信息进行处理,过滤出当前用户的菜单按钮权限信息。我们需要对查询用户信息的vuex中的store文件进行相关开发,在vuex中存储相关信息。

用户信息接口返回数据:

管理后台项目-07-菜单管理和动态展示菜单和按钮

在action提交相关数据: 

管理后台项目-07-菜单管理和动态展示菜单和按钮

管理后台项目-07-菜单管理和动态展示菜单和按钮

 管理后台项目-07-菜单管理和动态展示菜单和按钮

 管理后台项目-07-菜单管理和动态展示菜单和按钮

 

然后需要修改src\layout\components\Sidebar\index.vue中的循环路由的数据,没有修改之前,模板代码只是拿常量路由。我们应该重新赋值,使用我们计算的路由信息。
管理后台项目-07-菜单管理和动态展示菜单和按钮

 如果要展示和隐藏按钮需要使用仓库数据判断是否存在就行。
管理后台项目-07-菜单管理和动态展示菜单和按钮

 这个在给角色授权的时候,需要留意一下。

 vue elementUI tree树形控件获取父节点ID的实例
        修改源码:
        情况1: element-ui没有实现按需引入打包
          node_modules\element-ui\lib\element-ui.common.js    25382行修改源码  去掉 'includeHalfChecked &&'
          // if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
          if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
        情况2: element-ui实现了按需引入打包
          node_modules\element-ui\lib\tree.js    1051行修改源码  去掉 'includeHalfChecked &&'
          // if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
          if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {文章来源地址https://www.toymoban.com/news/detail-427360.html

到了这里,关于管理后台项目-07-菜单管理和动态展示菜单和按钮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C#,入门教程(07)——软件项目的源文件与目录结构

    上一篇: C#,入门教程(06)——解决方案资源管理器,代码文件与文件夹的管理工具 https://blog.csdn.net/beijinghorn/article/details/124895033 创建新的 C# 项目后, Visual Studio 会自动创建一系列的目录与文件。 程序员后面的工作就是在这个目录及这些文件的基础上进行的。 本文对这些目

    2024年01月19日
    浏览(50)
  • vue2 实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容,并支持移动端框架

    效果图: pc端  移动端    由于代码比较多,我这里就不一一介绍了,可以去我的git上把项目拉下来 git地址https://gitee.com/Flechazo7/htglck.git 后台我是用node写的有需要的可以评论联系

    2024年02月16日
    浏览(46)
  • vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏

    效果图 第一步:设置左侧菜单栏 左侧菜单栏,左侧菜单我这边自定义写死的数据。 分为有子菜单和没子菜单等情况,我用到的只有俩种,没有三级菜单。 HTML部分

    2024年02月11日
    浏览(50)
  • vue3 + TS + elementplus + pinia实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容

    效果图:  home.vue页面代码 left.vue页面代码 tab.vue页面代码 pinia里面的代码 安装 使用插件  在main.ts中注册 路由代码 我把代码放git上了,有需要的自行拉取 https://gitee.com/Flechazo7/vue3.git

    2024年02月09日
    浏览(50)
  • 07-使用Package、Crates、Modules管理项目

    上一篇:06-枚举和模式匹配         当你编写大型程序时,组织代码将变得越来越重要。通过对相关功能进行分组并将具有不同功能的代码分开,您可以明确在哪里可以找到实现特定功能的代码,以及在哪里可以改变功能的工作方式。         到目前为止,我们编写的

    2024年02月21日
    浏览(37)
  • 学系统集成项目管理工程师(中项)系列07_信息(文档)管理

    2.1.1. 可行性研究报告和项目任务书 2.1.2. 需求规格说明 2.1.3. 功能规格说明 2.1.4. 设计规格说明 2.1.4.1. 包括程序和数据规格说明 2.1.5. 开发计划 2.1.6. 软件集成和测试计划 2.1.7. 质量保证计划 2.1.8. 安全和测试信息 2.2.1. 培训手册 2.2.2. 参考手册和用户指南 2.2.3. 软件支持

    2023年04月26日
    浏览(35)
  • vue项目-后台管理系统

    前言: 一个传唱度极高的前端项目,及其适合像博主这样的小白练手。特以此文章记录下项目基本的创作思路,并且文末附赠项目源码,思维导图及一些后台文件,有兴趣可自取。希望对朋友们有用。 结构: 一,登录页 二,主页面 1,用户管理 用户列表 2,权限管理 角色列

    2024年02月16日
    浏览(39)
  • No.022<软考>《(高项)备考大全》【第07章】项目成本管理

    成本管理一般上午一般考3分左右 案例分析喜欢考,掌握挣值分析、预测技术计算 论文写作也需要掌握 1、发生成本失控的原因:①对工程项目认识不足;②组织制度不健全;③方法问题;④技术的制约;⑤需求管理不当。 ★2、产品的全生命周期成本就是在产品或系统

    2023年04月09日
    浏览(42)
  • 【开源项目】ELADMIN 后台管理系统

    一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分离的后台管理系统 开发文档:  https://eladmin.vip 体验地址:  ELADMIN 账号密码:   admin / 123456 后端源码 前端源码 github GitHub - elunez/eladmin: 项目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue的前

    2024年02月07日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包