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

第一个独立完成的项目Q"/>

记，第一个独立完成的项目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 ' }//请求接口数据时，需要loadingloadingInstance = Loading.service({ text: "请稍等...",background: 'rgba(0, 0, 0, 0.8)',fullscreen: true })return config
}, error => {//请求出错，显示错误信息并关闭loadingloadingInstance.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();
}