springboot + vue antes y después del final del combate de seis interfaz de gestión unificada del proyecto de separación vue

Hace algún tiempo, demasiado ocupado (o demasiado flojo a sí mismos), durante mucho tiempo no escribió un blog, poner en marcha un blog reciente, hoy para hablar sobre un vue interfaz de gestión unificada.
vue proyecto se inició por primera vez cuando, básicamente, todas las páginas llamadas interfaces de vue son cada escritos en el interior de cada página, por lo que habrá duplicación de código como 500.404 y así sucesivamente juicio, estos códigos básicos puede ser abstraído.
El primer paso en el archivo de solicitud abstracta

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

El segundo paso en función de los diferentes negocios de abstracción js, por ejemplo, para el usuario

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'
  })
}

El tercer paso, que requiere vue
js primera introducidas

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

A continuación, llame al método de

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))
        }
      })
    },

Eso es todo