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

news2024/11/10 13:20:39

一.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中对应的token
        ValueOperations<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.coloradmin.cn/o/2096956.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库操作与集成:使用Python与SQLite、MySQL、PostgreSQL等数据库

目录 引言 一、Python与SQLite的集成 1.1 SQLite简介 1.2 连接SQLite数据库 1.3 创建表 1.4 插入数据 1.5 查询数据 1.6 更新和删除数据 二、Python与MySQL的集成 2.1 MySQL简介 2.2 安装与配置 2.3 连接MySQL数据库 2.4 创建表与插入数据 2.5 查询、更新与删除数…

笔记:《利用Python进行数据分析》之apply的应用

这一节较难&#xff0c;十分灵活&#xff0c;可多花点时间 apply的简单应用 最通用的GroupBy方法是apply。 apply会将待处理的对象拆分成多个片段&#xff0c;然后对各片段调用传入的函数&#xff0c;最后尝试将各片段组合到一起。 回到之前那个小费数据集&#xff0c;假设你…

(四)vForm 动态表单自定义组件、属性

系列文章目录 (一)vForm 动态表单设计器之使用 (二)vForm 动态表单设计器之下拉、选择 (一)vForm 动态表单设计器之使用 文章目录 前言 一、自定义字段组件 1. 获得自定义组件json 2. 源码修改 二、自定义属性面板 1.属性面板文件 2.添加自定义属性 3.为字段组件添加属…

同事用10分钟给公司做了一套数据大屏,实力选手非他莫属!

数据可视化大屏是什么&#xff1f; 数据可视化大屏是一种将大量数据以图形、图表、地图等直观形式展示在大屏幕上。它通常被应用于企业的监控中心、会议室、展厅等场所&#xff0c;用于实时展示企业的关键业务指标、运营数据、市场趋势等信息。 今天给大家分享用JVS-智能BI如何…

DBdoctor快速纳管GBase 8a数据库

目录 如何快速纳管GBase 8a&#xff1f; 1.GBase 8a分析型数据库纳管部署架构 2.一分钟零依赖DBdoctor Server安装 3.快速纳管GBase 8a 重点说明&#xff1a; 针对GBase 8a&#xff0c;DBdoctor提供哪些功能服务&#xff1f; 1.SQL审核 2.深度巡检与报表 3.性能洞察 1&…

WebSocket通信学习笔记

1 简介 WebSocket是一种全双工通信协议&#xff0c;它允许客户端和服务器之间建立持久化的双向连接&#xff0c;从而在不频繁创建HTTP请求的情况下进行实时数据传输。与传统的HTTP协议相比&#xff0c;WebSocket更适合需要实时数据更新的应用场景&#xff0c;如聊天应用、实时…

架构师篇-23、工作坊实战应用架构

复习 ADM - 应用架构【AA】 案例实践 - 应用组件 - 核心模块 案例实践 - xx 项目应用关系 课程内应用架构

科研绘图系列:R语言PCoA图(PCoA plot)

介绍 PCoA(主坐标分析,Principal Coordinate Analysis)是一种多维数据的降维技术,它用于探索高维空间中样本之间的关系。PCoA通常用于生态学、遗传学和其他领域的数据分析,以揭示样本或个体之间的相似性或差异性。 PCoA图的作用: 数据降维:PCoA可以将高维数据(如物种…

18046 字母分类统计

### 思路 1. 读取输入的一行字符。 2. 初始化计数器&#xff1a;字母、数字、空格和其它字符的个数。 3. 遍历每个字符&#xff0c;根据其类型更新相应的计数器。 4. 输出计数结果&#xff0c;格式为&#xff1a;字母、数字、空格和其它字符的个数&#xff0c;中间以空格分隔。…

【2024-2025源码+文档+调试讲解】公开课管理系统

摘 要 随着互联网技术的迅猛发展&#xff0c;教育行业也逐渐迎来了一场全新的变革。在线教育平台的崛起为学习者提供了更加便捷灵活的学习方式&#xff0c;而公开课作为其中的一种形式&#xff0c;因其开放性和多样性而备受欢迎。然而&#xff0c;传统的公开课管理方式存在着…

【案例】如何做B端竞品分析?

竞品分析是产品经理的基本功&#xff0c;B端产品经理同样也需要经常做竞品分析。 B端产品的竞品分析难度更大&#xff0c;主要体现在如下几个方面&#xff1a; 1&#xff09;B端产品的信息获取困难 产品试用成本高&#xff0c;不像互联网产品那样可以随时下载体验。 对外公…

【数学分析笔记】第3章第1节 函数极限(1)

3. 函数极限与连续函数 3.1 函数极限 设有一半径为 r r r的圆&#xff0c;角度 x x x用弧度制表示。 红色的弧长为 2 x r 2xr 2xr&#xff0c;蓝色的弦长为 2 r sin ⁡ x 2r\sin x 2rsinx y 弦长 弧长 sin ⁡ x x y\frac{弦长}{弧长}\frac{\sin x}{x} y弧长弦长​xsinx​…

云计算密钥管理的重要性

云计算密钥管理是指对云计算环境中使用的加密密钥进行全生命周期的管理过程&#xff0c;包括密钥的生成、存储、分发、使用、更新和销毁等环节。这一过程对于保障云计算数据的安全性至关重要。以下是对云计算密钥管理的详细阐述&#xff1a; 一、云计算密钥管理的重要性 随着云…

大道至简 以量取胜

这次聊聊网络推广&#xff0c;这种发文章发视频的推广。 厉害的人&#xff0c;选高权重平台&#xff0c;精心打磨雕琢文案&#xff0c;一篇文案引爆流量十万&#xff0c;非常牛逼。 普通人很难做到这样。也许一篇文案&#xff0c;只有几百个浏览。 咱们简化一下&#xff0c;…

创纪录!300亿美元季度营收背后,英伟达的汽车“困局”

作为全球市值最高的上市公司&#xff0c;英伟达的财务数据变化历来是资本市场关注的焦点。不管是数据中心、游戏还是汽车业务&#xff0c;这家GPU巨头的业务进展&#xff0c;一定程度上也代表着不同细分市场的风向变化。 本周&#xff0c;英伟达对外发布最新数据&#xff0c;截…

北京市公共资源交易中心到访隆道调研交流

8月29日下午&#xff0c;北京市公共资源交易中心调研组在党委副书记朱永利带领下莅临隆道公司开展调研。隆道公司总裁吴树贵、总裁助理姚锐和市场总监张晶热情地接待来访的九位调研组成员&#xff0c;双方就招标采购数字化转型实践、人工智能技术研究和应用等话题展开深入交流。…

(免费领源码)java#SSM#mysql黄冈旅游景点服务网站16627-计算机毕业设计项目选题推荐

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对旅游服务等问题&#xff0c;对旅游服务进行…

Android源码编译_内置apk

在开发过程中&#xff0c;有一部分apk&#xff0c;我们是需要出厂内置好的&#xff0c;例如输入法、客户定制app等&#xff0c;这里内置分两种&#xff0c;一种是只内置apk&#xff0c;不含apk源码&#xff0c;一种是包含apk源码。 一、如何将apk内置到系统 1、首先将apk放到…

【网络安全】XSS+OTP绕过+账户接管

未经许可,不得转载。 文章目录 正文XSSOTP绕过账户接管正文 目标:www.example.com XSS 不断寻找可能存在XSS的点位。 终于,在个人资料页面:www.example.com/profile_details.php?userid= ,使用Payload<script>alert(1)</script>,实现XSS: 因此,能够实…

【书生大模型实战营】进阶岛 第4关 InternVL 多模态模型部署微调实践

文章目录 【书生大模型实战营】进阶岛 第4关 InternVL 多模态模型部署微调实践学习任务什么是InternVLInternVL 模型总览Dynamic High ResolutionPixel ShuffleInternVL 部署微调实践准备InternVL模型准备环境激活虚拟环境&#xff08;注意&#xff1a;后续的所有操作都需要在这…