进阶全栈的第一步:能实现这 5 栽接口

时间:2022-01-13 13:28来源:http://www.shopwholesalejerseys.com 作者:13岁这水水逼太嫩了-这水水逼太嫩了-19岁又紧水又多 点击:
兼职招募 | 51CTO社区编辑添盟指南

上一篇文章吾们总结了网页开发的 5 栽 http/https 传输数据的手段:

url param query form urlencoded form data json

这 5 栽手段遮盖了开发中绝大无数场景,掌握益这些就能轻盈答对各栽 http/https 数据通信的需求。

倘若你想成为别名全栈工程师,那么不及已足于会写这几栽手段的前端代码,后端代码也得会写。

因而,这篇文章吾们来实现下前后端代码,把整个链路打通,真实掌握它们。

前端操纵 axios 发送乞求,后端操纵 Nest.js 行为服务端框架。

准备做事

最先吾们要把 Nest.js 服务端跑首来,并且声援 api 接口、静态页面。

Nest.js 创建一个 crud 服务是专门快的,只必要这么几步:

安设 @nest/cli,操纵 nest new xxx 创建一个 Nest.js 的项现在, 在根现在录实走 nest g resource person 迅速生成 person 模块的 crud 代码 npm run start 启动 Nest.js 服务

如许一个有 person 的 crud 接口的服务就跑首来了,是不是专门快。

服务跑首来以后是如许的

打印出了有哪些接口能够用,能够在 postman 或者涉猎器来测试下:

api 接口跑通了,再声援下静态资源的访问:

main.ts 是负责启动 Nest.js 的 ioc 容器的,在脚手架生成的代码的基础上,调用下 useStaticAssets 就能够声援静态资源的乞求。

async function bootstrap() {   const app = await NestFactory.create<NestExpressApplication>(AppModule);   app.useStaticAssets(join(__dirname, '..', 'public'), { prefix: '/static'});   await app.listen(3000); } bootstrap(); 

吾们指定 prefix 为 static,然后再静态文件现在录 public 下增补一个 html:

<html> <body>hello</body> </html

重启服务,然后涉猎器访问下试试:

api 接口和静态资源的访问都声援了,接下来就别离实现下 5 栽前后端 http 数据传输的手段吧。

url param

url param 是 url 中的参数,Nest.js 里经由过程 :参数名 的手段来声明,然后经由过程 @Param(参数名) 的装饰器掏出来注入到 controller:

@Controller('api/person') export class PersonController {   @Get(':id')   urlParm(@Param('id') id: string) {     return `received: id=${id}`;   } } 

前端代码就是一个 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() {             const res = await axios.get('/api/person/1');             console.log(res);                     }         urlParam();    </script> </body

启动服务,在涉猎器访问下:

限制台打印了服务端返回的新闻,表明服务端拿到了经由过程 url param 传递的数据。

经由过程 url 传递数据的手段除了 url param 还有 query:

query

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

在 Nest.js 里,经由过程 @Query 装饰器来取:

@Controller('api/person') export class PersonController {   @Get('find')   query(@Query('name') name: string, @Query('age') age: number) {     return `received: name=${name},age=${age}`;   } } 

前端代码同样是经由过程 axios 发送一个 get 乞求:

<!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 query() {             const res = await axios.get('/api/person/find', {                 params: {                     name: '光',                     age: 20                 }             });             console.log(res);                     }         query();    </script> </body> </html

参数经由过程 params 指定,axios 会做 url encode,不必要本身做。

然后测试下:

服务端成功批准了吾们经由过程 query 传递的数据。

上面两栽(url param、query)是经由过程 url 传递数据的手段,下面 3 栽是经由过程 body 传递数据。

html urlencoded

html urlencoded 是经由过程 body 传输数据,其实是把 query 字符串放在了 body 里,因而必要做 url encode:

用 Nest.js 授与的话,操纵 @Body 装饰器,Nest.js 会解析乞求体,然后注入到 dto 中。

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

export class CreatePersonDto {     name: string;     age: number; } 
import { CreatePersonDto } from './dto/create-person.dto';  @Controller('api/person') export class PersonController {   @Post()   body(@Body() createPersonDto: CreatePersonDto) {     return `received: ${JSON.stringify(createPersonDto)}`   } } 

前端代码操纵 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('/api/person', Qs.stringify({                 name: '光',                 age: 20             }), {                 headers: { 'content-type': 'application/x-www-form-urlencoded' }             });             console.log(res);           }          formUrlEncoded();     </script> </body> </html

测试下:

服务端成功的授与到了数据。

其实比首 form urlencoded,操纵 json 来传输更常用一些:

json

json 必要指定 content-type 为 application/json,内容会以 JSON 的手段传输:

后端代码同样操纵 @Body 来授与,不必要做啥转折。form urlencoded 和 json 都是从 body 取值,Nest.js 内部会按照 content type 做区分,操纵分歧的解析手段。

@Controller('api/person') export class PersonController {   @Post()   body(@Body() createPersonDto: CreatePersonDto) {     return `received: ${JSON.stringify(createPersonDto)}`   } } 

前端代码操纵 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('/api/person', {                 name: '光',                 age: 20             });             console.log(res);              }         json();     </script> </body> </html

测试下:

服务端成功授与到了经由过程 json 传递的数据。

json 和 form urlencoded 都不正当传递文件,想传输文件要用 form data:

form data

form data 是用 -------- 行为 boundary 分隔传输的内容的:

Nest.js 解析 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())   body2(@Body() createPersonDto: CreatePersonDto, @UploadedFiles() files: Array<Express.Multer.File>) {     console.log(files);     return `received: ${JSON.stringify(createPersonDto)}`   } } 

前端代码操纵 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', 20);             data.set('file1', fileInput.files[0]);             data.set('file2', fileInput.files[1]);              const res = await axios.post('/api/person/file', data, {                 headers: { 'content-type': 'multipart/form-data' }             });             console.log(res);              }                   fileInput.onchange = formData;     </script> </body> </html

file input 指定 multiple 能够选择众个文件。

测试下:

服务端授与到了 name 和 age:

往服务器限制台望下:

能够望到,服务器成功的授与到了吾们上传的文件。

通盘代码上传到了 github:https://github.com/QuarkGluonPlasma/nestjs-exercize

总结

吾们用 axios 发送乞求,操纵 Nest.js 首后端服务,实现了 5 栽 http/https 的数据传输手段:

其中前两栽是 url 中的:

url param:url 中的参数,Nest.js 中操纵 @Param 来取

query:url 中 ? 后的字符串,Nest.js 中操纵 @Query 来取

后三栽是 body 中的:

form urlencoded:相通 query 字符串,只不过是放在 body 中。Nest.js 中操纵 @Body 来取,axios 中必要指定 content type 为 application/x-www-form-urlencoded,并且对数据用 qs 做 url encode

json:json 格式的数据。Nest.js 中操纵 @Body 来取,axios 中不必要单独指定 content type,axios 内部会处理。

form data:经由过程 ----- 行为 boundary 分隔的数据。主要用于传输文件,Nest.js 中要操纵 FilesInterceptor 来处理,用 @UseInterceptors 来启用。其余片面用 @Body 来取。axios 中必要指定 content type 为 multipart/form-data,并且用 FormData 对象来封装传输的内容。

这 5 栽 http/https 的传输数据的手段遮盖了绝大无数开发场景,倘若你想进阶全栈,能够挑供这 5 栽接口是最先要做到的。

【编辑选举】

鸿蒙官方战略配相符共建——HarmonyOS技术社区 Prometheus 做Post 接口乞求监控 用「意念」发的推特!Synchron脑机接口协助渐冻症患者意念刷手机 详解Java8接口中引入Default关键字的内心因为 选举一个 Java 接口迅速开发框架 Go说话操纵Gin框架开发邮件告警接口功能
网站分类
相关内容
热点内容
相关站点
友情链接
返回顶部