关于github上stat最多的那个vue-element-admin什么什么的

前两天搞一个权限管理的demo，想搞成前后分离，公司也没有前端，所以就想着从github上下载个vue自己改一下，就挑了个star最多的，因为本身就是干后端的，而且后端技术都很垃圾，所以平时也不怎么研究前端技术，所以第一次看到vue就是what fuck？

后端吗，找到个前端项目最关注的就是怎么跟自己的后端进行数据交互，搞了几天才算明白，记录下以便以后再改人家的前端，忘了流程；

他那个项目提交数据的流程是这样的：

页面（使用dispatch分发）————》store（vuex存储状态，类似于session）————>api/user.js————》Utils/request.js(同意处理提交和返回值)————》stor（将返回值存入对应的状态字段中）————》页面————》跳转页面

最复杂的就是登陆的流程了，首先他在permission中写了router.beforeEach  每次路由转变的时候就会进入这个方法，在登录后需要一个token去查询出来用户的权限和角色，如果hasPermissions为空就会去执行getInfo 而这个方法就会将用户的权限和角色存入状态字段中，这样可以动态生成路由，生成路由的方式是去比较每个路由中的meta中的字符，如果有和之前保存的权限字段相同的话就加入路由中，这样实现了权限管理。我这里是把usreid当做token传入前端，然后再根据userid查询出来角色和权限返回给前端，要注意，这个项目的权限是要一个数组的形式，所以你后台要把权限放入数组中返回给前端。

复选框的实现

 <el-checkbox-group   v-model="checkOne" class="checkGroup" >
      <el-checkbox  v-for="operate in permissionList" :label="operate.menuCode"   :key="operate.menuCode">{{operate.dataUrl}}</el-checkbox>
 </el-checkbox-group>

 checkOne要在data中定义为数组，是用来保存你选中值，permissList是后台得到的一个list里面 保存的都是权限对象，这里的

:key="operate.menuCode"

就是在勾选复选框后把permissList中的menuCode放入checkOne，要注意这个checkOne只能是数组。

那么还有个问题，你如果直接提交一个数组的话，因为url带有[ ]这样的字符，高版本的tomcat规定url中不能带有[]这样的字符，所以我们需要把checkOne变成字符串传入后端，然后后端再解析成数组去存放

使用  .join （“-”）就可以把数组快速变成一个由-连接的字符串。