vue-element-admin 使用总结

(写的不对的地方,欢迎指正,项目总结,请勿喷,谢谢)
官网https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

一、登录权限

登录在src/views/login/index.vue ,登录只是账号密码,登录后获取用户信息其中包含用户角色,路由配置在src/router/index.js,路由中配置了每个路由对应的角色
二、侧边栏动态渲染
src/router/index.js 路由配置里有公共的路由constantRoutes和异步路由asyncRoutes,异步路由是根据在 meta里设置roles来实现动态的meta: { title: ‘permission’, icon: ‘lock’, roles: [‘admin’, ‘editor’]},
(注:有 roles 的时候,为当前数组中的角色的时候显示页面;没有 roles 的时候,页面默认显示)

权限的判断 是在 src/store/modules/permission.js文件里,有个actions。判断如果角色里包含admin(一个用户可多个角色,所以返回的角色是个数组),就显示全部的,否则的话需要做判断,还是根据 route.meta.roles.includes(role) 来判断路由是否包含返回的角色

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('系统管理员')) { // 数组 includes() 函数,判断数组中是否存在,返回bool值(和indeOf作用类似)
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

动态加载路由肯定要在全局做判断,需要写在路由跳转之前router.beforeEach,根据目录结构可以知道是在src/permission.js中, store.dispatch(‘GenerateRoutes’) 通过调用vuex中的方法获得路由权限,没有权限的话就跳401

 1 router.beforeEach((to, from, next) => {
 2   if (store.getters.token) { // 判断是否有token
 3     if (to.path === '/login') {
 4       next({ path: '/' });
 5     } else {
 6       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
 7         store.dispatch('GetInfo').then(res => { // 拉取info
 8           const roles = res.data.role;
 9           store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
10             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
11             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
12           })
13         }).catch(err => {
14           console.log(err);
15         });
16       } else {
17         next() //当有用户权限的时候,说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面
18       }
19     }
20   } else {
21     if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
22       next();
23     } else {
24       next('/login'); // 否则全部重定向到登录页
25     }
26   }
27 });

三、切换主题
由于vue-element-admin自带的切换主题功能是利用elementUI库进行的,只能满足颜色的切换,不能实现不同颜色的图片进行切换,所以我用了比较笨的方法实现切换主题:window.document.documentElement.setAttribute(‘data-theme’, theme)
第一步:自己定义主题的组件

// html

// js

第二步:
找到 src --> style -->mixin.scss 定义混合样式(下图定义了颜色和图标的切换)

// 主题色
@mixin bgColor($color) {
  background-color: $color;
  [data-theme="theme"] & {
    background-color:$background-color-theme;
  }
  [data-theme="theme1"] & {
    background-color:$background-color-theme1;
  }
  [data-theme="theme2"] & {
    background-color:$background-color-theme2;
  }
}

// 不同图标更换
@mixin content($color) {
  content: $color;
  [data-theme="theme"] & {
    content:$content-color-theme;
  }
  [data-theme="theme1"] & {
    content:$content-color-theme1;
  }
  [data-theme="theme2"] & {
    content:$content-color-theme2;
  }
}

第三步:
找到 src --> style -->variables.scss (对应第二步)

// button的颜色
$background-color-theme: #EB5A30;
$background-color-theme1: #73b3f7;
$background-color-theme2: #42979f;

// 不同图标/图片更换
$content-color-theme: url('~@/assets/takeExecute_icon/right_arrows_origin.png');
$content-color-theme1: url('~@/assets/takeExecute_icon/right_arrows_blue.png');
$content-color-theme2: url('~@/assets/takeExecute_icon/right_arrows_green.png');

第四步: 直接在组件内引用就可以了,点击不同的按钮就会显示不同的主题


最后:图片的切换只能以背景色的方式引入,不能在html内用img标签引用,如果要引入img标签形式的图片,只能到组件的内部单独操作(不利于维护,不推荐)

总结一下使用vue的几个小坑:
1、eventBus 事件总线
全局事件总线的声明相信大家都会,这里不再缀诉
A、B两个组件是兄弟组件,当A组件用 this.$bus.$emit 的时候,B组件一定要用this.$bus.$on来接,这时候一定不要忘记清除时间总线,因为$on是不会自己清除的,必须手动清除,否则会一直累加
2、vue 中 this.$set() 的使用
当给对象或数组添加属性,发现页面并没有渲染的时候,说明新添加的属性不是一个响应式的数据,如何实现数据变成响应式,实现数据的双向绑定呢?这时候this.$set()函数就登场了,使用方法如下



3、保留几位小数点

ratainDecimal(num) {
  return Math.ceil(num*10)/10 // 保留两位就把10改成100,依此类推
}
ratainDecimal(123.3456723)

websocket的使用在我上一篇文章中,excel的导入导出以及预览,如果有需要可以私信我
还有很多小问题没有总结,第一次自己独立做项目,还是很紧张的,还好有过开心,有过泪水,都过去了,希望在前端的道路上越走越远!!

你可能感兴趣的:(my_vue,vue,javascript)