vue电商后台管理系统保姆级教程(七)——权限列表

7、权限列表

7.1通过路由展示权限列表组件

1、先创建 power文件夹里面写入Rights.vue 初始化代码结构
vue电商后台管理系统保姆级教程(七)——权限列表_第1张图片
在路由中导入文件:
vue电商后台管理系统保姆级教程(七)——权限列表_第2张图片
在home路由的子路由规则中定义子路由,组件就能通过路由的形式加载出来
vue电商后台管理系统保姆级教程(七)——权限列表_第3张图片

7.2 绘制面包屑导航和卡片视图

效果图:

vue电商后台管理系统保姆级教程(七)——权限列表_第4张图片
面包屑导航:
vue电商后台管理系统保姆级教程(七)——权限列表_第5张图片
卡片视图:
vue电商后台管理系统保姆级教程(七)——权限列表_第6张图片

7.3 调用API获取权限列表的数据

API接口:
vue电商后台管理系统保姆级教程(七)——权限列表_第7张图片
先定义date数据,放一个rightsLists(权限列表)
vue电商后台管理系统保姆级教程(七)——权限列表_第8张图片
定义方法:请求数据,判断是否成功,成功则返回数据
vue电商后台管理系统保姆级教程(七)——权限列表_第9张图片
这样就获取到列表了,下节渲染列表

7.4 渲染权限列表UI结构

stripe隔行变色:
el-tag标签需要在element.js中注册,
按需展示,使用v-if判断。
vue电商后台管理系统保姆级教程(七)——权限列表_第10张图片

7.5 角色,权限,用户 三者关系

vue电商后台管理系统保姆级教程(七)——权限列表_第11张图片

你可能感兴趣的:(vue,vue,javascript,数据库)