澳门金沙娱乐城
上一篇著作咱们转头了网页修复的 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 paramurl 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：
queryquery 是 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 urlencodedhtml 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 来传输更常用一些：
jsonjson 需要指定 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 dataform data 是用 -------- 四肢 boundary 分隔传输的实际的：
Nest.js 融会 form data 使用 FilesInterceptor 的阻挡器，用 @UseInterceptors 避让器启用，然后通过 @UploadedFiles 来取。非文献的实际，雷同是通过 @Body 来取。
皇冠客服飞机：@seo3687import { 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 种接口是最初要作念到的。
报道称，以往返于平泽和威海之间的客轮9日复航为开端，平泽至烟台、仁川至威海客轮将于10日复航，仁川至青岛将于11日复航。疫前每周往返2至3班的中韩国际客轮受新冠疫情影响，于2020年初中断后仅运送集装箱货物。
上一篇：没有了