前后端交互，对不同数据类型的传输详解

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 "传输成功";
    }

如果各位大神还有其他的补充，欢迎在评论区留言.😊😊😊😊😊😊