这个后台管理系统项目基本已经完成
开始
运行
yarn dev
默认用户名与密码
username:admin
password:111111
开源模板地址
模板地址:https://github.com/PanJiaChen/vue-admin-template
模板下载:git clone https://gitclone.com/github.com/PanJiaChen/vue-admin-template.git
githee地址:https://gitee.com/GeSir_2325/shangpinghui-houtai.git
项目目录结构
buile
-----index.js webpack配置文件
mock
-----mock模拟数据文件夹
public
-----静态资源文件夹 项目打包不会编译该文件
src
-----api 请求相关文件夹
-----assets 静态资源文件夹 项目打包时进行编译
-----components 非路由/全局组件
-----icons svg矢量图
-----layout 常用的组件与混入
-----router 路由规则文件夹
-----store vuex
-----styles scss样式文件夹
-----utils
-----request axios的二次封装
-----views 路由组件
-----permisssion 导航守卫
-----setting 项目配置项文件
.env.development开发环境配置文件.
.env.production 生产环境配置文件.
.env.staging 测试环境配置文件.
el-Popconfirm 的确定事假为 onConfirm.
spu:相当于面向对象的类.
sku:相当于类的实例.
scoped属性的作用:
除了针对当前组件的样式之外还加上了自定义属性-hash值
而vue选择器则以属性选择器选择当前组件元素
注意:
子组件的根标签拥有父组件当中的自定义属性
如果父组件的样式scoped而且还想影响到子组件的样式 我们可以使用深度选择器
深度选择器可以实现样式的穿透
原生: >>>
less: /deep/
scss: ::v-deep
权限管理模块业务介绍
admin:超级管理员
权限管理:用户管理 角色管理 菜单管理
用户管理:角色管理 菜单管理 获取展示搜集数据
用户管理主要功能:对用户增删改查
角色管理主要功能:对用户新增角色
菜单管理主要功能:对菜单的增删改查
菜单权限的业务分析
不同用户登录菜单都一样因为路由是死的 只有路由根据不停的登录角色展示对应的路由
不同的用户登录时会向服务器发请求 服务器会把相应的菜单权限信息返回给我们 我们就根据服务器返回的信息 动态设置路由 根据不同的用户展示不同的菜单
实现菜单权限:路由模块去设置
按钮权限的业务分析:
不同的用户角色 的按钮有的是科技有个是不可见的
注:需使用树形控件 而eleui是获取不到树形控件的父节点id需要修改源码
详情查看test下的图片
超级管理员有按钮权限的路由 以及按钮显示权限 重vuex中进行bttons是否indexOf包含 进行显示
项目演示
在这里插入图片描述