偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

進(jìn)階全棧的第一步：能實(shí)現(xiàn)這五種接口

作者：神說要有光zxg
開發(fā)
如果你想成為一名全棧工程師，那么不能滿足于會(huì)寫這幾種方式的前端代碼，后端代碼也得會(huì)寫。所以，這篇文章我們來實(shí)現(xiàn)下前后端代碼，把整個(gè)鏈路打通，真正掌握它們。

上一篇文章我們總結(jié)了網(wǎng)頁開發(fā)的 5 種 http/https 傳輸數(shù)據(jù)的方式：

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

這 5 種方式覆蓋了開發(fā)中絕大多數(shù)場景，掌握好這些就能輕松應(yīng)對(duì)各種 http/https 數(shù)據(jù)通信的需求。

如果你想成為一名全棧工程師，那么不能滿足于會(huì)寫這幾種方式的前端代碼，后端代碼也得會(huì)寫。

所以，這篇文章我們來實(shí)現(xiàn)下前后端代碼，把整個(gè)鏈路打通，真正掌握它們。

前端使用 axios 發(fā)送請(qǐng)求，后端使用 Nest.js 作為服務(wù)端框架。

準(zhǔn)備工作

首先我們要把 Nest.js 服務(wù)端跑起來，并且支持 api 接口、靜態(tài)頁面。

Nest.js 創(chuàng)建一個(gè) crud 服務(wù)是非?？斓?，只需要這么幾步：

  • 安裝 @nest/cli，使用 nest new xxx 創(chuàng)建一個(gè) Nest.js 的項(xiàng)目，
  • 在根目錄執(zhí)行 nest g resource person 快速生成 person 模塊的 crud 代碼
  • npm run start 啟動(dòng) Nest.js 服務(wù)

這樣一個(gè)有 person 的 crud 接口的服務(wù)就跑起來了，是不是非常快。

服務(wù)跑起來以后是這樣的

打印出了有哪些接口可以用，可以在 postman 或者瀏覽器來測試下：

api 接口跑通了，再支持下靜態(tài)資源的訪問：

main.ts 是負(fù)責(zé)啟動(dòng) Nest.js 的 ioc 容器的，在腳手架生成的代碼的基礎(chǔ)上，調(diào)用下 useStaticAssets 就可以支持靜態(tài)資源的請(qǐng)求。

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

我們指定 prefix 為 static，然后再靜態(tài)文件目錄 public 下添加一個(gè) html：

  1. <html> 
  2. <body>hello</body> 
  3. </html> 

重啟服務(wù)，然后瀏覽器訪問下試試：

api 接口和靜態(tài)資源的訪問都支持了，接下來就分別實(shí)現(xiàn)下 5 種前后端 http 數(shù)據(jù)傳輸?shù)姆绞桨伞?/p>

url param

url param 是 url 中的參數(shù)，Nest.js 里通過 :參數(shù)名 的方式來聲明，然后通過 @Param(參數(shù)名) 的裝飾器取出來注入到 controller：

  1. @Controller('api/person') 
  2. export class PersonController { 
  3.   @Get(':id') 
  4.   urlParm(@Param('id') id: string) { 
  5.     return `received: id=${id}`; 
  6.   } 
  7. } 

前端代碼就是一個(gè) get 方法，參數(shù)放在 url 里：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script> 
  5. </head> 
  6. <body> 
  7.     <script> 
  8.         async function urlParam() { 
  9.             const res = await axios.get('/api/person/1'); 
  10.             console.log(res);             
  11.         } 
  12.         urlParam(); 
  13.    </script> 
  14. </body> 

啟動(dòng)服務(wù)，在瀏覽器訪問下：

控制臺(tái)打印了服務(wù)端返回的消息，證明服務(wù)端拿到了通過 url param 傳遞的數(shù)據(jù)。

通過 url 傳遞數(shù)據(jù)的方式除了 url param 還有 query：

query

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

在 Nest.js 里，通過 @Query 裝飾器來取：

  1. @Controller('api/person') 
  2. export class PersonController { 
  3.   @Get('find') 
  4.   query(@Query('name') name: string, @Query('age') age: number) { 
  5.     return `received: name=${name},age=${age}`; 
  6.   } 
  7. } 

前端代碼同樣是通過 axios 發(fā)送一個(gè) get 請(qǐng)求：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script> 
  5. </head> 
  6. <body> 
  7.     <script> 
  8.         async function query() { 
  9.             const res = await axios.get('/api/person/find', { 
  10.                 params: { 
  11.                     name: '光', 
  12.                     age: 20 
  13.                 } 
  14.             }); 
  15.             console.log(res);             
  16.         } 
  17.         query(); 
  18.    </script> 
  19. </body> 
  20. </html> 

參數(shù)通過 params 指定，axios 會(huì)做 url encode，不需要自己做。

然后測試下：

服務(wù)端成功接受了我們通過 query 傳遞的數(shù)據(jù)。

上面兩種(url param、query)是通過 url 傳遞數(shù)據(jù)的方式，下面 3 種是通過 body 傳遞數(shù)據(jù)。

html urlencoded

html urlencoded 是通過 body 傳輸數(shù)據(jù)，其實(shí)是把 query 字符串放在了 body 里，所以需要做 url encode：

用 Nest.js 接收的話，使用 @Body 裝飾器，Nest.js 會(huì)解析請(qǐng)求體，然后注入到 dto 中。

dto 是 data transfer object，就是用于封裝傳輸?shù)臄?shù)據(jù)的對(duì)象：

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

前端代碼使用 post 方式請(qǐng)求，指定 content type 為 application/x-www-form-urlencoded，用 qs 做下 url encode：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script> 
  5.     <script src="https://unpkg.com/qs@6.10.2/dist/qs.js"></script> 
  6. </head> 
  7. <body> 
  8.     <script> 
  9.         async function formUrlEncoded() { 
  10.             const res = await axios.post('/api/person', Qs.stringify({ 
  11.                 name: '光', 
  12.                 age: 20 
  13.             }), { 
  14.                 headers: { 'content-type': 'application/x-www-form-urlencoded' } 
  15.             }); 
  16.             console.log(res);   
  17.         } 
  18.  
  19.         formUrlEncoded(); 
  20.     </script> 
  21. </body> 
  22. </html> 

測試下：

服務(wù)端成功的接收到了數(shù)據(jù)。

其實(shí)比起 form urlencoded，使用 json 來傳輸更常用一些：

json

json 需要指定 content-type 為 application/json，內(nèi)容會(huì)以 JSON 的方式傳輸：

后端代碼同樣使用 @Body 來接收，不需要做啥變動(dòng)。form urlencoded 和 json 都是從 body 取值，Nest.js 內(nèi)部會(huì)根據(jù) content type 做區(qū)分，使用不同的解析方式。

  1. @Controller('api/person') 
  2. export class PersonController { 
  3.   @Post() 
  4.   body(@Body() createPersonDto: CreatePersonDto) { 
  5.     return `received: ${JSON.stringify(createPersonDto)}` 
  6.   } 
  7. } 

前端代碼使用 axios 發(fā)送 post 請(qǐng)求，默認(rèn)傳輸 json 就會(huì)指定 content type 為 application/json，不需要手動(dòng)指定：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script> 
  5. </head> 
  6. <body> 
  7.     <script> 
  8.         async function json() { 
  9.             const res = await axios.post('/api/person', { 
  10.                 name: '光', 
  11.                 age: 20 
  12.             }); 
  13.             console.log(res);      
  14.         } 
  15.         json(); 
  16.     </script> 
  17. </body> 
  18. </html> 

測試下：

服務(wù)端成功接收到了通過 json 傳遞的數(shù)據(jù)。

json 和 form urlencoded 都不適合傳遞文件，想傳輸文件要用 form data：

form data

form data 是用 -------- 作為 boundary 分隔傳輸?shù)膬?nèi)容的：

Nest.js 解析 form data 使用 FilesInterceptor 的攔截器，用 @UseInterceptors 裝飾器啟用，然后通過 @UploadedFiles 來取。非文件的內(nèi)容，同樣是通過 @Body 來取。

  1. import { AnyFilesInterceptor } from '@nestjs/platform-express'; 
  2. import { CreatePersonDto } from './dto/create-person.dto'; 
  3.  
  4. @Controller('api/person') 
  5. export class PersonController { 
  6.   @Post('file') 
  7.   @UseInterceptors(AnyFilesInterceptor()) 
  8.   body2(@Body() createPersonDto: CreatePersonDto, @UploadedFiles() files: Array<Express.Multer.File>) { 
  9.     console.log(files); 
  10.     return `received: ${JSON.stringify(createPersonDto)}` 
  11.   } 
  12. } 

前端代碼使用 axios 發(fā)送 post 請(qǐng)求，指定 content type 為 multipart/form-data：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script> 
  5. </head> 
  6. <body> 
  7.     <input id="fileInput" type="file" multiple/> 
  8.     <script> 
  9.         const fileInput = document.querySelector('#fileInput'); 
  10.  
  11.         async function formData() { 
  12.             const data = new FormData(); 
  13.             data.set('name','光'); 
  14.             data.set('age', 20); 
  15.             data.set('file1', fileInput.files[0]); 
  16.             data.set('file2', fileInput.files[1]); 
  17.  
  18.             const res = await axios.post('/api/person/file', data, { 
  19.                 headers: { 'content-type': 'multipart/form-data' } 
  20.             }); 
  21.             console.log(res);      
  22.         } 
  23.  
  24.          
  25.         fileInput.onchange = formData; 
  26.     </script> 
  27. </body> 
  28. </html> 

file input 指定 multiple 可以選擇多個(gè)文件。

測試下：

服務(wù)端接收到了 name 和 age：

去服務(wù)器控制臺(tái)看下：

可以看到，服務(wù)器成功的接收到了我們上傳的文件。

全部代碼上傳到了 github：https://github.com/QuarkGluonPlasma/nestjs-exercize

總結(jié)

我們用 axios 發(fā)送請(qǐng)求，使用 Nest.js 起后端服務(wù)，實(shí)現(xiàn)了 5 種 http/https 的數(shù)據(jù)傳輸方式：

其中前兩種是 url 中的：

url param：url 中的參數(shù)，Nest.js 中使用 @Param 來取

query：url 中 ? 后的字符串，Nest.js 中使用 @Query 來取

后三種是 body 中的：

form urlencoded：類似 query 字符串，只不過是放在 body 中。Nest.js 中使用 @Body 來取，axios 中需要指定 content type 為 application/x-www-form-urlencoded，并且對(duì)數(shù)據(jù)用 qs 做 url encode

json：json 格式的數(shù)據(jù)。Nest.js 中使用 @Body 來取，axios 中不需要單獨(dú)指定 content type，axios 內(nèi)部會(huì)處理。

form data：通過 ----- 作為 boundary 分隔的數(shù)據(jù)。主要用于傳輸文件，Nest.js 中要使用 FilesInterceptor 來處理，用 @UseInterceptors 來啟用。其余部分用 @Body 來取。axios 中需要指定 content type 為 multipart/form-data，并且用 FormData 對(duì)象來封裝傳輸?shù)膬?nèi)容。

這 5 種 http/https 的傳輸數(shù)據(jù)的方式覆蓋了絕大多數(shù)開發(fā)場景，如果你想進(jìn)階全棧，能夠提供這 5 種接口是首先要做到的。

 

責(zé)任編輯：武曉燕 來源： 神光的編程秘籍
接口
相關(guān)推薦

2021-01-15 18:17:06

網(wǎng)絡(luò)協(xié)議分層

2011-07-25 14:17:46

BSMIT運(yùn)維北塔

2019-11-20 10:54:46

無密碼身份驗(yàn)證網(wǎng)絡(luò)安全

2015-06-02 11:42:00

Cloud FoundAzure

2012-07-11 16:43:14

飛視美

2013-01-15 09:17:11

2009-01-18 08:49:04

Java入門JDK

2012-08-30 11:14:11

云計(jì)算虛擬化

2020-07-22 22:10:34

互聯(lián)網(wǎng)物聯(lián)網(wǎng)IOT

2010-07-01 13:44:12

2020-11-17 14:55:36

亞馬遜云科技遷移

2021-08-24 05:07:25

React

2018-02-10 11:24:39

Python數(shù)據(jù)程序

2024-02-26 10:08:01

2020-11-11 07:09:05

隔離直播系統(tǒng)

2017-09-19 09:36:55

思科服務(wù)

2010-11-05 10:32:50

云應(yīng)用程序規(guī)劃

2013-04-03 09:22:14

虛擬化網(wǎng)絡(luò)虛擬化

2010-01-21 10:29:54

java認(rèn)證

2023-06-13 13:51:00

云遷移云平臺(tái)業(yè)務(wù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)