前后端请求一致性学习
在进行前后端分离开发项目标过程中，前后端同砚往往必要依照接口文档的根本信息以及相应的相应格式进行接口请求的开发，在这个过程中涉及到常见的Get、Post、Put、Patch等等的请求，相应的前后端的誊写格式是什么，这篇文章进行一个记录学习https://i-blog.csdnimg.cn/direct/e4ab00d2af5f47dab885bda3a1c2fa2b.png 举例：接口文档具备的三部门描述
一、GET请求
前端发送特点： get请求通常用于客户端向服务器获取数据，其参数携带在请求的URL地址上
后端接收特点：通过GetMapper(‘url’) + @RequsetParam 或 @PathVariable 进行接收
详细的：
接收方式实用环境特点GetMapper + @RequsetParam前端请求路径为：/category/detail ？{参数}参数拼在路径之后GetMapper + @PathVariable前端请求路径为：/category/detail{参数}参数拼在路径中 方式一：
（前端）
// 获取文章列表接口
export const articleListService = (params) => {
// 发送请求
// params 可能是一个对象，比如 { category: 'technology', limit: 10 }
return request.get('/category/detail',{params : params})
}
（后端）
@GetMapping("/detail")
public Result<Category> getCategoryDetail(@RequestParam(vlaue = 'id') Integer id) {
// 获取文章分类详情
return articleCategoryService.getCategoryDetail(id);
} 方式二：
(前端)
export const getArticleByIdService = (id) => {
return request.get(`/article/${id}`);
} （后端）
@GetMapping("/article/{id}")
public ResponseEntity<Article> getArticleById(@PathVariable Long id) {
// 方法实现
} 注意点：
1.针对一些非必填的参数，可以利用required关键字来标识，同时必须设置默认值defaultValue,如getOrder方法中对price参数的获取：
@RequestParam(
value = "name",
required = false,
defaultValue = "0") Integer name
二、Post请求
前端发送特点：Post请求用于向服务器发送数据，数据可以以 application/json 或 application/x-www-form-urlencoded 格式发送。
后端接收特点：利用PostMapper + @RequestBody 或 @RequsetParam接收
详细的：
接收方式实用环境特点PostMapper + @RequestBody接收 JSON请求体格式PostMapper + @RequsetParam接收处理表单数据 方式一：
（前端）利用
// 上传用户头像
export const userAvatarUploadService = (file) => {
let formData = new FormData();
formData.append('file', file); // 注意这里使用 'file' 作为键名，与后端 @RequestParam("file") 对应
// 发送请求
return request.post('/user/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data' // 通常不需要显式设置这个头，因为 axios 或 fetch 会自动设置
}
});
} （后端）
@PostMapping()
public Result upload(@RequestParam MultipartFile file){
// 文件上传
return uploadService.upload(file);
}
} 方式二：
（前端）
// 添加文章接口
export const articleAddService = (articleModel) => {
// 发送请求
return request.post('/article',articleModel)
} （后端）
@PostMapping()
public Result addArticle(@RequestBody @Validated Article article) {
// 添加文章
articleService.addArticle(article);
return Result.success();
}
三、PUT 请求
前端请求特点： PUT请求常用于更新数据资源，于POST请求写法类似，通过请求体发送数据
后端接收特点：利用 @PutMapper + @RequsetBody 接收 PUT 请求的 JSON 数据。
（前端）
// 修改文章接口
export const articleUpdateService = (articleModel) => {
// 发送请求
return request.put('/article',articleModel)
}
（后端）
@PutMapping()
public Result updateArticle(@RequestBody @Validated Article article) {
// 更新文章
articleService.updateArticle(article);
return Result.success();
}
四、DELETE 请求
前端发送特点：DELETE重要用于删除数据资源，通过URL发送资源的标识符，与GET请求誊写
后端接收特点：通过@DeleteMapper + @PathVariable 接收标识符，@Requsetparam
方式一：
（前端）
// 删除文章接口
export const articleDeleteService = (id) => {
// 发送请求
return request.delete(`/article/${id}`)
} (后端)
@DeleteMapping(/{id})
public Result deleteArticle(@PathVariable @Validated Integer id) {
articleService.deleteArticle(id);
return Result.success();
} 方式二：
（前端）
// 删除文章接口
export const articleDeleteService = (id) => {
// 发送请求
return request.delete(`/article?id=` + id)
} （后端）
@DeleteMapping()
public Result deleteArticle(@RequestParam @Validated Integer id) {
articleService.deleteArticle(id);
return Result.success();
}
五、PATCH请求
前端请求特点：PATCH请求用于资源的部门内容的更新；大概会在资源不存在时去创建它
后端接收特点：利用 @PatchMapping + @Requestparam 或 @RequestBody
方式一：
（前端）
// 修改用户头像
export const userAvatarUpdateService = (avatarUrl) => {
let params = new URLSearchParams()
params.append('avatarUrl',avatarUrl)
// 发送请求
return request.patch('/user/updateAvatar',params)
} （后端）
@PatchMapping("/updateAvatar")
public Result updateAvatar(@RequestParam @URL String avatarUrl) {
// 更新用户头像
userService.updateAvatar(avatarUrl);
return Result.success();
}
方式二：
（前端）
// 修改用户密码
export const userPasswordUpdateService = (passwordData) => {
// 发送请求
return request.patch('/user/updatePwd',JSON.stringify(passwordData), {
headers: {
'Content-Type': 'application/json'
}})
} （后端）
@PatchMapping("/updatePwd")
public Result updatePwd(@RequestBody @Validated UserPwdDTO userPwdDTO) {
// 更新用户密码
return userService.updatePwd(userPwdDTO);
}
六、三大注解的利用场景、区别、与总结
总结
注解请求参数位置请求方式支持的Content-Type请求示例@PathVariableUrlGetGet请求没有Content-Type/user/1@RequestParamUrl、BodyGet / Post / Put / Delete/ Patch form-data，x-www-form-urlencoded/user?name=wzc&age=23@RequestBodyBodyPost / Put / Delete / Patch application/json
@PathVariable
【支持的请求方式】
[*]支持请求方式：GET
[*]参数通报：在URL上直接通报
【利用场景】
在向服务端获取简朴的数据的过程中可以利用，比方根据ID值查询学生信息，就会在前端发送GET请求，背景利用@GetMapper + @PathVariable接收
【优点】
简朴类型的数据绑定，比方 int 、string
【缺点】
1. 当必要通报的参数过多，就欠好写了，所以一般实用于单参数查询方法上
2. id暴露在url上，对于不方便泄露ID的值请求，最好不要利用，否则暴露网站url的特点。
3. 只支持Get方式，请求方式有局限性
4. 不支持复杂数据类型，自定义数据类型
【利用分析】
步调 格式 分析前端发送的请求URLhttp://localhost:8080/user/detail/1-后端接收参数@GetMapper（“/user/detail/{id}”）这里的id是路径上的参数，传什么值接收什么值后端映射值@PathVariable Integer id这里的方法参数id要与路径变量参数id同名，由于@PathVariable没有指定别名的注解变量
【注意事项】
[*] @PathVariable注解源码中只有一个参数，不填的默认是绑定到与路径参数同名的形参变量
[*] 如果要接收多个路径变量，则必要声明多个@PathVariable变量
@RequestParam
【支持的请求方式】
[*]支持请求方式：GET，POST,PUT,DELETE
[*]参数通报：在Body中通报
[*]支持的Content-Type：application/json, url
[*]
【利用场景】
对于多参数查询时比较常用到，好比跟据文章分类、文章标题内容含糊查询文章，就会发送POST请求，背景利用RequestParam接收
【优点】
能够轻松地从URL中提取参数。
【缺点】
1. 由于 url 长度有限制，所以参数必要限制数目和值的长度，否则url过于臃肿。
2. 安全性较低，由于查询参数会暴露在URL中。
3. 对于复杂或结构化的数据（如JSON、XML等）处理不够机动。
【利用分析】
[*]在控制器方法的参数前利用@RequestParam注解，并指定参数名称（可选）和默认值（可选）。
[*]比方：@RequestParam(name = "id", defaultValue = "1") Long id。
【注意事项】
@RequestParam拥有三个参数：
1. value、name 属性：标识请求参数名（必须配置）
2. required属性 ：参数是否必传，默认为 true，可以设置为非必传 false；（如果设置了必传或默认，请求未通报参数，将会抛出异常）
3. defaultValue：参数默认值，如果设置了该值，required 将会自动设置为 false
@RequestBody
【支持的请求方式】
[*]支持请求方式：GET，POST,PUT,DELETE、PATCH
[*]参数通报：在Body中通报
[*]支持的Content-Type：application/json, application/xml
【利用场景】
最常用的一种注解，用于处理HTTP请求的请求体（body）中的数据，用于POST、PUT和PATCH请求中，接收JSON、XML等结构化的数据
【优点】
1. 自动将请求体中的数据反序列化为Java对象。
2. 能够处理复杂和结构化的数据。
3. 提供了数据验证和绑定的功能。
【缺点】
对于简朴数据（如单个字符串、整数等）处理不够简便。
【利用分析】
[*]在控制器方法的参数前利用@RequestBody注解。
[*]确保请求体的内容类型（Content-Type）与Java对象的类型相匹配（如application/json）。
[*]比方：@RequestBody MyObject myObject。
【注意事项】
1. 利用@RequestBody时，通常不必要在方法参数中指定参数名称，由于整个请求体都会被反序列化为指定的Java对象。
2. @RequestBody注解只拥有一个参数 : required 默认为 true，即对象中的属性必须有一个要传，否则会抛出异常。
七、四大请求方式总结
以下是根据您提供的信息整理成的表格，对HTTP请求方式、数据库操纵、请求参数位置及Spring MVC注解进行了总结：
HTTP请求方式数据库操纵请求参数位置Spring MVC注解分析GET查询URI查询参数@RequestParam（也可通过URI路径变量@PathVariable获取）不修改数据库，只是查询；参数通常放在URL中POST增长RequestBody@RequestBody, @RequestParam（非标准，但可用于简朴参数）增长记录到数据库；复杂数据通常放在请求体中PUT更新RequestBody@RequestBody更新数据库中的记录；数据通常放在请求体中DELETE删除通常无参数（可通过URI路径变量@PathVariable指定资源）@PathVariable（用于指定要删除的资源ID）从数据库中删除记录；通常不必要额外参数，除非是指定资源的ID 注意：
[*] @PathVariable：用于处理URI路径中的变量部门，通常用于指定要操纵的详细资源（如通过ID删除特定记录）。
[*] @RequestHeader和@CookieValue：分别用于处理HTTP请求头和Cookie中的信息。
[*] 请求参数位置：对于GET请求，参数通常放在URL的查询字符串中。对于POST、PUT和DELETE请求，复杂数据通常放在请求体中（利用@RequestBody），而简朴数据（如ID）大概通过URI路径变量（@PathVariable）或表单数据（在POST请求中，利用@RequestParam，但内容类型为application/x-www-form-urlencoded）通报。
[*] DELETE请求与参数：虽然DELETE请求通常不必要额外的请求体参数（由于它通常用于删除由URI指定的资源），但偶然大概必要通过URI路径变量来指定要删除的资源ID。
[*]处理 request uri 部门的注解，路径参数变量：@PathVariable；
[*]处理request header部门的注解： @RequestHeader, @CookieValue，@RequestParam；
[*]处理request body部门的注解：@RequestParam， @RequestBody；
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]