HTTP中常用的4种请求方式——前端如何发送?后端怎么接受?

2024-09-02 11:52

本文主要是介绍HTTP中常用的4种请求方式——前端如何发送?后端怎么接受?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一.Get请求:

1.什么是Get请求?

2.前后端如何使用Get交互?

2.1.Query参数格式的Get请求

2.2.Path参数格式的Get请求

二.Post请求:

1.什么是Post请求?

2.前后端如何使用Post交互?

三.Put请求:

1.什么是Put请求?

2.前后端如何使用Put请求?

四.Delete请求:

1.什么是Delete请求?

2.前后端如何使用Delete请求?


 

一.Get请求:

1.什么是Get请求?

        GET请求是‌HTTP协议中的一种请求方法,主要用于从服务器获取资源。它是一种简单、安全且可缓存的请求方式,常用于在Web浏览器中访问网页或发送数据。GET请求通过将请求参数附加到URL中,以查询字符串的形式出现,以便将信息发送给服务器。这种请求方法适用于获取数据,而不是修改数据,因此它通常用于查询操作,如获取网页内容、图片、视频等资源。

GET请求的特点包括:

  • 参数暴露在URL中,存在安全隐患
  • 受到URL长度的限制,无法传输大量数据。
  • 具有幂等性,多次请求得到的结果是相同的。
  • 响应结果可以被浏览器缓存。

GET请求的适用场景包括:

  • 访问网页或获取网页上的信息。
  • 通过URL参数获取特定资源,如查询数据库中的记录。
  • 在浏览器回退时无害,因为GET请求不会修改服务器上的数据。

        需要注意的是,由于GET请求将参数暴露在URL中,因此不适合传输敏感信息,如密码或信用卡信息等。此外,由于URL长度限制,GET请求也不适合传输大量数据。‌

2.前后端如何使用Get交互?

        Get请求是将数据存放到请求行中进行的请求,没有请求体。因此我们前端发送的Get请求的请求参数有两种格式:Query参数Path参数

2.1.Query参数格式的Get请求

什么是Query参数格式?

形如:http://localhost:8080/user/article/page?page=1&pageSize=5

前端:

例如:使用Get请求回显文章分页查询

import request from '@/utils/request.js'//文章列表查询
export const articleListService = (params)=>{return  request.get('/user/article/page',{params:params})
}
import {articleListService } from '@/api/userArticle.js'
// 回显文章列表
const articleList = async()=>{let params = {page: page.value,pageSize: pageSize.value}let result = await articleListService(params);// 渲染视图total.value = result.data.total;articles.value = result.data.records;
}
articleList();

后端:

27a5cd3cc45c43c0a9d9eefcb5a07b73.png

2.2.Path参数格式的Get请求

什么是Path参数格式?

形如:http://localhost:8080/user/1

前端:

例如:根据用户id查询用户信息

import request from '@/utils/request.js'//用户查询
export const userQueryService = (userId)=>{return  request.get('/user/'+userId)
}

后端:

//用户查询
@GetMapping("/user/{userId}")
public Result<User> queryUser(@PathVariable Long userId) {log.info("查询用户:{}",userId);User user = userService.getById(userId);return Result.success(user);
}

对于路径参数,我们需要使用@PathVariable注解来获取路径参数

二.Post请求:

1.什么是Post请求?

        POST请求是一种HTTP方法,用于向服务器提交数据并创建新资源或修改现有资源。它通过将数据包含在请求体中而不是URL中,与GET请求相比,POST请求具有以下特点:

  • 数据安全性:POST请求将数据包含在请求体中,而不是直接放在URL中,因此数据对于用户来说是不可见的,这提高了数据的安全性,特别是当传输敏感信息(如密码、信用卡信息等)时。‌
  • 数据量限制:由于数据包含在请求体中,POST请求没有URL长度的限制,可以传输比GET请求更大的数据量,适合传输大量数据或上传文件等场景。
  • 幂等性:GET请求是幂等的,即多次请求相同的URL会得到相同的结果,不会对服务器产生副作用;而POST请求不是幂等的,多次提交可能会导致服务器状态的变化,如创建重复的资源或发送重复的消息。‌

用途:POST请求通常用于提交表单数据、上传文件或在服务器上执行某些操作。与GET请求不同,POST请求更适合用于需要创建或修改服务器上资源的场景。‌

2.前后端如何使用Post交互?

        Post请求是将数据存放到请求体中进行的请求。通常传递为一个对象即一个JSON串,后端服务器接收时必须使用@RequestBody注解来标识

前端:

例如:新增文章操作

import request from '@/utils/request.js'
//  发布文章
export const addArticleService = (articleData)=>{return  request.post('/admin/article',articleData)}
import {addArticleService} from '@/api/adminArticle.js'
//添加表单数据模型
const articleModel = ref({articleTitle: '',typeId: '',articleContent: ''
})
// 发布文章
const addArticle = async()=>{let result = await addArticleService(articleModel.value);ElMessage.success("发布成功");//回显articleList();
}

后端:

de5e93a9e554442c88948d84014a04d3.png

三.Put请求:

1.什么是Put请求?

        PUT 请求是一种HTTP方法,用于向服务器发送数据以更新已存在的资源。当你想要替换某个指定URL下的现有信息时,就使用PUT方法。它通常包含完整的资源内容,意味着服务器会在接收到请求后,完全用请求体中的数据替换原有资源。如果该资源不存在,一些服务器可能会返回404错误。PUT请求常用于更新用户资料、修改博客文章等场景。

2.前后端如何使用Put请求?

2.1.Body参数格式的Put请求

前端:

例如:修改文章

import request from '@/utils/request.js'
//  修改文章
export const updateArticleService = (articleData) =>{return request.put('/admin/article/',articleData);
}
import {updateArticleService} from '@/api/adminArticle.js'
// 修改文章
const updateArticle = async()=>{let articleData={articleId: articleId.value,articleTitle: articleModel.value.articleTitle,typeId: articleModel.value.typeId,articleContent: articleModel.value.articleContent}let result = await updateArticleService(articleData);ElMessage.success("修改成功");//回显articleList();
}

后端:

83b45168f9ce427d8e558a0343cb03a6.png

2.2.Path参数格式的Put请求

前端:

import request from '@/utils/request.js'
// 修改用户密码
export const userUpdatePasswordService = (userPassword) =>{return request.put('/user/'+userPassword);
}
import {userUpdatePasswordService} from '@/api/user.js'
const UpdatePassword = async()=>{let result = await userUpdatePasswordService(Password.value.newPassword);ElMessage.success(result.msg ? result.msg : '修改成功,请重新登录')}

后端:

/*** 用户修改密码*/@PutMapping("/{userPassword}")@CacheEvict(value = "userCache", allEntries = true)public Result updatePassword(@PathVariable("userPassword")@Length(min = 4, max = 16,message = ValidationConstant.PASSWORD_LENGTH) String userPassword,@RequestHeader("token") String token) {log.info("用户修改密码:{}", userPassword);Long userId = BaseContext.getCurrentId();userService.updatePassword(userPassword,userId);//删除redis中对应的tokenValueOperations<String, String> operations = stringRedisTemplate.opsForValue();operations.getOperations().delete(token);return Result.success();}

四.Delete请求:

1.什么是Delete请求?

        "Delete 请求"通常是指HTTP协议中的一个方法,用于从服务器上永久删除资源或数据。在Web开发中,当客户端想要移除某个特定的数据项(如数据库记录、文件等),就会向服务器发送一个DELETE HTTP请求到该资源的URL。这个操作是幂等的,意味着多次执行同样的DELETE请求不会改变资源的状态,除非服务器有特殊处理机制。

执行DELETE请求需要权限管理,因为它是对数据的不可逆操作。服务器接收到请求后,会验证用户身份并检查是否有权执行删除,并最终执行相应的删除操作,然后返回一个状态码来表示请求结果(例如204 No Content,表示成功删除,或404 Not Found,表示找不到请求的资源)。

2.前后端如何使用Delete请求?

        Delete请求的参数格式是Path参数,后端需要@PathVariable注解标识。

前端:

import request from '@/utils/request.js'
//  删除文章
export const deleteArticleService = (articleId)=>{return request.delete('/admin/article/'+articleId);}
// 删除文章
const deleteArticle = async(row)=>{let result = await deleteArticleService(row.articleId);ElMessage.success("删除成功");//回显clear();articleList();
}

后端:

/*** 删除文章* @return*/@Log@Transactional(rollbackFor = Exception.class)@DeleteMapping("/{articleId}")@CacheEvict(value = "articleCache", allEntries = true)public Result deleteArticle(@PathVariable("articleId") Long articleId) {log.info("删除文章:{}",articleId);articleService.removeById(articleId);log.info("删除类型与文章关系:{}",articleId);articleTypeService.removeArticleTypeByArticleId(articleId);log.info("删除文章与作者关系:{}",articleId);adminArticleService.removeArticleAuthorByArticleId(articleId);log.info("删除文章与用户关系:{}",articleId);userarticleService.removeArticleUserByArticleId(articleId);return Result.success();}

 

 

这篇关于HTTP中常用的4种请求方式——前端如何发送?后端怎么接受?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129877

相关文章

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4