实现一个后台管理系统 vue加element UI Node.js

项目结构大致如此

实现一个后台管理系统 vue加element UI Node.js

页面大致如此

实现一个后台管理系统 vue加element UI Node.js

讲一讲实现过程中的难点

主要就是角色权限模块 看图
实现一个后台管理系统 vue加element UI Node.js
结构就不说了,用的组件就是element中的el-table,el-table-column,el-card这些组件,具体的样式搭配啥的看自己需求
对,还有分配权限,看图
实现一个后台管理系统 vue加element UI Node.js
渲染展示数据,获取这些角色名称,这些就是写好组件,发送请求,获取到循环渲染上面
主要难点就是这些三级权限
通过递归的形式,获取角色下所有三级权限的id,并保存到 defKeys 数组中
就类似这种 getLeafKeys (node, arr) {
// 如果当前 node 节点不包含 children 属性,则是三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach(item => this.getLeafKeys(item, arr))
},
看图 结构以及逻辑
实现一个后台管理系统 vue加element UI Node.js
实现一个后台管理系统 vue加element UI Node.js
好了,先到这吧!