脚本宝典收集整理的这篇文章主要介绍了Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近写了一个基于vue2.0
+element-ui
权限管理系统的后台模板,包含了正常项目开发所需的框架功能,开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。
源码地址:
预览地址:https://nirongxu.github.io/vu...
vue-xuAdmin是基于vue2.0全家桶 + element-ui 开发的一个后台模板,实现了无限级菜单,页面、按钮级别的权限管理,为了减少前后端的沟通成本,页面、按钮级别的权限验证和动态路由表的存储校验,也都由前端完成,这样前端新建页面或者删除页面都不需要告诉后台去增加删除路由表
-开发环境
-技术栈
- 登录、退出
+ 基于token
- 状态拦截、404页面
- 动态加载路由
- 页面、按钮指令权限管理
- 无限级菜单
- 封装vue-i18n@8.x国际化组件
- 系统全屏化
- 菜单收缩
- icon 图标
+ tab标签导航
- 右击快捷功能
- 表格拖拽排序
- 编辑器
- markdown(编辑器目前只封装了这一个组件,重写了markdown编辑和预览的皮肤,实时获取:markdown,html,json 三种格式文本)
- Echarts 组件封装
封装了一些element-ui没有但是常用的组件,正常需要的功能element-ui里面都有,可以直接复制,如果element-ui不能满足你的需求只有自己写了
登录页面只有输入账号密码,需要验证码的可以自行去搜第三方验证插件,有收费有免费。这里仅为了测试,就把输入的账号当做 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: Cookies.get('token') // 防止刷新页面或者在新标签页打开,从cookie获取初始token
},
mutations: {
setToken (state, token) {
state.token = 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()
})
}
},
以上是脚本宝典为你收集整理的Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述全部内容,希望文章能够帮你解决Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。