文章目录

• 前言
• 一、axios
• • 1.通过npm命令安装
  • 2.在工具类文件夹utils里新建request.ts文件
  • 3.在新建api文件夹新建index.ts文件创建方法
  • 4.举例使用post方法testData
• 二、springboot接收axios传送数据

前言

本篇主要介绍。

一、axios

1.通过npm命令安装

npm install axios

2.在工具类文件夹utils里新建request.ts文件

baseURL为代理地址，在前一篇文章有配置。将’/urlApi’替代’http://localhost:8060‘跨域。

// 从axios源码中可知，axios实例的类型为AxiosInstance，响应的数据类型为AxiosResponse，请求需要传入的参数类型为AxiosRequestConfig
import axios, {AxiosInstance, AxiosError, AxiosResponse, AxiosRequestConfig} from 'axios';
const service:AxiosInstance = axios.create({baseURL: '/urlApi',// baseURL: 'http://localhost:8060',timeout: 5000,//跨域携带cookiewithCredentials: true
});// 添加请求拦截器
service.interceptors.request.use((config: AxiosRequestConfig) => {return config;},(error: AxiosError) => {console.log(error);return Promise.reject();}
);// 添加响应拦截器
service.interceptors.response.use((response: AxiosResponse) => {console.log("response:",response);if (response.status === 200) {return response;} else {Promise.reject();}},(error: AxiosError) => {console.log(error);return Promise.reject();}
);export default service;

3.在新建api文件夹新建index.ts文件创建方法

import request from '../utils/request';export const fetchData = () => {return request({url: './table.json',method: 'get'});
};
export const testData = (data: any) => {return request({url: 'test/vueTest',method: 'post',data,});
};

4.举例使用post方法testData

在.vue文件里使用，向后端传输数据data

// 使用axios通信
import { onMounted } from 'vue'
import {testData
} from "../api/index"
let data = {username: 'admin'};
onMounted(() => {testData(data).then(res => {console.log('login response data', res)})
})

二、springboot接收axios传送数据

在模块/test下，s所以完整的地址为"http://localhost:4000/urlApi/test/vueTest"。
@RequestBody接收数据，同时传送username。

@RequestMapping(value = "/vueTest", method = RequestMethod.POST)@ResponseBody//public String vueTest(HttpSession session, @RequestBody String data){System.out.println("后台打印："+data);String username = (String) session.getAttribute("username");return username;}

后台接收到成功打印data，axios成功接收username。