Axios请求以及对应的Springboot接收参数

课题来源

前一段时间做项目的时候前后端参数的对接出现了很大问题，导致痛不欲生，故想把一直没有搞明白的前后端传参接收参数的方法搞清楚，记录以下内容帮助我记忆，以及给需要的人一点帮助。

详细方法和代码

1、Axios的GET请求方式

问号传参

• 前端代码

axios.get("http://localhost:8081/boot/one?name=xxx&age=22").then(function(res){
    console.log(res)}).catch(function(err){
    console.log(err)})

• 后端接收

/**
 * axios问号传参
 * 无Content-Type
 * Payload: Query String Parameters name: xxx age: 22
 * 没有注解
 */@GetMapping(value ="/boot/get1")publicResultgetParamByQ(String name,Integer age){if(name !=null&& age !=null){returnnewResult(name + age,"请求成功",100);}returnnewResult(null,"请求失败",-1);}

反斜杠传参

• 前端代码

axios.get("http://localhost:8081/boot/get2/xxx/22").then(function(res){
    console.log(res)}).catch(function(err){
    console.log(err)})

• 后端代码

/**
 * 反斜杠传参
 * 无Content-Type
 * 参数在请求的url中
 * 注解: @PathVariable
 */@GetMapping(value ="/boot/get2/{name}/{age}")publicResultgetParamByX(@PathVariableString name,@PathVariableInteger age){if(name !=null&& age !=null){returnnewResult(name + age,"请求成功",100);}returnnewResult(null,"请求失败",-1);}

2、Axios的POST请求方式

JSON方式

• 前端代码

axios.post('http://localhost:8081/user/login',{uid: that.username,pwd: that.password
}).then(function(res){
  console.log(res)}).catch(function(err){
  console.log(err)})

• 后端代码

/**
 * axios post传参的第一种方式，JSON方式
 * header: Content-Type: application/json
 * Payload: {uid: "1805121307", pwd: "111111"}
 * postman写法: Body下面的row写入{uid: "xxx", pwd: "xxx"}
 * 注解: @RequestBody
 */@PostMapping(value ="/user/login")publicResultLogin(@RequestBodyUser loginParam){User user = userService.getUserById(loginParam);if(user !=null){String token = UUID.randomUUID()+"";// 存储token到redis
        redisTemplate.opsForValue().set(token, user,Duration.ofMinutes(30l));returnnewResult(token,"登录成功",100);}returnnewResult(null,"登录失败",-1);}

此处的User类有两个类成员变量分别为Long uid；String pwd；

x-www-form-urlencoded方式

• 前端代码 需要引入Qs模块，前端控制台执行npm install Qs

axios.post("http://localhost:8081/boot/post1", Qs.stringify({name:'hqz',age:22}),{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(function(res){
  console.log(res)}).catch(function(err){
  console.log(err)})

• 后端代码

/**
 * post传表单方式
 * url: 不变
 * Content-Type: application/x-www-form-urlencoded
 * Payload: Form Data name: hqz age: 22
 * 注解: @RequestParam(value = "name")
 */@PostMapping(value ="/boot/post1")publicResultgetDataByForm(@RequestParam(value ="name")String name,@RequestParam(value ="age")Integer age){if(name !=null&& age !=null){returnnewResult(name + age,"请求成功",100);}returnnewResult(null,"请求失败",-1);}

FormData方式

• 前端代码 前端需要构造一个FormData类

let fd =newFormData()
fd.append("name","xxx")
fd.append("age",22)

axios.post("http://localhost:8081/boot/post2", fd,{headers:{'Content-Type':'multipart/form-data'}}).then(function(res){
  console.log(res)}).catch(function(err){
  console.log(err)})

• 后端代码

/**
 * post传FormData
 * url: 不变
 * Content-Type: multipart/form-data
 * Payload: Form Data name: xxx age: 22
 * 注解: @RequestParam
 */@PostMapping(value ="/boot/post2")publicResultgetDataByFormData(@RequestParam(value ="name")String name,@RequestParam(value ="age")Integer age){if(name !=null&& age !=null){returnnewResult(name + age,"请求成功",100);}returnnewResult(null,"请求失败",-1);}

3、Axios文件上传

FormData方式

• 前端代码

let fd =newFormData()
fd.append("file",this.file)
axios.post("http://localhost:8081/boot/postFile", fd,{headers:{'Content-Type':'multipart/form-data'}}).then(function(res){
  console.log(res)}).catch(function(err){
  console.log(err)})

• 后端代码 后端可以接收图片文件，txt文件，视频文件等。但是后端接收文件的大小初始限制为1M，想要接收更大文件需要需改application.yml或其他配置文件。

spring:servlet:multipart:max-file-size:80000000# 单位为byte

/**
 1. post上传文件
 2. Content-Type: multipart/form-data
 3. Payload: Form Data file: (binary)
 4. 注解: @RequestParam
 5. 接收类: MultipartFile
 */@PostMapping(value ="/boot/postFile")publicResultgetFile(@RequestParam(value ="file")MultipartFile multipartFile)throwsIOException{if(multipartFile !=null){String originName = multipartFile.getOriginalFilename();String folder ="D:\\";String picName =newDate().getTime()+ originName;File fileLocal =newFile(folder, picName);
        multipartFile.transferTo(fileLocal);returnnewResult("文件收到","post成功",100);}returnnewResult(null,"post失败",-1);}

参考文献

1. 上传文件过大时，报The field file exceeds its maximum permitted size of 1048576 bytes问题
2. axios post 请求类型和 SpringBoot 参数接收知识
3. @RequestBody的使用
4. 关于接收x-www-form-urlencoded格式数据的后端
5. springboot 接收文件