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

news/2024/9/17 4:16:23/ 标签: http, 网络协议, 网络

一.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();

后端:

https://i-blog.csdnimg.cn/direct/27a5cd3cc45c43c0a9d9eefcb5a07b73.png" alt="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();
}

后端:

https://i-blog.csdnimg.cn/direct/de5e93a9e554442c88948d84014a04d3.png" alt="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();
}

后端:

https://i-blog.csdnimg.cn/direct/83b45168f9ce427d8e558a0343cb03a6.png" alt="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://www.ppmy.cn/news/1521807.html

相关文章

C语言代码练习(第十五天)

今日练习&#xff1a; 37、输入连个正整数 n 和 m &#xff0c;求其最大公约数和最小公倍数 38、请编程序将“China”翻译成密码&#xff0c;密码规律是&#xff1a;用原来的字母后面第4个字符代替原来的字母 39、设半径 r 1.5&#xff0c;圆柱高 h 3&#xff0c;求圆周长、圆…

优化 spring boot 的启动速度

优化Spring Boot应用的启动速度可以采取以下几个策略&#xff1a; 最小化依赖&#xff1a;检查项目是否有不必要的依赖&#xff0c;特别是那些启动时不使用的库。使用spring-boot-starter-web而不是spring-boot-starter-tomcat可以减少一些默认依赖。 懒加载组件&#xff1a;使…

Linux中Ubuntu系统安装Windows得字体

背景 安装了geoserver 然后geoserver中需要用到微软雅黑字体 所以需要安装一下Linux系统安装Windows中的字体 创建字体目录 cd /usr/share/fonts/ mkdir winfont在Windows找到对应字体 C:\Windows\Fonts 复制该字体到桌面 Linux系统中上传字体 roottest-server03:/usr/sha…

【知识图谱】4、LLM大模型结合neo4j图数据库实现AI问答的功能

昨天写了一篇文章&#xff0c;使用fastapi直接操作neo4j图数据库插入数据的例子&#xff0c; 本文实现LLM大模型结合neo4j图数据库实现AI问答功能。 废话不多说&#xff0c;先上代码 import gradio as gr from fastapi import FastAPI, HTTPException, Request from pydantic…

APP长文本内容编辑器功能实现方案

背景 CSDN APP 中原有编辑器页面为纯H5适配&#xff0c;整体用户交互体验差&#xff0c;如何优化APP端编辑器用户体验是我们团队需要思考的问题。下面我们以iOS为例展开讨论。 一、方案调研 我们分析了几款国内内容发布的APP&#xff0c;如知乎、今日头条、简书&#xff0c;…

谷歌的 GameNGen:无需游戏引擎,人工智能模拟 “毁灭战士“,开辟新天地

谷歌公司的研究人员创建了一个神经网络&#xff0c;可以在不使用传统游戏引擎的情况下生成经典射击游戏《毁灭战士》的实时游戏&#xff0c;从而实现了人工智能领域的一个重要里程碑。这个名为 GameNGen 的系统标志着人工智能向前迈出了重要一步&#xff0c;它能在单芯片上以每…

淘客APP的前后端分离架构设计

淘客APP的前后端分离架构设计 大家好&#xff0c;我是微赚淘客返利系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代的软件开发中&#xff0c;前后端分离架构已经成为了一种主流的设计模式。这种架构模式将前端和后端的职责明…

[论文笔记] LLaVA

一、LLaVA 论文中的主要工作和实验结果 Existing Gap: 之前的大部分工作都在做模态对齐,做图片的 representation learning,而没有针对 ChatBot(多轮对话,指令理解)这种场景优化。 Contribution: 这篇工作已经在 BLIP-2 之后了,所以 Image 的理解能力不是 LLaVA 希望提升…

0902,DEQUE,LIST,VECTOR

目录 01_vector.cc 02_vector.cc 作业 01STL包括哪些组件&#xff1f;各自具有哪些特点&#xff1f; 02 序列式容器包括哪些&#xff1f;他们之间有哪些异同&#xff1f; 03 下面程序有什么错误&#xff1f; 04 创建和初始化vector的方法&#xff0c;每种都给出一个实例…

OpenCV Jet颜色映射和HSV颜色空间对比

目录 一、概述 二、Jet颜色空间映射 2.1优势 2.2颜色变化范围 2.3应用场景 三、HSV 颜色空间 3.1优势 3.2颜色分布 3.3应用场景 四、Jet与HSV区别 4.1对比总结 4.2选择建议 OpenCV图像处理与应用实战算法汇总地址&#xff1a; OpenCV 图像处理应用实战算法列表汇总…

Elasticsearch 再次开源

作者&#xff1a;来自 Elastic Shay Banon [D.N.A] Elasticsearch 和 Kibana 可以再次被称为开源了。很难表达这句话让我有多高兴。我真的激动得跳了起来。Elastic 的所有人都是这样的。开源已经融入我的 DNA&#xff0c;也融入了 Elastic 的 DNA。能够再次将 Elasticsearch 称…

电脑回收站被清空,怎么恢复丢失数据?

回收站&#xff0c;这个看似不太起眼的电脑功能&#xff0c;实际上在关键时刻能够为我们挽回重大损失&#xff0c;帮助我们重新获得至关重要的文件和数据。对于经常与电脑打交道的朋友们来说&#xff0c;当某个文件被不小心删除时&#xff0c;回收站往往成为我们文件找回和恢复…

【实战案例】项目经理和产品经理高效配合的秘诀:产品与项目关联

最近&#xff0c;不断收到关于项目经理岗位以及产品经理岗位相关的提问&#xff0c;比如&#xff1a; “产品经理和项目经理&#xff0c;有什么区别&#xff1f;” “产品经理和项目经理&#xff0c;哪个发展前景更好&#xff1f;” “产品经理和项目经理发生冲突&#xff0…

开源云原生数据库PolarDB PostgreSQL 15兼容版本正式发布

开源云原生数据库PolarDB PostgreSQL 15兼容版正式发布上线&#xff0c;该版本100%兼容开源PostgreSQL 15。PolarDB是阿里云自研云原生关系型数据库&#xff0c;基于共享存储的存算分离架构使其具备灵活弹性和高性价比的特性&#xff0c;在开源PostgreSQL很好的性能表现的基础上…

Matlab 并联双振子声子晶体梁结构带隙特性研究

参考文献&#xff1a;吴旭东,左曙光,倪天心,等.并联双振子声子晶体梁结构带隙特性研究[J].振动工程学报,2017,30(01):79-85. 为使声子晶体结构实现范围更宽的多带隙特性&#xff0c;基于单振子型声子晶体结构弯曲振动带隙频率范围窄的局 限&#xff0c;提出了一种双侧振子布置…

监理工程师职业资格考试

根据住房城乡建设部、交通运输部、水利部、人力资源社会保障部关于印发《监理工程师职业资格制度规定》《监理工程师职业资格考试实施办法》&#xff08;建人规〔2020〕3号&#xff09;文件精神&#xff0c;监理工程师职业资格考试实行全国统一大纲、统一命题、统一组织。 一、…

TikTok直播为什么要用独立IP

TikTok直播作为一种受欢迎的社交媒体形式&#xff0c;吸引了越来越多的用户和内容创作者。在进行TikTok直播时&#xff0c;选择使用独立IP地址是一种被广泛推荐的做法。本文将探讨为什么在TikTok直播中更推荐使用独立IP&#xff0c;并解释其优势和应用。 独立IP是指一个唯一的互…

Linux是如何收发网络包的

Linux网 络协议栈 从上述⽹络协议栈&#xff0c;可以看出&#xff1a; 收发流程 ⽹卡是计算机⾥的⼀个硬件&#xff0c;专⻔负责接收和发送⽹络包&#xff0c;当⽹卡接收到⼀个⽹络包后&#xff0c;会通过 DMA 技术&#xff0c;将⽹络包放⼊到 Ring Buffer &#xff0c;这个是…

Identifying User Goals from UI Trajectories论文学习

通过UI轨迹识别用户的需求。 这篇论文同样聚焦于UI agent&#xff0c;只是思路比较特别。他们想要通过训练agent通过用户的行为轨迹反推出他们想要干什么的能力来锻炼agent识别&#xff0c;理解&#xff0c;使用UI的能力。同时这个训练项目本身也有一定的实际意义&#xff0c;…

RISC-V单片机智能落地扇方案

在众多产品中&#xff0c;智能落地扇产品凭借其出色的性能和质量优势&#xff0c;备受消费者青睐。智能落地扇有着卓越的性能和智能化的操作。 RAMSUN提供的智能落地扇方案主控单片机芯片采用RISC-V微处理器&#xff0c;内置高速存储器&#xff0c;最高工作频率可达144MHz&…