前后端交互,对不同数据类型的传输详解
第一章前后端的对不同数据类型的传输详解1、使用的相关技术2、使用apifox对前后端传输的数据进行模拟情况一、apifox使用get请求向后端发送数据1、使用的相关技术1.web后端使用springboot2.前端使用vue+axios3.使用apifox进行测试2、使用apifox对前后端传输的数据进行模拟情况一、apifox使用get请求向后端发送数据模拟的场景如下apifox中数据的填写如下
·
第一章 前后端交互,对不同数据类型的传输详解(apifox实例)
1、使用的相关技术
1.web后端使用springboot
2.前端使用vue+axios
3.使用apifox进行测试
2、使用apifox对前后端传输的数据进行模拟
情况一、apifox使用get请求向后端发送数据
模拟的场景一如下
apifox中数据的填写如下:
后端的代码如下:
@GetMapping("/SetStudent")
public String setStudent(
@RequestParam("name") String name,//接受的参数使用@RequestParam注解标识
@RequestParam("age") int age,
@RequestParam("school") String school
){
System.out.println("姓名:"+name+",年龄:"+age+",学校:"+school);
return "设置成功";
}
实例的结果如下:
后端代码也可以如下所示:
@GetMapping("/SetStudent1")
public String setStudent1(
StudentBoc studentBoc //这是一个对象
){
System.out.println("姓名:"+studentBoc.getName()+",年龄:"+studentBoc.getAge()+",学校:"+studentBoc.getSchool());
return "设置成功";
}
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class StudentBoc {
private String name;
private int age;
private String school;
}
实验的结果如上图一致。
模拟场景二如下
我们可以在请求路径后面接上{}来传递参数,其后端代码如下:
@GetMapping(value = "/getStudent/{id}/{name}/{school}") //例如请求路径http://localhost:8000/getStudent/1/李四/剑桥大学
public Object exec(
@PathVariable("id") String id, //后端使用@PathVariable注解来接受数据
@PathVariable("name") String name,
@PathVariable("school") String school
){
System.out.println("id = "+id+"name = "+name+"school = "+school);
return 1;
}
apifox的请求:
情况二、apifox使用Post请求向后端发送数据
1、使用json格式传输数据
前后端使用Post请求传送一个对象
@PostMapping("/PostSetStudent")
public String PostSetStudent(
@RequestBody StudentBoc studentBoc //后端使用@RequestBody注解获取对象
){
System.out.println("姓名:"+studentBoc.getName()+",年龄:"+studentBoc.getAge()+",学校:"+studentBoc.getSchool());
return "设置成功";
}
前后端使用Post请求传送一个List集合
@PostMapping("/PostSetStudent1")
public String PostSetStudent1(
@RequestBody List<StudentBoc> list
){
list.forEach((stu)-> System.out.println("姓名:"+stu.getName()+",年龄:"+stu.getAge()+",学校:"+stu.getSchool()));
return "设置成功";
}
前后端使用Map集合来传递数据
@PostMapping("/getMap")
public String getMap(
@RequestBody Map<String,Object> map
){
map.forEach((key,value)->{
System.out.println(key+":"+value);
});
return "true";
}
2、使用-www-form-urlencoded格式传输数据
@PostMapping("/PostSetStudent2")
public String PostSetStudent2(
String name,
int age,
String school
){
System.out.println("姓名:"+name+",年龄:"+age+",学校:"+school);
return "设置成功";
}
3、使用form-data格式传输数据
1.使用form-data传输数据
@PostMapping("/PostSetStudent3")
public String PostSetStudent3(
String name,
int age,
String school
){
System.out.println("姓名:"+name+",年龄:"+age+",学校:"+school);
return "设置成功";
}
2、使用form-data传输文件
后端的书写:
导入需要依赖的jar包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
@PostMapping("/LoadFile")
public String LoadFile(
@RequestParam("file") MultipartFile file //后端使用MultipartFile接受文件类型
){
String tr1= null;//获取文件的路径
try {
tr1 = ResourceUtils.getURL("load").getPath(); //获取项目中的load文件夹的相对路径
file.transferTo(new File(tr1+file.getOriginalFilename())); //将文件复制到改路径下,
} catch (Exception e) {
e.printStackTrace();
}
return "传输成功";
}
3、总结
一、前端使用form-data和x-www-form-urlencoded传输数据时,后端接受键值对参数,注意情况如下:
1. 可以不使用@RequestParam()来指定对应的键是什么,但参数名必须与前端传入的参数名一致。
2. 同样可以使用@RequestParam()来指定键的名称。
3. 可以使用一个定义好的对象,对象的属性名与前端设置的参数名一致,来接受前端的数据。
4. form-data支持文件类型传输,而x-www-form-urlencoded不支持。
二、前端使用json来传输数据时,注意情况如下:
5. 后端必须在参数后面加上@RequestBody来接受参数。
6. 后端接受请求方法中的参数可以是对象、List集合、Map字典等。
三、put、delete等不同类型的请求,前端同样选择这些类型往后端传递参数。
如果各位大神还有其他的补充,欢迎在评论区留言.😊😊😊😊😊😊
更多推荐
已为社区贡献1条内容
所有评论(0)