Vue3中使用Axios发送数据到SpringBoot

在前后端分离的项目中，我们难免会遇到跨域或者接收的参数为空的问题，对于新手肯定是很难找到解决的办法。尤其是发送的数据中可能是文件和文本一起传输，这时候就会出现一些小问题，一般情况我们都是使用JSON格式传输数据，这时候就会导致数据接收不到。 因此，需要根据情况对数据进行分割，当然，如果不想使用JSON发送，采用传统的form表单则不会出现这种问题，但是在get请求中当参数很多的时候也有些麻烦。 在vue（下面的例子为vue3）项目中安装axios npm install axios --save 安装成功之后将axios导入项目中，注册到全局。 在项目src目录下创建一个目录，这里目录为util，在该目录下创建Axios.js文件，添加如下代码

import axios from "axios";
//请求拦截器
axios.defaults.baseURL=http://localhost:8081//这是项目的base地址
axios.defaults.timeout=10000//超时时间
axios.interceptors.request.use((config) => {
          
   
//这里不添加请求头是因为我们发送的数据不一定都是json格式
	console.log("----------------",config.data)//在发送请求前可以添加token之类或者其他操作
	let flag = config.data.get("flag");//获取标志是否有文件或者json
	if(flag === file){
          
   //设置请求头
		config.headers["Content-type"] = multipart/form-data;
	}
	else if(json === json ){
          
   
		 config.headers["Content-type"] = "application/json;charset=UTF-8";
	}
	//在这里可以添加token
  return config//一定要返回，否则请求发不出去
}, (error) => {
          
   
  return error
})
//暴露出去
export default axios

将axios注册到全局组件中

import axios from ./util/Axios.js
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount(#app)

到此axios基本配置已经完成。 在组件中使用axios发送数据

import {
          
   getCurrentInstance} from vue //导入vue的实列对象，因为setup调用时vue还没有创建
export default{
          
   
		mixins:[mixins],
		setup() {
          
   
			const {
          
   proxy} = getCurrentInstance();
			//绑定的方法
			function change(){
          
   
				let formData = new FormData();//可以将form表单直接放入构造器，自动封装
				formData.append("username","123456");
				formData.append("flag",file);//发送文件
				formData.append("password","123456");
				proxy.$axios.post("/index",formData).then((res)=>{
          
   
					console.log("-----OK-->",res)
				}).catch(err=>{
          
   
					console.log("-----Fail-->",err)
				})
			}
			return {
          
   
			//vue3特性要求
				change
			}
		}
	}

后端User对象

public class User {
          
   
    private String username;
    private String password;
}

上面formData是使用传统方式发给服务器的数据，如果只发送文本json（axios默认json格式），所以在发送强将formData转化为json即可，JSON.stringfly(formData)这是js自带，也可以导入qs，两者都可以，但在后端必须使用@RequstBody注解在参数中（@RequestBody User user），否则接收不到数据。 如果发送的数据带有文件，则使需要添加请求头Content-Type: multipart/form-data，然后直接将formData放入即可。