前后端请求一致性学习

        在进行前后端分离开发项目的过程中，前后端同学往往需要依照接口文档的基本信息以及相应的响应格式进行接口请求的开发，在这个过程中涉及到常见的Get、Post、Put、Patch等等的请求，相应的前后端的书写格式是什么，这篇文章进行一个记录学习

举例：接口文档具备的三部分描述

一、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

注意：

  1. @PathVariable：用于处理URI路径中的变量部分，通常用于指定要操作的具体资源（如通过ID删除特定记录）。

  2. @RequestHeader和@CookieValue：分别用于处理HTTP请求头和Cookie中的信息。

  3. 请求参数位置：对于GET请求，参数通常放在URL的查询字符串中。对于POST、PUT和DELETE请求，复杂数据通常放在请求体中（使用@RequestBody），而简单数据（如ID）可能通过URI路径变量（@PathVariable）或表单数据（在POST请求中，使用@RequestParam，但内容类型为application/x-www-form-urlencoded）传递。

  4. DELETE请求与参数：虽然DELETE请求通常不需要额外的请求体参数（因为它通常用于删除由URI指定的资源），但有时可能需要通过URI路径变量来指定要删除的资源ID。

  5. 处理 request uri 部分的注解，路径参数变量：@PathVariable；
  6. 处理request header部分的注解： @RequestHeader, @CookieValue，@RequestParam；
  7. 处理request body部分的注解：@RequestParam， @RequestBody；　

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/881957.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据链中常见电磁干扰matlab仿真,对比噪声调频,线性调频,噪声,扫频,灵巧五种干扰模型

数据链中常见电磁干扰matlab仿真,对比噪声调频,线性调频,噪声,扫频,灵巧五种干扰模型

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 噪声调频干扰 4.2 线性调频干扰 4.3 噪声干扰 4.4 扫频干扰 4.5 灵巧干扰 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3…
阅读更多...
Go语言中的时间比较与时区处理

Go语言中的时间比较与时区处理

文章目录 问题背景问题分析验证时区问题 解决方案方法 1&#xff1a;使用本地时区解析时间方法 2&#xff1a;将 time.Now() 转换为 UTC 最终结果总结 在后端开发中&#xff0c;时间处理往往是不可避免的&#xff0c;尤其是涉及到跨时区的应用时&#xff0c;时区问题常常会引发…
阅读更多...
【黑马redis高级篇】持久化

【黑马redis高级篇】持久化

//来源[01,05]分布式缓存 除了黑马&#xff0c;还参考了别的。 目录 1.单点redis问题及解决方案2.为什么需要持久化&#xff1f;3.Redis持久化有哪些方式呢&#xff1f;为什么我们需要重点学RDB和AOF&#xff1f;4.RDB4.1 定义4.2 触发方式4.2.1手动触发save4.2.2被动触发bgsa…
阅读更多...
开源项目 - yolo v5 物体检测 手检测 深度学习

开源项目 - yolo v5 物体检测 手检测 深度学习

开源项目 - yolo v5 物体检测 手检测 深度学习 开源项目地址&#xff1a;https://gitcode.net/EricLee/yolo_v5 ​​ 助力快速掌握数据集的信息和使用方式。 数据可以如此美好&#xff01;
阅读更多...
数据结构 ——— 顺序表oj题：验证回文串

数据结构 ——— 顺序表oj题：验证回文串

目录 题目要求 代码实现 题目要求 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xf…
阅读更多...
JavaSE——集合4：List接口实现类—LinkedList

JavaSE——集合4：List接口实现类—LinkedList

目录 一、LinkedList的全面说明 二、LinkedList的底层操作机制 (一)LinkedList添加结点源码 (二)LinkedList删除结点源码 三、LinkedList常用方法 四、ArrayList与LinkedList的选择 一、LinkedList的全面说明 LinkedList底层实现了双向链表和双端队列的特点可以添加任意…
阅读更多...
Python安装|PyCharm Professional 下载安装教程。2024最新版，亲测使用！

Python安装|PyCharm Professional 下载安装教程。2024最新版，亲测使用！

一、下载地址&#xff1a; 二、Python的下载及安装&#xff1a; 1、从上面网址进入Python官网 2、安装流程图&#xff1a; 双击已经下载好的python-*.*.*-amd64.exe文件&#xff0c;开始安装 最后就等它自己安装完成就好了 3、检验是否安装完成&#xff1a; windowsR快捷键…
阅读更多...
Vue 3 和 Vue Router 使用 createWebHistory 配置

Vue 3 和 Vue Router 使用 createWebHistory 配置

在 Vue 3 项目中&#xff0c;如果使用 Vue Router 并希望启用 HTML5 History 模式&#xff0c;需要在创建路由器实例时传入 createWebHistory 作为历史模式的配置。此外&#xff0c;还需要确保在生产环境中设置正确的基本路径&#xff08;base&#xff09;&#xff0c;这样才能…
阅读更多...
数据结构——顺序表的基本操作

数据结构——顺序表的基本操作

前言 介绍 &#x1f343;数据结构专区&#xff1a;数据结构 参考 该部分知识参考于《数据结构&#xff08;C语言版 第2版&#xff09;》24~28页 补充 此处的顺序表创建是课本中采用了定义方法为SqList Q来创建&#xff0c;并没有使用顺序表指针的方法&#xff0c;具体两个…
阅读更多...
视频云存储/音视频流媒体视频平台EasyCVR视频汇聚平台在欧拉系统中启动失败是什么原因？

视频云存储/音视频流媒体视频平台EasyCVR视频汇聚平台在欧拉系统中启动失败是什么原因？

视频监控/视频集中存储/磁盘阵列EasyCVR视频汇聚平台具备强大的拓展性和灵活性&#xff0c;支持多种视频流的外部分发&#xff0c;如RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、WebRTC、fmp4等&#xff0c;这为其在各种复杂环境下的部署提供了便利。 安防监控EasyCVR视频汇聚平…
阅读更多...
vue elementui table编辑表单时，弹框增加编辑明细数据

vue elementui table编辑表单时，弹框增加编辑明细数据

需求: 前端进行新增表单时&#xff0c;同时增加表单的明细数据。明细数据部分&#xff0c;通过弹框方式增加或者编辑。 效果图&#xff1a; 代码&#xff1a; <!-- 新增主表弹窗 Begin --><el-dialog:title"titleInfo"top"5vh"centerwidth"…
阅读更多...
mysql innodb 引擎如何直接复制数据库文件？

mysql innodb 引擎如何直接复制数据库文件？

mysql innodb 引擎如何直接复制数据库文件&#xff1f;介绍如下&#xff1a; 1、首先找到数据库文件所在位置 一般可以看my.conf/my.ini配置的文件的“datadir” 看示例&#xff1a; “MAMP”在Macos下的数据库文件位置&#xff1a; /Library/Application Support/appsolu…
阅读更多...
想要搭建陪玩系统前后端该如何去做？uniapp后端php开发开源圈子源码uniapp社区论坛源码下载源码网

想要搭建陪玩系统前后端该如何去做？uniapp后端php开发开源圈子源码uniapp社区论坛源码下载源码网

陪玩系统 陪玩日记 同城陪玩 陪玩工作室 陪聊 app开发 线下伴游 伴游系统 运营线下陪玩 轻资产创业 城市玩伴 小程序开发 app开发 城市玩伴 同城陪玩 运营陪玩系统 线下陪玩系统开发 陪玩软件 私人向导 线下陪玩系统 单身经济 助教 搭子 系统部署与配置 服务器环境配置&#…
阅读更多...
CTFHUB技能树之SQL——字符型注入

CTFHUB技能树之SQL——字符型注入

开启靶场&#xff0c;打开链接&#xff1a; 直接指明是SQL字符型注入&#xff0c;但还是来判断一下 &#xff08;1&#xff09;检查是否存在注入点 1 and 11# 返回正确 1 and 12# 返回错误 说明存在SQL字符型注入 &#xff08;2&#xff09;猜字段数 1 order by 2# 1 order…
阅读更多...
QT--单选按钮（QRadioButton）和复选按钮（QCheckBox）

QT--单选按钮（QRadioButton）和复选按钮（QCheckBox）

在Qt中&#xff0c;单选按钮&#xff08;QRadioButton&#xff09;和复选按钮&#xff08;QCheckBox&#xff09;是两种常用的用户界面控件&#xff0c;它们的主要区别在于选择行为和用途&#xff1a; QRadioButton&#xff08;单选按钮&#xff09; 选择行为&#xff1a;单选…
阅读更多...
Gin框架操作指南01：开山篇

Gin框架操作指南01：开山篇

Gin是目前最流行&#xff0c;性能最好的的GoWeb框架&#xff0c;几乎成为了学习GoWeb必备的知识。本人最近也在学Gin&#xff0c;在b站搜了很多教程&#xff0c;发现有的教程不够详细&#xff0c;有的教程工具包安装有问题&#xff0c;而官方文档的很多示例代码又不全&#xff…
阅读更多...
抖音解压视频素材宝库

抖音解压视频素材宝库

在快节奏的生活中&#xff0c;解压视频成为抖音上的热门内容类型&#xff0c;想要制作出精彩的解压视频&#xff0c;优质素材必不可少。今天&#xff0c;为大家推荐几个超棒的抖音解压视频素材网站&#xff0c;让你的创作之路轻松无忧&#xff01; 蛙学网 作为国内知名的短视频…
阅读更多...
深度解析计数排序：原理、特性与应用

深度解析计数排序：原理、特性与应用

目录 &#x1f4af;引言 &#x1f4af;计数排序的原理 ⭐核心概念 ⭐工作流程 1.确定计数范围 2.统计元素出现次数 3.计算累计计数 4.放置元素到正确位置 &#x1f4af;计数排序的实现 ⭐代码示例&#xff08;以 C 为例&#xff09; ⭐时间复杂度分析 ⭐稳定性分析…
阅读更多...
【AI学习】Mamba学习（七）：HiPPO通用框架介绍

【AI学习】Mamba学习（七）：HiPPO通用框架介绍

HiPPO这篇论文《HiPPO: Recurrent Memory with Optimal Polynomial Projections》&#xff0c;提出了一个通用框架。 我们再重新看一下论文的摘要&#xff1a; 从连续数据中学习的一个核心问题是&#xff0c;随着更多数据的处理&#xff0c;以增量方式表示累积历史。我们介绍了…
阅读更多...
「规模焦虑」如影随形，库迪咖啡想靠便捷店突围能行吗？

「规模焦虑」如影随形，库迪咖啡想靠便捷店突围能行吗？

作者 | 辰纹 来源 | 洞见新研社 “我有一个广东的小兄弟&#xff0c;做了9年的奶茶&#xff0c;后来因为觉得咖啡是一个上升期的赛道&#xff0c;所以毅然决然拿了45万加盟了库迪咖啡&#xff0c;结果全亏损完了&#xff0c;相当于只买了一个配方。” 抖音博主茶饮圈大山哥分…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023