Vue+SpringBoot前后端分离教程四：前后端数据交互之Axios

港控/mmm° 2023-09-29 12:47 19阅读 0赞

### 前后端数据交互之Axios ###

*  一、Axios的安装
 *  二、封装Request请求
 *  三、前后端数据交互测试

# 一、Axios的安装 #

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 库，在vue中相较于Ajax有许多优点，我们接下来就直接介绍如何进行安装。

axios的中文官方文档：[http://www.axios-js.com/][http_www.axios-js.com]

yarn 安装命令：

> `yarn add axios`

![在这里插入图片描述][9c7187836bd44750901e666d58de4088.png]  
也可以用官网提供的命令安装：

> `npm install --save axios vue-axios`

# 二、封装Request请求 #

我们可以在vue的src下建一个utils文件夹，然后里面再建一个request.js文件  
![在这里插入图片描述][6a5ec6b8de9642de8e1893a0e2a60f43.png]

> src > utils > request.js

在这个文件里添加以下代码：

//Axios的封装
    import axios from 'axios'
    
    const request = axios.create({
        
        baseURL: '//localhost:8080',
        timeout: 5000,
        headers:{
        
            "Content-Type": "application/json;charset=utf-8",
            "Access-Control-Allow-Origin": "*",
        }
    });
    
    // request 拦截器
    // 可以自请求发送前对请求做一些处理
    // 比如统一加token，对请求参数统一加密
    request.interceptors.request.use(config => {
        
        // config.headers['Content-Type'] = 'application/json;charset=utf-8';
        // config.headers['Access-Control-Allow-Origin']='*';
    
        // config.headers['token'] = user.token;  // 设置请求头
        return config
    }, error => {
        
        return Promise.reject(error)
    });
    
    // response 拦截器
    // 可以在接口响应后统一处理结果
    request.interceptors.response.use(
        response => {
        
            let res = response.data;
            // 如果是返回的文件
            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

# 三、前后端数据交互测试 #

（1）编写后端接口用于测试  
![在这里插入图片描述][c5e51037dc9946ca8da6bb08ad0909c9.png]

import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    /**
     * ClassName: TestController
     * Author: Admin
     * Date: 2022/4/30 22:44
     *
     * @description: TODO
     */
    
    package com.example.demo.controller;
    
    import org.springframework.web.bind.annotation.*;
    
    /**
     * ClassName: TestController
     * Author: Admin
     * Date: 2022/4/30 22:44
     *
     * @description: TODO
     */
    
    @RestController
    @CrossOrigin("*")
    @RequestMapping("/test")
    
    public class TestController {
        
    
        @GetMapping
        public String test(@RequestParam String key){
        
            return key;
        }
    
    }

（2）前端代码  
App.vue

<template>
        <div style="margin:5px; float:left">
            <el-input v-model="key" placeholder="请输入关键字"  clearable style="width: 200px"/>
            <el-button type="primary"  style="margin-left:6px; float:right" @click="send" >发送</el-button>
        </div>
    </template>
    
    <style>
    
    </style>
    <script>
    
        import request from "./utils/request.js";
    
        export default {
          
            name: 'App',
            components: {
          
    
            },
    
            data(){
          
                return {
          
                    key:'',
                }
            },
    
            methods:{
          
                send(){
          
                    request.get("/test",{
          
                            params:{
          
                               key:this.key,
                            }
                        }
                    ).then(res =>{
          
                        console.log(res);
                    })
    
                }
            }
        }
    </script>

上一篇：[Vue+SpringBoot前后端分离教程三：Vue整合SpringBoot框架][Vue_SpringBoot_Vue_SpringBoot]

[http_www.axios-js.com]: http://www.axios-js.com/
[9c7187836bd44750901e666d58de4088.png]: https://img-blog.csdnimg.cn/9c7187836bd44750901e666d58de4088.png
[6a5ec6b8de9642de8e1893a0e2a60f43.png]: https://img-blog.csdnimg.cn/6a5ec6b8de9642de8e1893a0e2a60f43.png
[c5e51037dc9946ca8da6bb08ad0909c9.png]: https://img-blog.csdnimg.cn/c5e51037dc9946ca8da6bb08ad0909c9.png
[Vue_SpringBoot_Vue_SpringBoot]: https://blog.csdn.net/Q1368089323/article/details/124505326