NestJS入门教程—06.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();
  }

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