Vue学习使用心得(三)：对vue-admin-template轮子学习的心得体会（上）

写在前面

• 关于Vue的具体使用点这里，这个是Vue的官方文档，里面对于语法和注意事项已经写的十分详细了。
• 下文用到的轮子是Panjiachen大佬封装实现的，本文只是结合本人的开发经验对大佬的代码进行理解并记录思维过程的结果。
• 因为本人长于后台开发，所以成文可能存在错误和不足，希望各位前端前辈不吝指出，谢谢。

轮子

原地址点我

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

几点理解

登陆

src/views/login/index.vue

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

普普通通的登陆按钮，绑定了点击事件handleLogin

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

• this.$refs.，类似于js中的dom操作，通过这种方法来访问元素或子组件的实例
• loginForm.validate，校验表单项，其中校验规则通过:rules=配置
  • 其中，username的校验引用到了@/utils/validate中的validUsername如下①
    这里限定了登陆名为admin或者editor，可以根据自己实际情况修改，比如校验登陆名中的特殊字符、长度等。
• this.loading = true，定义在登陆按钮标签内，是一个加载等待的动画(转圈圈)，在登陆响应慢的时候给用户以反馈。
• this.$store.dispatch('user/login', this.loginForm)，Vue-store组件，用于缓存一些信息，这里是调用了src/store/modules/user.js中的login方法，如②。
  • .then(() => {，是正常回调，即登陆返回正常的响应码后，路由跳转到首页；然后关掉转圈圈。
  • .catch(() => {，是异常回调
    src/utils/validate.js
    ①

export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

src/store/modules/user.js
②

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }

• login({ username: username.trim(), password: password })，这里比较复杂
  • 首先这个login函数，是通过src/api/user.js文件定义的，返回一个包含请求路径、请求参数和请求方式的request；
  • 然后，这个request是这套实现对axios进行简单的封装得到的，详见src/utils/request.js，里面定义了baseURL、timeout等，还有对请求和响应都有一套统一的预处理，比如token过期、多端登陆等简化了后续的业务代码实现。axios这个组件一般是在Vue2.x版本中用来发送请求，可以类比为Ajax；
  • 最后是引入了Mock.js，拦截Ajax请求返回模拟的数据，多用于开发阶段前端联调前测试等。在这里，这个组件拦截了登陆请求，并返回定义的结果。

getInfo

登陆请求返回成功后，路由会跳转到首页/，路由跳转的时候，会判断用户是否有效，即执行一次这个方法。比如登陆超时会跳转到登录页，让用户重新登陆。具体实现参考src/permission.js。
这个方法会根据登陆保存的token取获取其他的信息。举个例子，这套轮子里另外获取了name和avatar，第二个是用户头像。

其他

页面元素、图表等的使用，请分别参考ElementUI和Apache Echarts