Axios与SpringBoot参数交互方式

Axios与SpringBoot的请求参数交互方法

• Get请求
• • 普通类型参数、对象类型参数
  • • 前端
    • 后台
    • • 实体类
      • Controller
  • 数组、集合类型参数
  • • 前端
    • 后台
• Post请求
• • json类型传递
  • • 前端
    • 后台
    • • 实体类
      • Controller
  • x-www-form-urlencoded类型传递
  • • 前端
    • 后台
  • x-www-form-urlencoded传递复杂对象集合的可行方案
  • • 前端
    • 后台
• 总结与建议
• • 总结
  • • x-www-form-urlencoded
    • application/json
  • 建议

Get请求

普通类型参数、对象类型参数

前端

const params={
	username1:"5",
	password1:"6",
	username:"7",
	password:"8"
}
this.$http.get(`/index`,{
	params,
})
           

后台

实体类

public class User1 implements Serializable {
    private String username1;
    private String password1;
}
           

Controller

@GetMapping("/index")
public AjaxResult index(User1 user1, String username, String password){
      AjaxResult rs = new AjaxResult();
      System.out.println(user1);
      System.out.println(username);
      System.out.println(password);
      rs.setCode(200);
      return rs;
  }
           

qs模块在axios中存在，无需单独安装，如果报错，可通过npm install qs -S进行安装

注意：在/Index这个请求处理方法下，所有参数名、类中所有属性名不允许重复，重名则值会被覆盖

数组、集合类型参数

前端

const params={
	ids:['1','2','3','4','5','6','7'],
	listIds:['7','6','5','4','3','2','1']
}
this.$http.get(`/index`,{
	params,
	paramsSerializer: {
		serialize:function(params) {
			return qs.stringify(params, {arrayFormat: 'repeat',allowDots:false})
		}
	}
})
           

后台

@GetMapping("/index")
public AjaxResult index(
	@RequestParam("ids") String[] ids,
	@RequestParam("listIds") List<String> listIds){
	       AjaxResult rs = new AjaxResult();
	       for (String id : ids) {
	           System.out.println(id);
	       }
	       listIds.forEach(System.out::println);
	       rs.setCode(200);
	       return rs;
}
           

注意：此处的@RequestParam不可省略；不可传递类似List<User> users的复杂对象集合（需自定义参数解析器）

Post请求

json类型传递

前端

const data={
	users:[
		{
			username:1,
			password:2
		},
		{
			username:3,
			password:4
		}
	],
	username:5,
	password:6
}
this.$http.post(`/index`,data)
           

后台

实体类

public class RequestVo implements Serializable {
    private List<User> users;
    private String username;
    private String password;
}
           

Controller

@PostMapping ("/index")
 public AjaxResult index(@RequestBody RequestVo vo){
     AjaxResult rs = new AjaxResult();
     System.out.println(vo);
     rs.setCode(200);
     return rs;
 }
           

注意：

1. 一个@RequestMapping只能有一个@RequestBody

2. get请求没有请求体，不支持@RequestBody

x-www-form-urlencoded类型传递

前端

const data={
	ids:[1,2,3],
	username1:3,
	password1:4,
	username:5,
	password:6
}
this.$http.post(`/index`,data,{
	transformRequest: [function (data, headers) {
		return qs.stringify(data, {arrayFormat: 'repeat',allowDots:false});
	}],
})
           

后台

@PostMapping ("/index")
public AjaxResult index(
	User1 user1,
	String username,
	String password,
	@RequestParam("ids") List<String> ids){
	    AjaxResult rs = new AjaxResult();
	    System.out.println(user1);
	    System.out.println(username);
	    System.out.println(password);
	    ids.forEach(System.out::println);
	    rs.setCode(200);
    return rs;
}
           

注意：

1. 属性名、对象内的属性名不允许重复，重复会被覆盖

2. 通过该方式仍然不能传输List<User>这种复杂对象的集合

x-www-form-urlencoded传递复杂对象集合的可行方案

如果不想封装VO对象，使用@RequestBody接收数据，可采用如下方式传递List<User>这种复杂对象的集合。

前端

const users=[
	{
		username:1,
		password:2
	},
	{
		username:3,
		password:4
	}
]
const data = {
	users:JSON.stringify(users),
	username1:5,
	password1:6,
	username:7,
	password:8
}
this.$http.post(`/index`,data,{
	transformRequest: [function (data, headers) {
		return qs.stringify(data,{arrayFormat:'repeat',allowDots:false})
	}],
})
           

后台

@PostMapping ("/index")
public AjaxResult index(String users,User1 user1,String username,String password){
    AjaxResult rs = new AjaxResult();
    // com.alibaba.fastjson.JSONObject
    List<User> list = JSONObject.parseArray(users, User.class);
    list.forEach(System.out::println);
    System.out.println(user1);
    System.out.println(username);
    System.out.println(password);
    rs.setCode(200);
    return rs;
}
           

总结与建议

总结

x-www-form-urlencoded

• 请求头支持以下3种内容的传递：

  1. 基本类型：如Integer、String、Boolean等

  2. 对象类型：如User等自定义类（只包含基本类型）

  3. 由基本类型构成的数组或集合：如List<String>、List<Long>等

• 传递数组或集合时必须指定@RequestParam(“属性名”)

• 传递的参数名和对象的属性名之间不允许重名，否则对象属性值会被覆盖

  例如：

public class User{
	public String username;
	public String password;
}
@GetMapping("/index")
public AjaxResult index(User user,String username,String password){
	//...
}
           

注意：上述写法会造成user对象被注入的username和password值不正确

application/json

• 前台设置请求头为application/json;charset=utf-8后，直接发送数据即可
• 后台将多个复杂参数封装为一个Vo对象，用@RequestBody接收即可
• 仅post请求支持该方式，且一个RequestMapping只能有一个@RequestBody
• 也可以通过Springboot自定义参数解析器实现@MultiRequestBody

建议

• 不建议Get请求传List<User>这种复杂对象，建议传List<Long> ids，由后台进行查询
• 不建议Post请求使用x-www-form-urlencoded类型传List<User>这种复杂对象，麻烦且容易丢失数据，建议封装Vo对象通过@RequestBody接收
• axios可通过如下方式进行封装，统一处理参数：

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

// 根据需要2选1即可
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';

/*
// get请求的参数处理器(x-www-form-urlencoded)
axios.defaults.paramsSerializer = {
	serialize:function(params) {
		return qs.stringify(params, {arrayFormat: 'repeat',allowDots:false})
	}
}

// post请求的参数处理器(x-www-form-urlencoded,后台如果用@RequestBody无需此部分)
axios.defaults.transformRequest = [function (data, headers) {
	return qs.stringify(data,{arrayFormat:'repeat',allowDots:false})
}]

Vue.prototype.$http=axios;

new Vue({
  render: h => h(App),
}).$mount('#app')

*/