初次使用vue-admin-template后台管理系统模板（二）----登录业务及封装axios与API

2.后台管理系统登录业务的完成

2.1 先完成相应的静态组件

2.1.1 修改登录页部分文本。登录页主要用到elementUI的表单组件与按钮组件（el-form、el-form-item与el-button）；

2.1.2 按需修改登录页背景图片：

原背景样式（效果如上图）：

修改图片后样式：

更改背景的属性：

.bg{
    background : [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip]
}

** 一些常用属性的作用：

2.1.3 静态页面完成后，编写业务功能：登录。

触发按钮的点击事件执行函数时，首先对表单内容进行表单验证，验证返回为true则将el-button设为等待状态loading，再进行actions的派发,根据响应结果跳转页面，同时actions提交mutations（commit）更改state中的登录状态以及保存token等等，最后再设置el-button的状态loading（注意：此时用的还是mock模拟的数据）。

$store.dispatch('xxx',data)
$store.commit('xxx',data)

data即为载荷，指自定义的数据。 'xxx'有时是路径形式是因为开启了命名空间，actions中的业务是登录请求。

2.1.4 书写真实的项目接口API

一般会在src/utils/request/index.js中，先创建axios实例传入基本配置，并设置请求拦截器、响应拦截器，即axios的二次封装。

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'  //用于错误处理
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const request = axios.create({
  //1. 最终请求地址 = base url + request url
  baseURL: process.env.VUE_APP_BASE_API, 
  //2.CORS请求默认不发送Cookie和HTTP认证信息。但是有的后台要把Cookie发到服务器，要服务器同意，指定Access-Control-Allow-Credentials字段。在axios的配置文件中配置withCredentials属性，默认带cookie给后台。
  // withCredentials: true,
  //3. 请求超时时间
  timeout: 5000 
})

//请求拦截器
request.interceptors.request.use(
  config => {
    // 发送请求前的业务
    if (store.getters.token) {
      // 使每个请求都携带token
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    const res = response.data
    // 状态码判断，当服务器响应失败时的操作
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 利用elementUI的message组件，提示用户重登陆
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      //服务器响应成功时的操作
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

//对外暴露该axios实例
export default request 

首先在src/api/index.js中，接收request暴露的axios实例对象，封装项目的api。

方式一：

import request from '@/utils/request'  //引入上面创建的axios实例

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

方式二：

import axios from 'axios';
import request from './request'  //引入上面创建的axios实例

//登录的请求
export const loginAPI = (params) => request.post("/prod-api/login", params)

然后，使用真实的项目接口后，需要解决跨域代理问题，在配置文件vue.config.js中配置代理服务器（具体代码可以去webpack文档-中文文档-配置-DevServer-Proxy中查找），更改vue配置之后需要重启项目。

module.exports = {
  //...
  devServer: {
    //配置代理服务器进行跨域
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

最后，可以把封装好的API统一暴露，要么使用原型链的思路挂载到vue实例上，要么每次使用前引入对应组件。

1.使用原型链的思路挂载到vue实例上：

2.每次使用前将API引入对应组件