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

忘是亡心i 2023-09-26 16:22 10阅读 0赞

**一、安装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相关的接口地址

例如： ![db84de3bb01543dbbf84ffb9f9d4778f.png][]

> 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请![favicon32.ico][]https://blog.csdn.net/shaogaiyue9745602/article/details/109049349?spm=1001.2014.3001.5501][RequestParamRequestParam_paramse.g_ http_localhost_8080_XXXX_selectUser_userName_admin_PathVariablePathVariable_url_e.g_ http_localhost_8080_XXXX_selectUser_adminPathVariable_get_delete_RequestParam_post_favicon32.ico_https_blog.csdn.net_shaogaiyue9745602_article_details_109049349_spm_1001.2014.3001.5501]

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

> <template>
> 
> <div>
> 
> 版本号：\{ \{version\}\}
> 
> <el-button type="primary" @click="getOne">获取数据</el-button>
> 
> </div>
> 
> </template>
> 
> <script>
> 
> import \{ getById \} from '@/api/user/user'
> 
> export default \{
> 
> name: 'Index',
> 
> data () \{
> 
> return \{
> 
> // 版本号
> 
> version: '3.3.0'
> 
> \}
> 
> \},
> 
> methods: \{
> 
> goTarget (href) \{
> 
> window.open(href, '\_blank')
> 
> \},
> 
>  getOne()\{ 
> 
>  getById('1').then(response => \{ 
> 
>  console.log(response)
> 
>  \})
> 
>  \}
> 
> \}
> 
> \}
> 
> </script>

**五、启动后端与前端，点击按钮测试**  ![7ea7659a109e458e94d0defb397463be.png][]

**注：**

后端需在controller接口上方添加注解**@CrossOrigin** 允许跨域，也可在前端配置跨域

[db84de3bb01543dbbf84ffb9f9d4778f.png]: https://img-blog.csdnimg.cn/db84de3bb01543dbbf84ffb9f9d4778f.png
[favicon32.ico]: https://g.csdnimg.cn/static/logo/favicon32.ico
[RequestParamRequestParam_paramse.g_ http_localhost_8080_XXXX_selectUser_userName_admin_PathVariablePathVariable_url_e.g_ http_localhost_8080_XXXX_selectUser_adminPathVariable_get_delete_RequestParam_post_favicon32.ico_https_blog.csdn.net_shaogaiyue9745602_article_details_109049349_spm_1001.2014.3001.5501]: https://blog.csdn.net/shaogaiyue9745602/article/details/109049349?spm=1001.2014.3001.5501
[7ea7659a109e458e94d0defb397463be.png]: https://img-blog.csdnimg.cn/7ea7659a109e458e94d0defb397463be.png