关于前后端数据交互与HTTP请求的关系
写本篇文章的目的是想让更多前后端联调的工作变得更清晰明了
HTTP请求的简单认识
资源地址
协议://域名或者ip:端口/路径（protocol://host:port/address）
如 "https://www.cnblogs.com/xiaogblog/"
https默认的端口为443，http默认的端口为80
请求方式
方式：get/post/put/patch/delete/head/options/connect/trace，
根据restful风格，我们一般最多用到get/post/put/patch/delete
- get代表从服务器获取资源
- post代表为服务器添加资源
- put/patch代表修改服务器资源，put更新资源的全部，patch根据资源的局部
- delete代表删除服务器资源
请求参数
请求参数我们一般成为parameter(简称param)，它是url问号后面'?key1=value1&key2=value2'的部分，
一般代表请求资源的条件
请求头
请求头我们称为header，一般是一个map结构，记录请求的一些信息，如Cookie和User-Agent
请求体
请求体我们称为body，一般存放的是传递给后台的数据，
请求头中有个content-type字段去标识body中数据的编码方式
- application/x-www-form-urlencoded是表单key-value编码方式
- application/json是json字符串编码方式
- ...
请求方式与param和body之间的关系
本质上来说，请求方式与以何种方式发送数据是没有必然关系的
GET请求既可以发送param数据也可以发送body数据，同理POST及其他请求方式也都可以
但是，一般来说，GET请求方式，参数是规定要放在param中的。
GET请求在某些HTTP请求客户端是无法携带body的，比如java原生java.net.URLConnection，
OkHttpClient，Apache HttpClient和前端jquery ajax都不支持。
但是Android端AsyncHttpClient包和PostMan工具是可以支持GET请求携带body的
怎样进行前后端数据交互
后端以 SpringMVC/SpringBoot 举例
//数据模型Person类
@Data//lombok
pulic class Person {
private String id;
private String name;
private String address;
private Integer age;
}
//后端接口，为了直观，省略状态，直接返回bean
@RestController
@RequestMapping("/person")
public class PersonController {
//Person的Service
@Autowired
private PersonService personService;
//分页查询
@GetMapping("/queryByParam")
public List<Person> getStudent(Person person,
@RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "10") int pageSize){
//根据person中不为null的属性查询到的Person列表
// pageNum和pageSize为分页条件，分别代表第几页和一页条数
List<Person> personList = personService.page(person,pageNum,pageSize);
return personList;
}
//新增数据
@PostMapping("/save")
public Person getStudent(@RequestBody Person person){
//往数据库中插入一条记录
personService.insert(person);
return person;
}
}
前端以 JQuery AJAX 举例
//GET分页查询
let pageNum = 1,pageSize = 10;//也可以作为data对象的属性，这里分开
let data = {name:'张三',address:'上海'};
$.ajax({
type : "GET",
url : `http://host:port/person/queryByBody?pageNum=${pageNum}&pageSize=${pageSize}`,
data : data,
dataType:"json",//返回数据类型
success : function(result) {//成功回调
//成功处理
},
error : function(err){//请求失败
//失败处理
}
});
//POST新增数据
let person = {
id:"1001",
name:"李四",
address:"北京",
age:18
};
$.ajax({
type : "POST",
url : "http://host:port/person/save",
data : JSON.stringify(person),
dataType:"json",//返回数据类型
contentType: "application/json",//请求的媒体类型
success : function(result) {//成功回调
//成功处理
},
error : function(err){//请求失败
//失败处理
}
});
后端Controller层各注解使用（遵循restful风格）
Controller类注解
- Controller类上使用 @RestController 注解，等价与 @Controller + @ResponseBody
- Controller类上最好加上一个 @RequestMapping("/xxx") 代表父级路径
Controller方法注解
映射地址注解
- @GetMapping 等价于 @RequestMapping(method=RequestMethod.GET) ，代表GET请求数据
- @PostMapping 等价于 @RequestMapping(method=RequestMethod.POST) ，代表POST新增数据
- @PutMapping 等价于 @RequestMapping(method=RequestMethod.PUT) ，代表PUT修改数据
- @DeleteMapping 等价于 @RequestMapping(method=RequestMethod.DELETE) ，代表DELETE删除数据
参数注解
- @RequestParam
该注解是用于获取在GET方式中QueryString/param的值，和Content-Type为application/x-www-form-urlencoded的post方式中body data的值。
等同于 javax.servlet.httpHttpServletRequest的getParameter(String name)方法。其中注解参数name/value代表getParameter中的name，
默认值为参数名；required代表参数是否为必须，默认值为true；defaultValue代表参数的默认值
//使用场景一：url中param的key与方法参数名相同且name不是必须时，可省略
@GetMapping("/get")
public Response get(String name){}
//使用场景二：url中param的key与方法参数名相同，但name是必须时，不可省略
@GetMapping("/get")
public Response get(@RequestParam String name){}
//使用场景三：url中param的key与方法参数名不同且不是必须，不可省略
@GetMapping("/get")
public Response get(@RequestParam(name="username",required=false) String name){}
- @PathVariable
该注解代表参数为路径上的变量
// url为 '/get/1' 时，id="1"
@GetMapping("/get/{id}")
public Response get(@PathVariable String id){}
@GetMapping("/get/{uid}")
public Response get(@PathVariable("uid") String id){}
- @RequestBody
前端发送body数据且contentType为application/json时使用，一般以一个java bean类型去接收，若以String类型接收，则接收到的是json字符串
// jquery ajax 需要使用 JSON.stringify 序列化数据
@PostMapping("/post")
public Response post(@RequestBody Person person){}