前后端数据交互--axios
目前流行的前后端数据交互，特别重要。
我们可以对Axios进行封装，封装之后我们可以通过这个工具发生get，post，put，delete这几种命令给后台，看用哪个，就看controller层，用哪一种请求。
步骤
1.先在vue里面创建一个utils文件夹，在然后在这个文件夹下面创建一个request.js文件（用来封装axios）。
2.安装axios组件，在前台工程打开终端local。
2.1 cd vue （这个是指安装到vue这个文件夹里面）
2.2 npm i axios -S (-S是指本地安装)
3.安装完之后需要引入，在request.js下面复制这些
import axios from 'axios'
//上面是引入这个包
//下面通过axios创建了request对象
const request = axios.create({
baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
//上面，axios返回结果里面有一个默认的属性 data，返回的属性全部存在data里面，上面就是将数据取出来，放到res里面
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
4.用存数据到后台演示，在前端知道，保存数据的按钮，找到他绑定的方法，在这里面将request引进来
request.post("/user",this.form).then(res=>{
console.log(res) //在控制台打印数据，可有可无
})
这里是因为后端用的post接口，/user是路由，form是因为这里用的表单就是数据输入的，.then(res=> 是将前面得到的数据存到res里面=>是取数据，这是一个链式编程
跨域问题
例如：8080的端口号，不能访问9090的端口号，这是浏览器做的限制。因为有可能前端和后端的端口号不一致导致的。
解决方法
上面的数据交互，就会遇到这个问题。
1.在vue这个大文件下面新建js文件，注意：一定在vue下面而不是src下面新建，名字vue.config.js。
2.在这里面copy下面代码
// 跨域配置
module.exports = {
devServer: { //记住，别写错了devServer//设置本地默认端口 选填
port: 9876, //端口号改为9876，随便自己，可有可无
proxy: { //设置代理，必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定
target: 'http://localhost:9999', //代理的目标地址，看自己前端的端口号，9090
changeOrigin: true, //是否设置同源，输入是的
pathRewrite: { //路径重写
'^/api': '' //选择忽略拦截器里面的内容
}
}
}
}
}
加入配置文件，哪怕是前端也需要重启。现在，只需要在上面的request.后面的后面的路径，前面加上/api，但request.js里面全局已经加上了/api，所以不需要加/api了。
