vue-admin-template学习（一）

vue-admin-template

在学习vue的过程中，想要获取一个vue的脚手架，便于快速进行开发，选择了vue-admin-template，将该框架进行二次开发，作为vue初学者，踩了很多坑，以此记录分析和修改。

github：https://github.com/PanJiaChen/vue-admin-template
branch: tag\3.11.0

框架结构

至于在src中的结构，就是基本的vue项目结构了。

克隆运行项目

1. 在IDEA中打开该项目
2. cnpm install(首先注册好淘宝的npm，这里就不记录了)
3. cnpm run dev
4. 浏览器访问 http://localhost:9528/ 即可看到登录页面

vue-admin-template项目改造

要想对已有的demo进行二次开发，首先的是要对demo进行了解，我认为要想比较快速的上手进行开发，拿出demo的某个请求进行分析，然后将该完整的请求过程换成自己所要开发的项目。在这里，我就拿出vue-admin-template的“登录”请求做分析。

（一）分析登录请求的思路

请求路线

既然是登录功能，那么就从登录页面开始分析。
在src\views\login\index.vue中：
除开页面基本的输入验证信息，剩下的主要方法就是登录了，如下：

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

登录

(1) this.$store.dispatch('Login', this.loginForm).then(()
该请求使用$store.diepatch调取src\store\modules里的user.js的Login方法，如下：

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

（2）login(username, userInfo.password).then(response =>
在new Promise中，通过login调用了src\api的login.js中的login方法
如下：

import request from '@/utils/request'
export function login(username, password) {
  return request({
    url: '/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

（3）该方法中return request，显然调用了第一行import request对应的文件中的方法。src\utils中的request.js很重要。该方法创建axios实例、 request拦截器、response 拦截器。如下：

创建axios实例

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

在该方法中，很重要的一点是baseURL的指向。
其指向了config下的dev.env.js中的配置，如下：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
})

在后面进行二次开发时，需要将BASE_API的值修改为实际项目的接口基本地址，如http://localhost:8082。

request拦截器

// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

该拦截器主要在有request时，如果在store中存储有token则在headers中带上x-Token，实际这个拦截器中直接return config即可，
然后在登录完成后，访问其他页面的时候带上token访问。这个暂时不考虑分析。

response 拦截器

service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data
    if (res.code !== 20000) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      ------省略------
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

该拦截器主要用于在请求完后，后台返回的消息进行处理。

（4）这个”登录“请求从开始发起request到response结束，基本流程就是这样。那么，在该项目登录模块中，form数据的提交到验证在到返回数据，获取token，获取用户信息，怎么都没有看到在上面分析的方法中呢。原因是在上面的框架结构图中，使用了mock，mock的简单使用请看vue中使用mock

（5）在mock目录中，index.js中，定义了mock的拦截，将对“登录”请求的提交/user/login进行拦截，如下：

import userAPI from './user'

Mock.mock(/\/user\/login/, 'post', userAPI.login)

该拦截将会调用mock目录下的user.js中的login方法。如下：

login: res => {
    const { username } = JSON.parse(res.body)
    const data = tokens[username]

    if (data) {
      return {
        code: 20000,
        data
      }
    }
    return {
      code: 60204,
      message: 'Account and password are incorrect.'
    }
  },

于是就会将响应数据返回，这样在src\utils\request.js中，response响应拦截就会获取到数据，并进行相应判断，按发起登录请求路线返回，在src\store\modules里的user.js登录方法中设置setToken，直至返回src\views\login\index.vue，并进行相应页面跳转。

（二）分析登录请求结结束

到这里，已经将在vue-admin-template中的“登录”请求进行了分析，其他请求的分析也是这样。作为初学者，在使用这个框架时，碰到了很多问题，分析了比较久的时间，特此记录下，为了以后碰到相应的问题不在耗费太多的时间，也为了给即将学习的朋友一点思路。写得不好，感谢指出。经过分析后，后面将会进行项目的二次开发。

（三）项目改造

首先，我们要改造项目，并且是“登录”功能，那么先根据上面分析的，修改项目的API接口为我们自己的，通过分析，如下：

dev.env.js配置

(1)运行起来项目后，打开浏览器访问，F12打开调试控制台，选择Sources中，打开上述分析中的request.js，在如图位置打上断点，在request拦截器中，查看config中的数据

或者在console中，直接打上“config”查看

可以看到此处的baseURL的值为项目下config目录中,dev.env.js中配置的BASE_API

登录响应

在上述方法中，再次在request.js的响应拦截处打个断点，查看响应的数据，如下：


可以看到相应的数据，而该数据的产生，就源于我们上面说的项目mock模拟数据，mock目录下index.js拦截了url，调用了user.js中的login方法



于是在request.js的response拦截中获取了相应的数据。

修改

（1）将dev.env.js中的BASE_API值修改为项目（这里已我已有的后端项目接口举例，已启动后端项目）

这时来试试登录会怎么样,还是在request.js上的两个拦截器中打上断点

从图中可以看出来，接口的baseURL已经变成我们想要的，但是竟然响应返回的值还是mock中的模拟数据，并且跳过断点后，仍然是登录成功进入系统。
这里还是mock拦截在操作，并不会真正访问我们自己项目的api
一种解决方法：

如上图，将mock拦截注销掉就可以了，这样user/login就不会被mock拦截，就可以访问我们的后端api。

（2）后端登录接口：http://localhost:8082/login
postman测试：


在src\api\login.js中，将login方法的请求路径修改为/login（原来为/user/login）

这样，当点击登录时就可以调用我们的后端登录api接口了。
再次测试登录页面登录功能
先输入错误的密码


可以看到返回的结果中就是我们后端接口的返回数据。上图中报错消息的处理后面在进行。

输入正确的密码

可以看出返回了正确的数据，报错信息仍然和上面的报错信息图一样。因为我们还没对request.js中的response拦截器中的code进行修改，它判断出code不为20000的都是报错误消息，但是我们的后端接口200是正常，非200是异常。所以接下来，我们对拦截器进行简单修改，仅作为思路。

（3）下面贴上修改前和修改后的

import { Message, MessageBox } from 'element-ui'   //这个位置也注意，后面不使用MessageBox要删除，否则报错

service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data
    if (res.code !== 20000) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm(
          '你已被登出，可以取消继续留在该页面，或者重新登录',
          '确定登出',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

修改后：

import { Message } from 'element-ui'

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data
    console.log(res)
    if (res.code !== 200) {
      Message({
        message: res.msg,
        type: 'error',
        duration: 5 * 1000
      })

      // // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      //   MessageBox.confirm(
      //     '你已被登出，可以取消继续留在该页面，或者重新登录',
      //     '确定登出',
      //     {
      //       confirmButtonText: '重新登录',
      //       cancelButtonText: '取消',
      //       type: 'warning'
      //     }
      //   ).then(() => {
      //     store.dispatch('FedLogOut').then(() => {
      //       location.reload() // 为了重新实例化vue-router对象 避免bug
      //     })
      //   })
      // }
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.msg,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

再次登录，发现打印的登录成功，但是会报错，那是因为登录成功后触发了获取用户信息的方法，获取出错。后端api接口在登录成功时返回了用户的信息。要设置用户信息等，可以在下面的方面内设置，包括token，关于获取用户信息就不说了。

项目改造结语

关于对vue-admin-template的分析和改造就到此了，通过分析一个登录请求到响应，了解该项目的流程及功能点。至于其他的，可以参考该登录请求作为了解。
作为初学者，很多前端的知识都没有掌握，见谅，如有错误请指出，以期进步，感谢！