Vue2.0+ElementUI⼿写权限管理系统后台模板（⼀）——简
述
简介
最近写了⼀个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项⽬开发所需的框架功能，开发者使⽤的时候只需要专注于项⽬的业务逻辑就好。同时接下来会让你拥有⼀个⾃⼰完全掌控的框架。
源码地址：
github：
码云：
vue-xuAdmin是基于vue2.0全家桶 + element-ui 开发的⼀个后台模板，实现了⽆限级菜单，页⾯、按钮级别的权限管理，为了减少前后端的沟通成本，页⾯、按钮级别的权限验证和动态路由表的存储校验，也都由前端完成，这样前端新建页⾯或者删除页⾯都不需要告诉后台去增加删除路由表
部分截图
2. 准备⼯作
-
开发环境
node.js v8.0+
webpack v3
git
-技术栈
ES6+
vue2.0+
vue-router
vuex
axios
scss
element-ui v2.4+
3. 基础框架功能
- 登录、退出
+ 基于token
- 状态拦截、404页⾯
- 动态加载路由
- 页⾯、按钮指令权限管理
- ⽆限级菜单
- 封装vue-i18n@8.x国际化组件
- 系统全屏化
- 菜单收缩
-
icon 图标
+ tab标签导航
- 右击快捷功能
- 表格拖拽排序
- 编辑器
- markdown（编辑器⽬前只封装了这⼀个组件，重写了markdown编辑和预览的⽪肤，实时获取：markdown，html，json 三种格式⽂本）前端页面模板
- Echarts 组件封装
封装了⼀些element-ui没有但是常⽤的组件，正常需要的功能element-ui⾥⾯都有，可以直接复制，如果element-ui不能满⾜你的需求只有⾃⼰写了
4. 开发
登录
登录页⾯只有输⼊账号密码，需要验证码的可以⾃⾏去搜第三⽅验证插件，有收费有免费。这⾥仅为了测试，就把输⼊的账号当做 token 来存储，完成整个系统的会话，实际开发以登录成功后后台返回的 token 为准
// 登录页⾯
submitForm () {
let that = this
if (this.loginForm.username === '' || this.loginForm.password === '') {
this.$message({
showClose: true,
message: '账号或密码不能为空',
type: 'error'
})
return false
} else {
// 将 username 设置为 token 存储在 store，仅为测试效果，实际存储 token 以后台返回为准        that.$store.dispatch('setToken', that.loginForm.username).then(() => {
that.$router.push({path: '/'})
}).catch(res => {
that.$message({
showClose: true,
message: res,
type: 'error'
})
})
}
},
// vuex
state: {
token: ('token') // 防⽌刷新页⾯或者在新标签页打开，从cookie获取初始token
},
mutations: {
setToken (state, token) {
Cookies.set('token', token ,{ expires: 1/24 }) // 引⽤‘js-cookie’模块，存储 token 到cookie
}
},
actions: {
setToken ({commit}, token) {
return new Promise((resolve, reject) => {
commit('setToken', token)
resolve()
})
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。