温故而知新，本文为一时兴起写出，如有错误还请指正

本文后台接口基于SpringBoot2.5.6编写，前端基于Vue2 + asios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程

如果你没有学过SpringBoot也不要紧，把他看做成SpringMVC即可，写法完全一致（其实我不说你也发现不了）

本文主要讲前后端交互流程，力求帮助新人快速入门前后端分离式开发，不会讲关于环境搭建部分的内容

SpringMVC接收参数的方式

在文章开头快速的过一遍SpringMVC接收参数的几种方式，一定要记住这几种方式，看不懂或不理解都没关系，后续会结合前端代码过一遍，这里就不过多解释了，直接上代码

1.【正常接收参数】

/**
 * 正常接收参数
 * 注意：本Controller为了演示同时写了三个路径相同的GetMapping，不要直接复制，启动会报错
 */
@RestController
public class IndexController {

    /** 通过变量接收参数 */
    @GetMapping("/index")
    public String index(String username, String password) {
        System.out.println(username);
        System.out.println(password);
        return "index";
    }
    
    /** 通过实体类接收参数 */
    @GetMapping("/index")
    public String index(UserEntity userEntity) {
        System.out.println(userEntity.getUsername());
        System.out.println(userEntity.getPassword());
        return "index";
    }
    
    /** 通过Map集合接收参数 */
    @GetMapping("/index")
    public String index(Map<String, Object> param) {
        System.out.println(param.get("username"));
        System.out.println(param.get("password"));
        return "index";
    }

    /** 通过基于HTTP协议的Servlet请求对象中获取参数 */
    @GetMapping("/index")
    public String index(HttpServletRequest req) {
        System.out.println(req.getParameter("username"));
        System.out.println(req.getParameter("password"));
        return "index";
    }

    /** 变量接收参数还可以使用@RequestParam完成额外操作 */
    @GetMapping("/index")
    public String index(@RequestParam(value = "username", required = true, defaultValue = "zhang") String username) {
        System.out.println(username);
        return "index";
    }

}

2.【路径占位接收参数】

/**
 * 路径占位接收参数，接收参数的mapping需要使用{}括起来
 */
@RestController
public class IndexController {

    /** 路径占位接收参数，名称相同 */
    @GetMapping("/user/{id}")
    public String index(@PathVariable Integer id) {
        System.out.println(id);
        return "index";
    }

    /** 路径占位接收参数，名称不同 */
    @GetMapping("/user/{id}")
    public String index(@PathVariable("id") Long userId) {
        System.out.println(userId);
        return "index";
    }

}

3.【请求体接收参数】

@RestController
public class IndexController {
    
    /** 使用实体类接收参数 */
    @GetMapping("/index")
    public String index(@RequestBody UserEntity userEntity) {
        System.out.println(userEntity.getUsername());
        System.out.println(userEntity.getPassword());
        return "index";
    }
    
    /** 使用Map集合接收参数 */
    @GetMapping("/index")
    public String index(@RequestBody Map<String, Object> param) {
        System.out.println(param.get("username"));
        System.out.println(param.get("password"));
        return "index";
    }
    
    /** 变量接收参数 */
    @GetMapping("/index")
    public String index(@RequestBody String username) {
        System.out.println(username);
        return "index";
    }

}

细心的人应该留意到了，最后使用变量接收参数的时候只接收了username这一个值，并没有接收password，作为扩展在这里解释一下，不看也可以，看了不理解也没关系，知道这个事儿就够了，以后接触多了就理解了

如果请求参数放在了请求体中，只有参数列表第一个变量能接收到值，这里需要站在Servlet的角度来看：

/** 通过基于HTTP协议的Servlet请求对象获取请求体内容 */
@GetMapping("/index")
public String index(HttpServletRequest req) {
    ServletInputStream inputStream = req.getInputStream();
    return "index";
}

可以看到获取请求体的代码其实是获取到一个InputStream的输入流对象，想要知道请求体中数据是什么必须读流中的数据，读取到数据后会将值给第一个变量，而流中的数据读取一次之后就没了，当第二个变量读流时发现流是空的，自然就接收不到参数了

前后端分离式交互流程

好困 后续内容待更新.......

跨域请求的处理

传参-路径占位参数

传参-路径参数

传参-表单类型参数

传参-请求体参数

AJAX请求的会话机制(sessionID)

扩展：ApiPost接口调试工具