Vue前后端数据交互、代理转发，response公共处理

1.前后台交互

　　Vue前后端交互可以通过下面两种方式实现；

　　方式1：通过vue-resource中

this.$http.post('/api/sys/login/getPasskey.do',{
          keytype:'SESSION_PASSKEY'
        }).then(function(res){
          alert(res.data);

        },function(res){
          alert(res.status)
        });

　　方式2：通过axios

axios.doPost('/api/sys/login/getPasskey.do',{

          keytype:'SESSION_PASSKEY'
        }).then(function(res){
          alert(res.data);

        },function(res){
          alert(res.status)
        });

　　这件建议使用方式2；

这里对方式2进行了封装，详细如下：

　　目录结构：

　　文件：代码如下

/**
 * Created by Zl on 2019/4/14.
 */
import axios from 'axios'

export default {

  httpMethod: {
    GET: 'get',
    POST: 'post',
    PUT: 'put',
    DELETE: 'delete'
  },

  instance: axios.create({
    baseURL: '/api',
    timeout: 10000,
  }),


  /**
   *
   * @param url
   * @param pathParams
   * @param options
   * @returns {*|Promise}
   */
  doGet(url, pathParams = null, options = null) {
    return this.doRequest(url, this.httpMethod.GET, pathParams, null, options)
  },

  /**
   * Http Post
   * @param url
   * @param pathParams
   * @param body
   * @param options
   * @returns {*|Promise}
   */
  doPost(url, pathParams = null, body = null, options = null) {
    return this.doRequest(url, this.httpMethod.POST, pathParams, body, options)
  },

  /**
   * Http Put
   * @param url
   * @param pathParams
   * @param body
   * @param options
   * @returns {*|Promise}
   */
  doPut(url, pathParams = null, body = null, options = null) {
    return this.doRequest(url, this.httpMethod.PUT, pathParams, body, options)
  },

  /**
   * Http Delete
   * @param url
   * @param pathParams
   * @param options
   * @returns {*|Promise}
   */
  doDelete(url, pathParams = null, options = null) {
    return this.doRequest(url, this.httpMethod.DELETE, pathParams, null, options)
  },

  /**
   * Http Request
   * @param url
   * @param method
   * @param pathParams
   * @param body
   * @param options
   * @returns {Promise}
   */
  doRequest(url, method, pathParams, body, options) {
    let wrapURL = this._wrapUrl(url, pathParams)
    let request = null
    switch (method) {
      case this.httpMethod.GET: {
        if (options !== null) {
          request = this.instance.get(wrapURL, {params: options})
        } else {
          request = this.instance.get(wrapURL)
        }
        break
      }
      case this.httpMethod.POST: {
        request = this.instance.post(wrapURL, body, options)
        break
      }
      case this.httpMethod.PUT: {
        request = this.instance.put(wrapURL, body, options)
        break
      }
      case this.httpMethod.DELETE: {
        request = this.instance.delete(wrapURL, options)
        break
      }
    }
    return this._requestPromise(request)
  },

  /**
   * Request Promise
   * @param request {Promise} Axios Http Promise
   * @returns {Promise}
   * @private
   */
  _requestPromise(request) {
    return new Promise(function (resolve, reject) {
      request.then(response => {
        if (response.data.status === 0) {
          resolve(response.data)
        } else {
          reject(response.data.message)
        }
      }, error => {
        reject(error)
      })
    })
  },

  /**
   * 从URL匹配出参数pathParams
   * @param {string} url
   * @param {object} params
   * @returns {string}
   * @private
   */
  _wrapUrl(url, params) {
    if (params !== null) {
      let matches = this._getMatches(url)
      for (let match of matches) {
        let value = params[match.replace(':', '')]
        if (value !== null) {
          url = url.replace(match, value)
        }
      }
    }
    return url
  },

  /**
   * 正则Group匹配
   * @param {string} string
   * @returns {Array}
   * @private
   */
  _getMatches(string) {
    let matches = []
    let regex = /(:[a-z_A-Z]+)/
    let match = regex.exec(string)
    while (match !== null) {
      matches.push(match[1])
      string = string.replace(match[1], '')
      match = regex.exec(string)
    }
    return matches
  }
}

　　使用方式：

　　　　 

　2.配置转发　　

　　通过前端用的服务域名和端口和后台并不是同一个，比如前端是localhost:4200,后端是localhost:8080,这时候需要将前端的请求到8080上，这时候就需要使用转发；配置如下：

　　

　　

proxyTable: {
      '/api': {
        target: 'http://localhost:8089', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: false, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
        pathRewrite: {
          '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
        }
      }
    },

　　即对所有以api开头的请求进行转发到localhost:8089上，同时去掉api前缀；

　　转发前请求路径：localhost:4209/api/sys/admin/getPassKey.do;配置后路径：localhost:8089/sys/admin/getPassKey.do

 3. response公共处理