前后端数据交互--axios

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了。