五种HTTP数据传输方式

在前端开发过程中,后端主要提供 http 接口来传输数据,而这种数据传输方式主要有五种:

  • url param
  • query
  • form-urlencoded
  • form-data
  • json

下面就让我们一起来了解一下在Nest.js中如何使用这五种HTTP数据传输方式:

一,创建项目

使用nest new 创建一个nest的项目

nest new 项目名称

在根目录执行 nest g resource person 快速生成 person 模块的 crud 代码

nest g resource person

nest start --watch 启动 Nest 服务

这样一个有 person 的 crud 接口的服务就跑起来了

二,访问静态资源

api 接口跑通了,再支持下静态资源的访问

main.ts 是负责启动 Nest 的 ioc 容器的,调用下 useStaticAssets 来支持静态资源的请求:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {const app = await NestFactory.create<NestExpressApplication>(AppModule);app.useStaticAssets('public', { prefix: '/static'});await app.listen(3000);
}
bootstrap();
//注意:要给 create 方法传入 NestExpressApplication 的泛型参数才有 useStaticAssets这些方法

 我们指定 prefix 为 static,然后在静态文件目录 public 下添加一个 html

api 接口和静态资源的访问都支持了,接下来就分别实现下 5 种前后端 http 数据传输的方式

三,url param

url param 是 url 中的参数,Nest 里通过 :参数名 的方式来声明(比如下面的 :id),然后通过 @Param(参数名) 的装饰器取出来注入到 controller:

@Controller('person') 的路由和 @Get(':id') 的路由会拼到一起,也就是只有 /person/xxx 的 get 请求才会走到这个方法。

接下来我们在前端页面中使用axios请求一下这个接口:

在页面中使用axios发起一个get请求,参数放在url中

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><script>async function urlParam() {// 使用axios发起请求const res = await axios.get('/person/10086');console.log(res);}urlParam();</script>
</body>

 启动服务,在浏览器访问下:

控制台打印了服务端返回的消息,证明服务端拿到了通过 url param 传递的数据。

四,query

query 是 url 中 ? 后的字符串,需要做 url encode。

在 Nest 里,通过 @Query 装饰器来取:

注意:这个 find 的路由要放到 :id 的路由前面,因为 Nest 是从上往下匹配的,如果放在后面,那就匹配到 :id 的路由了。

接下来就在前端页面中去请求这个接口:

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><script>async function urlParam() {// 使用axios发起请求const res = await axios.get('/person/find',{params:{name:'张三',age:25}});console.log(res);}urlParam();</script>
</body>

 参数通过 params 指定,axios 会做 url encode,不需要自己做。

让我们测试一下,服务端成功接受了我们通过 query 传递的数据。

 上面两种(url param、query)是通过 url 传递数据的方式,下面 3 种是通过 body 传递数据

五,form urlencoded

form urlencoded 是通过 body 传输数据,其实是把 query 字符串放在了 body 里。

用 Nest 接收的话,使用 @Body 装饰器,Nest 会解析请求体,然后注入到 dto 中。

dto 是 data transfer object,就是用于封装传输的数据的对象:

前端代码使用 post 方式请求,指定 content type 为 application/x-www-form-urlencoded,用 qs 做下 url encode

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script><script src="https://unpkg.com/qs@6.10.2/dist/qs.js"></script>
</head><body><script>async function formUrlEncoded() {const res = await axios.post('/person', Qs.stringify({name: '张三',age: 24}), {headers: { 'content-type': 'application/x-www-form-urlencoded' }});console.log(res);}formUrlEncoded();</script>
</body>

测试一下,服务器成功接收到了数据并返回:

六,json

json 需要指定 content-type 为 application/json,内容会以 JSON 的方式传输,后端代码同样使用 @Body 来接收,不需要做啥变动。form urlencoded 和 json 都是从 body 取值,Nest 内部会根据 content type 做区分,使用不同的解析方式。

前端代码使用 axios 发送 post 请求,默认传输 json 就会指定 content type 为 application/json,不需要手动指定

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><script>async function json() {const res = await axios.post('/person', {name: '张三',age: 24});console.log(res);}json();</script>
</body>

 测试下,服务端成功接收到了通过 json 传递的数据

 七,form data

json 和 form urlencoded 都不适合传递文件,想传输文件要用 form data

Nest 解析 form data 使用 FilesInterceptor 的拦截器,用 @UseInterceptors 装饰器启用,然后通过 @UploadedFiles 来取。非文件的内容,同样是通过 @Body 来取。

import { AnyFilesInterceptor } from '@nestjs/platform-express';
import { CreatePersonDto } from './dto/create-person.dto';@Controller('api/person')
export class PersonController {@Post('file')@UseInterceptors(AnyFilesInterceptor({dest: 'uploads/'}))body2(@Body() createPersonDto: CreatePersonDto, @UploadedFiles() files: Array<Express.Multer.File>) {console.log(files);return `received: ${JSON.stringify(createPersonDto)}`}
}

这一步需要

npm i -D @types/multer

 前端代码使用 axios 发送 post 请求,指定 content type 为 multipart/form-data

<!DOCTYPE html>
<html lang="en">
<head><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body><input id="fileInput" type="file" multiple/><script>const fileInput = document.querySelector('#fileInput');async function formData() {const data = new FormData();data.set('name','张三');data.set('age', 24);data.set('file1', fileInput.files[0]);data.set('file2', fileInput.files[1]);const res = await axios.post('/person/file', data, {headers: { 'content-type': 'multipart/form-data' }});console.log(res);     }fileInput.onchange = formData;</script>
</body>
</html>

 file input 指定 multiple 可以选择多个文件。

测试一下:

服务端接收到了 name 和 age:

去服务器控制台看下:

可以看到,服务器成功的接收到了我们上传的文件

八,总结

我们用 axios 发送请求,使用 Nest 后端服务,实现了 5 种 http/https 的数据传输方式:

其中前两种是 url 中的:

  • url param: url 中的参数,Nest 中使用 @Param 来取
  • query:url 中 ? 后的字符串,Nest 中使用 @Query 来取

后三种是 body 中的:

  • form urlencoded: 类似 query 字符串,只不过是放在 body 中。Nest 中使用 @Body 来取,axios 中需要指定 content type 为 application/x-www-form-urlencoded,并且对数据用 qs 或者 query-string 库做 url encode
  • json: json 格式的数据。Nest 中使用 @Body 来取,axios 中不需要单独指定 content type,axios 内部会处理。
  • form data:主要用于传输文件,Nest 中要使用 FilesInterceptor 来处理其中的 binary 字段,用 @UseInterceptors 来启用,其余字段用 @Body 来取。axios 中需要指定 content type 为 multipart/form-data,并且用 FormData 对象来封装传输的内容。

这 5 种 http 的传输数据的方式覆盖了绝大多数开发场景

下一章我们一起深入学习一下Nest的文件上传,大文件切片上传。

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

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

相关文章

Three.js框架的技术难点

Three.js作为一款功能强大的3D JavaScript框架&#xff0c;在为开发者提供丰富的功能和灵活性的同时&#xff0c;也带来了一些技术难点&#xff0c;需要开发者具备一定的知识和经验才能克服。以下是一些Three.js框架的技术难点。北京木奇移动技术有限公司&#xff0c;专业的软件…

微信小程序地图功能详解

引言 随着移动互联网的快速发展&#xff0c;地图服务已经成为我们日常生活中不可或缺的一部分。无论是查找目的地、规划路线还是探索周边环境&#xff0c;地图都能提供极大的便利。微信小程序作为一款轻量级的应用&#xff0c;也提供了丰富的地图功能&#xff0c;为用户提供了…

【解决】法启动此程序,因为计算机中丢失vcruntime140_1.dll,尝试重新安装此程序以解决此问题【包括安装mysql在内的】

缺少vcruntime140_1.dll解决此问题的第一步找到该文件,有些dll修复工具是收费的&#xff0c;因此下面介绍几种比较简单有效而且免费的解决办法 方法1&#xff1a;重新安装Visual C Redistributable Packages 上面的安装包解决win7&#xff0c;8&#xff0c;10&#xff0c;11的…

STM32HAL库--NVIC和EXTI

1. 外部中断实验 1.1 NVIC和EXTI简介 1.1.1 NVIC简介 NVIC 即嵌套向量中断控制器&#xff0c;全称 Nested vectored interrupt controller。是ARM Cortex-M处理器中用于管理中断的重要组件。负责处理中断请求&#xff0c;分配优先级&#xff0c;并协调中断的触发和响应。 它是…

【日记】被客户一顿输出该怎么办(431 字)

正文 上午有个客户在电话里对着我一顿输出&#xff0c;说他们没有发票财务账务没法处理怎么怎么的。话里话外满满一股 “全是你们的错” 的味道。 当时我很想笑&#xff0c;大姐&#xff0c;你对我输出有啥用啊。票是上级行开的&#xff0c;我们又没有开票权限&#xff0c;对…

让AI代替我写代码???——Codeium安装及使用

序 不知不觉又到了期末大作业的时间了&#xff0c;面对老师布置的超繁琐代码项目&#xff0c;竟一时有些发怵&#xff0c;不知道从何下手才好…… 但是&#xff0c;懒惰如张同学的我怎么能拘泥于老老实实完成这些毫无技术可言的作业呢&#xff1f; 于是乎&#xff0c;我便寻…

工程咨询单位乙级资信预评价条件一览

工程咨询单位乙级资信预评价条件一览&#xff1a; 一、基本要求 独立法人资格&#xff1a;申请单位必须具备独立的法人资格。 二、专业技术力量 咨询工程师数量&#xff1a;单位内咨询工程师&#xff08;投资或相应专业领域&#xff09;应不少于4人。专业人员配置&#xff…

【SQL server速成之路】函数

&#xff08;3&#xff09;LEFT函数 LEFT ( character_expression , integer_expression ) 功能&#xff1a;返回从字符串character_expression左边开始&#xff0c;由integer_expression指定个数的字符。参数character_expression&#xff1a;为字符型表达式&#xff0c;integ…

c#音乐播放器续(联网下载)

0.前言 书接上文&#xff0c;我们已经实现了一个能够播放本地音乐的音乐播放器&#xff0c;能够播放众多音乐格式&#xff0c;包括.ogg&#xff0c;接下来&#xff0c;我们将为我们的音乐播放器添加一个令人激动的新功能——联网音乐下载和播放&#xff01;这个功能将使我们能…

浅谈Java23种设计模式之创建型设计模式的几种使用场景

前言: 都知道Java有23种设计模式,但实际开发中相信很多同学基本很少能利用上这些设计模式. 下面我将结合实际开发应用场景来进行简单解读一下这些设计模式在实际开发中是怎么使用的. 1.单例模式&#xff08;Singleton&#xff09; 确保一个类只有一个实例&#xff0c;并提供一…

C++中的享元模式

目录 享元模式&#xff08;Flyweight Pattern&#xff09; 实际应用 文字编辑器中的字符 修仙游戏中的地图瓦片 图形编辑器中的图形对象 总结 享元模式&#xff08;Flyweight Pattern&#xff09; 享元模式是一种结构型设计模式&#xff0c;用于减少对象的内存使用和提高…

Ubuntu 22.04 解决 firefox 中文界面乱码

问题复现 在为Ubuntu 22.04 Server安装完整的GNOME 42.01桌面后&#xff0c;将桌面语言设置为中文时&#xff0c;打开Firefox可能会出现中文乱码的问题。经过网上调查发现&#xff0c;这个问题是由Snap软件包引起的。 解决方案 为了避免在Ubuntu 22.04中文模式下的乱码问题…

Java解析Json格式数据

首先通过一定的方法得到String类型的Json数据。 然后利用fastjson中的JSON的parseObject()将String解析为JSONObject 然后通过get方法得到某个键对应的值&#xff1a; private String getOpenid(String code) {Map<String, String> map new HashMap<>();map.put(&…

数学建模基础:非线性模型

目录 前言 一、非线性方程组 二、非线性规划 三、微分方程模型 四、非线性模型的应用 五、实例示范&#xff1a;传染病传播模型 实例总结 五、总结 前言 非线性模型用于描述变量之间的非线性关系&#xff0c;相比线性模型&#xff0c;其数学形式更为复杂&#xff0c;但…

AI大模型会如何颠覆手机?

导语&#xff1a;大模型在手机端的落地&#xff0c;不仅仅是AI进入人类生活的开始&#xff0c;也是行业发生颠覆&#xff0c;新老巨头进行更替的时刻。 将大模型变小&#xff0c;再塞进手机&#xff0c;会给人们的生活带来怎样的影响&#xff1f; 最近&#xff0c;荣耀成为了…

【杂记-浅谈实现流量控制】

一、流量控制概述 流量控制是计算机网络中的一个关键技术&#xff0c;它涉及到的不仅仅是单一的技术层面&#xff0c;而是涵盖了从物理层到应用层的多个层次。在网络通信中&#xff0c;流量控制技术通过各种手段对数据流量进行管理和调控&#xff0c;以防止网络拥堵、提高网络…

Java基础学习-流程控制语句-顺序结构-分支结构-循环结构

目录 顺序结构&#xff1a; 分支结构&#xff1a; if语句&#xff1a; 第一种格式&#xff1a; if第二种格式&#xff1a; 案例练习 if第三种格式&#xff1a; switch语句&#xff1a; 格式&#xff1a; switch其他知识点&#xff1a; 循环结构&#xff1a; for循环…

centos安装多实例mysql

参考&#xff1a;CentOS7 单机配置mysql多实例运行-腾讯云开发者社区-腾讯云

yolov8图像分割训练

1.背景 最近在做一个AI项目&#xff0c;需要用到yolov8的实例分割功能来确定一个不规则区域&#xff0c;从而找出不规则区域的坐标完成大致定位&#xff0c;以前有用过yolov8的目标检测功能&#xff0c;实际上yolov8的分割功能和检测功能大同小异。本博客将仔细分享使用yolov8图…

给电脑bios主板设置密码

增强安全性&#xff1a;防止未经授权的人员更改 BIOS 中的重要设置&#xff0c;如启动顺序、硬件配置等。这有助于保护计算机系统的稳定性和数据的安全性。防止恶意篡改&#xff1a;阻止可能的攻击者或恶意软件通过修改 BIOS 设置来破坏系统或获取敏感信息。数据保护&#xff1…