springboot + vue before and after the end of the separation project combat six vue unified interface management

Some time ago too busy (or too lazy themselves), for a long time did not write a blog, put up a recent blog, today to talk about a unified management interface vue.
Vue project first started when basically every page calls vue interfaces are each written on the inside of each page, so there will be duplication of code such as 500,404 and so on judgment, these basic code can be abstracted.
The first step in the abstract request file

import axios from 'axios'
import { Message, Loading } from 'element-ui'
let loadinginstace
let baseUrlTemp = location.origin
if (baseUrlTemp.includes('localhost')) {
  baseUrlTemp = '127.0.0.1:9952/api'
}
console.log('页面地址==', baseUrlTemp)
// 创建axios实例
const service = axios.create({
  baseURL: 'http://127.0.0.1:9952/api', // api 的 base_url
  // timeout: 5000, // 请求超时时间
  withCredentials: true
})

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

// response 拦截器
service.interceptors.response.use(
  response => {
    loadinginstace.close()
    /**
     * code为非200是抛错 可结合自己业务进行修改
     */
    if (response.status === 200) {
      const res = response.data
      if (res.code === '0' || res.code === 0) {
        return response.data
      } else {
        if (res.code === '401' || res.code === 401) {
          location.href = '/login'
        } else {
          res.message &&
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          return response.data
        }
      }
    }
  },
  error => {
    loadinginstace.close()
    var message = (error.response && error.response.data.message) || ''
    switch ((error.response && error.response.status) || 302) {
      case 400:
        break
      case 401:
        // message = "登录已超时，请重新登录"
        // if (!window.tipLock) {
        // window.tipLock = true
        // toLogin(error.response.data.loginUrl)
        // }
        location.href = error.response.data.loginUrl
        break
      case 403:
        message = '未授权请求'
        break
      case 404:
        message = '请求的资源不存在'
        break
      case 500:
        message = '服务器内部错误'
        break
      case 302:
        message = '请重新登录'
        // toLogin(error.response.data.loginUrl)
        // location.replace(error.response.data.loginUrl)
        break
    }
    Message({
      message: message || '未知错误',
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

The second step depending on the business abstraction different js, for example to user

import request from '@/utils/request'

// 用户列表接口
export function userList (data) {
  console.log('用户列表传过来的参数' + JSON.stringify(data))
  return request({
    url: `/user/list`,
    method: 'post',
    data
  })
}

// 删除用户
export function deleteUser (param) {
  console.log('删除用户传过来的参数' + JSON.stringify(param))
  return request({
    url: `/user/delete/` + param,
    method: 'delete'
  })
}

export function saveOrUpdate (data) {
  console.log('新增或者更新用户传过来的参数' + JSON.stringify(data))
  return request({
    url: `/user/saveOrUpdate`,
    method: 'post',
    data
  })
}

// 查询用户
export function getUserById (param) {
  console.log('查询用户传过来的参数' + JSON.stringify(param))
  return request({
    url: `/user/` + param,
    method: 'get'
  })
}

The third step, vue which calls
first introduced js

import {userList, deleteUser, getUserById} from '../../api/user'

Then call the method in

listAllUser (pageNum) {
      pageNum = pageNum == null ? this.pageNum : pageNum
      console.log('---------' + pageNum)
      var userSearchDTO = {pageNum: pageNum == null ? this.pageNum : pageNum, pageSize: this.pageSize, name: this.input}
      userList(userSearchDTO).then(res => {
        // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
        let { code, data } = res
        if (code === 0) {
          // 成功了
          this.list = data.list
          this.total = data.total
          this.pageSize = data.pageSize
          this.currentPage = data.pageNum
          console.log('用户列表查出来的数据' + JSON.stringify(data))
        }
      })
    },

That's all