记，第一个独立完成的项目Q

问题如下

1. 根据接口请求地址变更需求
   因为想要打包后也可以在服务端直接修改请求接口的地址，所以在public文件夹下新建config.js（public文件存储静态资源的，放在public目录下的资源会被直接复制，不会经过webpack的打包处理）

//将变量直接挂载到 window 上
window.Global = {
    baseURL: 'http://xxxxx',
    // baseURL: 'http://xxxxx',
}

之后在index.html中引用

 <script src="./static/js/config.js" type="text/javascript"></script>

在整个项目中就可以直接通过 window.Global.baseURL 取到

2.将axios请求封装一下

//在这里配置axios实例,可以新建多个来请求不同域名
const service = axios.create({}）

import axios from 'axios'
import { Message,Loading} from 'element-ui';
import router from "../router"

const service = axios.create({
  baseURL: window.Global.baseURL,	//请求地址，使用的config.js定义的地址
  timeout: 3 * 10000	//响应超时
})

//为项目中统一配置页面加载loading定义一个变量
let loadingInstance

// 2.请求拦截器
service.interceptors.request.use(config => {
   config.data = JSON.stringify(config.data); //数据转化
   config.headers = {
     'Content-Type':'application/json ' 
   }
   //请求接口数据时，需要loading
  loadingInstance = Loading.service({ text: "请稍等...",background: 'rgba(0, 0, 0, 0.8)',fullscreen: true })
  return config
}, error => {
	//请求出错，显示错误信息并关闭loading
  loadingInstance.close()
  Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理，关闭loading等 
  if (loadingInstance) {
    loadingInstance.close()
  }
  return response
}, error => {
  loadingInstance.close()
  //以下是对返回不同代码进行的相应提示，举个例子显示
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        Message({
            message: "错误请求",
            type: "error"
        });
        break;
      default:
        Message({
            message: `连接错误${error.response.status}`,
            type: "error"
        });
    }
  } else {
    if (JSON.stringify(error).includes('timeout')) {
      Message({
        message: "服务器响应超时，请刷新当前页",
        type: "error"
      });
    }
    Message({
        message: "连接服务器失败",
        type: "error"
    });
  }
  Message.error(error.message)
  return Promise.resolve(error.response)
})
export default service	//给一个出口用来导出

3.使用localStorage暂存用户信息

起初只是在一个页面用到，所以只在一个模块页面 import 进 js
后面有需求需要每个页面都要获取当前用户信息，就在 main.js 引入后使用，挂载到vue的原型上

localStorage.js

var storage={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    } 
}
export default storage;

main.js

import storage from './utils/localstorage'
Vue.prototype.storage = storage

随即在各个页面中就可以通过	this.storage	使用

this.storage.set("user", res.data);
let user = this.storage.get("user");

4.select框选中但是页面没有更新多选框的选中状态

页面上显示的内容未更新，此时就可以使用$forceUpdate强制更新下

if (val.isCheck == true) {
    this.checkList.push(val.OID);
    this.$forceUpdate();
}