vue配置axios统一管理后端接口API

一、安装axios

执行命令安装： npm install axios –save-dev

二、创建request.js引入axios

在src目录下新建文件夹utils,在该文件下创建request.js文件，引入axios。后续一些实用的工具js都放在该目录下，如过滤器、token等。

import axios from “axios”;

const request = axios.create({

baseURL: ‘http://localhost:8090/api’,

timeout: 3000

})

export default request;

baseURL为后端接口通用地址

三、统一管理后端API接口地址

在src目录下创建api文件夹用于存放后端的接口地址。

在api下创建user目录，在use目录下创建user.js用来存放后端user相关的接口地址

例如：

import request from ‘@/utils/request’

export function getById(id) {

return request({

method: ‘get’,

url: ‘/user/getUserById’,

params: {

‘userId’: id

}

})

}

前后端参数如何传递获取，参考之前的博客： [前后端分离，后端参数的接收_

前后端分离，后端参数的接收@RequestParamRequestParam只能用于接收请求带的paramse.g: http://localhost:8080/XXXX/selectUser?userName=admin@PathVariablePathVariable只能用于接收url路径上的参数e.g: http://localhost:8080/XXXX/selectUser/adminPathVariable一般用于get和delete请求，RequestParam一般用于post请

“前后端分离，后端参数的接收_”)

四、修改Index.vue页面，添加按钮测试后台接口地址

五、启动后端与前端，点击按钮测试

注：

后端需在controller接口上方添加注解

@CrossOrigin

允许跨域，也可在前端配置跨域