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
<template>
  <div class="test">
    <div id="content">
      <p @click="changeTheme('theme')">默认主题</p>
      <p @click="changeTheme('theme1')">主题二</p>
      <p @click="changeTheme('theme2')">主题三
      </p>
    </div>
  </div>
</template>
// js
<script>
export default {
  name: 'Theme',
  methods: {
    changeTheme(theme) {
      if (localStorage.getItem('changeTheme') === theme) return // 做防抖
      localStorage.removeItem('changeTheme')
      window.document.documentElement.setAttribute('data-theme', theme) // 关键代码
      localStorage.setItem('changeTheme', theme)
      this.$bus.$emit('changethemes', theme)
    }
  }
}
</script>

第二步：
找到 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');

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

<style lang="scss" scoped>
    @import "~@/styles/index.scss";
	.test {
		@include bgColor($background-color-theme);
		@include content($content-color-theme);
	}
</style>

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

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

<template>
  <div>
    <p>{{ obj.name }}</p>
     <p>{{ obj.age }}</p>
      <p>{{ obj.salary }}</p>
    <button @click="addObjAttribute">按钮</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'zhangsan',
        age: 28
      }
    }
  },
  methods: {
    addObjAttribute() {
      this.$set(this.obj, 'salary', 20000)
    }
  }
}
</script>

3、保留几位小数点

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

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