NestJS入门教程—06.Get和Post请求详解

·  阅读 1088
NestJS入门教程—06.Get和Post请求详解

| 06.Controller控制器Get和Post请求详解<--点击观看视频

这节我们主要学习在Controller里设置POST请求和如何获得请求中的参数,为了更好的演示,我们还会演示在VSCode上用REST Client来发送请求,调试接口的操作。

创建POST请求

用VSCode打开/src/girl/girl.service.ts ,先编写一个增加女孩的方法addGirl( )。 代码编写如下:

 addGirl(){
    return {
      code:200,
      data:{id:1,name:'大梨',age:27},
      msg:'女孩添加成功'
    };
  }
复制代码

这个是业务逻辑的编写,写完这个后,我们再回到girl.controller.ts , 先引入Post

import { Controller, Get,Post } from '@nestjs/common';
复制代码

引入完成后,再用装饰器编写一个@Post请求方法。

import { Controller, Get,Post } from '@nestjs/common';
import { GirlService } from './girl.service';

@Controller('girl')
export class GirlController {
  constructor(private girlService:GirlService){}
  //this.girlService = new GirlService();
  @Get()
  getGirls():any{
    return this.girlService.getGirls();
  }
  //------新增Post请求方法
  @Post('/add')
  addGirl():any{
    return this.girlService.addGirl();
  }
}

复制代码

这样就创建好了,我们可以使用REST Client 进行Post请求。

REST Client 的使用

REST Client 是VSCode的一个用于发送请求的插件,在以前的视频中我也讲过,小伙伴可以去考古一下,我这里给出了以前的视频地址。

VSCode接口i调试插件REST Client

当插件安装完成后,就可以在项目根目录下创建一个`/RESTClient/demo.http`的文件,然后编写下面的代码。

POST http://localhost:3000/girl/add HTTP/1.1
复制代码

点击Send Request按钮,发送请求,如果一切正常,我们就可以看到请求返回的结果了。

接受Get请求参数

在开发中,我们的请求一般都是带有参数的,比如在女孩中根据ID出现相对的女孩。这时候我们传递的就是ID,得到的是对应女孩的信息。 先到/src/girl/girl.service.ts文件里编写对应的业务逻辑。

getGirlById(id:number){
    let  reJson:any ={}
    switch(id){
      case 1:
         reJson={id:1,name:'翠花',age:18}
         break;
      case 2:
         reJson={id:1,name:'小红',age:20}
         break;
      case 3:
         reJson={id:1,name:'大丫',age:23}
         break;
    }
    return reJson;
  }
复制代码

写完业务逻辑后,我们到控制器页面`/scr/girl/girl.controller.ts`,用 @Get装饰器编写一个路由,在代码最开始的地方我们引入了`Request`。

import { Controller, Get,Post ,Request } from '@nestjs/common';
复制代码

Request的作用就是获得参数,当有了Request后,我们继续编写对应的`getGirlById( )`方法。

@Get('/getGirlById')
  getGirlById(@Request() req):any{
    //因为通过Get方式传递过来的是字符串,所有我们需要用parseInt转化为数字
    let id:number = parseInt(req.query.id) 
    return this.girlService.getGirlById(id)
  }
复制代码

这些编写完成后,我们再到`demo.http`文件里,作一个发送请求。

Get http://localhost:3000/girl/getGirlById
?id=1
复制代码

然后点击Send Request按钮后,就可以根绝id不同,等到不同的结果了。

@Query装饰器的使用

上面的req.query.id 写起来不简介,我们可以使用@Query修饰器来进行简写。现在文件最开始引入它。

import { Controller, Get,Post ,Request,Query } from '@nestjs/common';
复制代码

然后把@Request换成@Query

@Get('/getGirlById')
  getGirlById(@Query() query):any{
    let id:number = parseInt(query.id) 
    return this.girlService.getGirlById(id)
  }
复制代码

这样写也是完全没有问题的,算是一种简写方法。

接受Post请求参数

Post请求和Get基本一样,也可以使用@Request装饰器接收就可以了。这里把本节课开始时写的addGirl( )方法改为接受参数的方式。

@Post('/add')
addGirl(@Request() req):any{
  console.log(req.body)
  return this.girlService.addGirl();
}
复制代码

这时候到demo.http里,编写请求的代码,注意这里我们传递了参数。

POST http://localhost:3000/girl/add 
Content-Type: application/json

{
    "id":4,
    "name":"大梨",
    "age":30
}


复制代码

点击Send Request按钮,可以看到终端内就会显示出我们请求的数据。

@body修饰器的使用

@Query修饰器一样,NestJS也为我们准备了@Body修饰器。 使用前同样需要先引入Body。

import { Controller, Get,Post ,Request,Query,Body } from '@nestjs/common';
复制代码

这时候直接修改代码为下面的形式,依然可以运行。

  @Post('/add')
  addGirl(@Body() body):any{
    console.log(body)
    return this.girlService.addGirl();
  }
复制代码

好了,这节的视频就讲到这里,下节我们讲一下动态路由的创建和参数的接受。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改