基于vue2和elementui的后台管理系统
vue2-admin
体验地址：
⼀级账号：admin 密码：123456
⼆级账号：visitor 密码：123456
vue2+element+axios 后台模板
为了减少打包体积，vue、elementui使⽤的是cdn引⼊，为了稳定性推荐使⽤⾃⼰的cdn服务。本⼈在⽇常使⽤中是将vue，element⽂件放在了⾃⼰的服务器，这样既保证了⼀定的稳定性和快速响应。也⽅便在其他项⽬中通过CDN引⼊。
引⼊mock，便于前后端分离开发。
对 axios 进⾏封装
在utils/request.js中可以配置请求头，
将请求的基础url配置在环境中
开发环境为.env.development
⽣产环境为.env.production
axios调⽤⽅式为：
this.$getAPI(url).then(res => {})
this.$postAPI(url).then(res => {})
router 权限控制
根据登录接⼝返回的level字段进⾏判断，其中meta的levelname表⽰页⾯所需权限，不配置默认全可以访问。给每⼀位⽤户添加了level字段，level字段由此⽤户所持有权限的页⾯的levelname拼接⽽成。
在router/index.js中含有路由守卫
VUEX
将vuex模块化，登录和权限控制单独放在⼀个模块下
防⽌vuex数据刷新丢失，引⼊vuex-persistedstate
// 为了防⽌刷新页⾯vuex中的数据丢失，可以选择性地将数据存⼊sessionstorage中，防⽌丢失
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中的isPC
isPC: val.user.isPC
}
}
})]
为了防⽌⽤户⼿动修改sessionstorage，添加了监听事件
window.addEventListener('storage', function (e) {
sessionStorage.setItem(e.key, e.oldValue)
});
⽂本根据路由⽣成侧边导航
router/levelRouters/index.js中配置登陆后⾸页的页⾯路由
其中meta的levelname表⽰页⾯所需权限，不配置默认全可以访问。给每⼀位⽤户添加了level字段，level字段有此⽤户所持有权限的页⾯的levelname拼接⽽成。
其中meta属性中配置侧边栏的icon，title，是否显⽰。当hidden:true时侧边导航栏不显⽰。
动态导航栏是根据level、levelname、hidden⽣成的。
初始包含页⾯
登录页⾯、
密码回页⾯、
404 页⾯、
Home 页
按钮节流
添加了基础的按钮节流代码，在button上绑定v-preventReClick即可。
// button节流，在button中添加v-preventReClick即可控制按钮，防⽌按钮连击，时间限制2s
Vue.directive("preventReClick", {
inserted(el, binding) {
el.addEventListener("click", () => {
if (el.style.pointerEvents !== "none") {
el.style.pointerEvents = "none"
vue element admin
setTimeout(() => {
el.style.pointerEvents = ""
}, 2000)
}
})
}
})

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