Nest.js学习笔记(七)

简介: 本节详细介绍Nest.js的控制器,以及使用Apifox做了简单的测试

1.Controller Request (获取前端传过来的参数)

装饰器名称 对应参数
@Request() req
@Response() res
@Next() next
@Session() req.session
@Param(key?: string) req.params/req.params[key]
@Body(key?: string) req.body/req.body[key]
@Query(key?: string) req.query/req.query[key]
@Headers(name?: string) req.headers/req.headers[name]
@HttpCode

写在前面:在下面的例子中,如果不加装饰器直接打印req,打印的内容将是undefined。即req是通过装饰器才获取到的值

Request装饰器

获取request信息(包含请求头和请求体)

对于get请求:

import {
  Controller,
  Get,
  Request,
} from '@nestjs/common';

@Get()
findAll(@Request() req) {
  console.log(req.query)    // 打印get的请求参数信息(query传参)
  return {
    code: 200,
    data:req.query.name
  };
}

对于post请求:

import {
  Controller,
  Get,
  Request,
} from '@nestjs/common';

@Post()
  create(@Request() req) {
    console.log(req.body)    // 打印post的请求参数信息(请求体)
    return {
      code:200,
    }
  }

Query装饰器

可以直接获取到GET请求的query参数,无需再req.query
import {
  Controller,
  Get,
  Query,
} from '@nestjs/common';

@Get()
findAll(@Query() query) {
  console.log(query)    // 打印get的请求参数信息
  return {
    code: 200,
    data:query.name
  };
}

Body装饰器

可以直接获取到POST请求的body参数,无需req.body
import {
  Controller,
  Get,
  Post,
  Body,
}

@Post()
  create(@Body() body) {
    console.log(body)
    return {
      code:200,
    }
  }

此外,Query和Body还可以通过传入key来读取对应的值,其他的值将被忽略

@Get()
findAll(@Query('message') query) {
  console.log(query)    // 打印get的请求参数信息
  return {
    code: 200,
    data:query.name
  };
}

@Post()
  create(@Body('message') body) {
    console.log(body)
    return {
      code:200,
    }
  }
/* 
    对于以上两段代码,如果传递的参数是{name:'xiaoman',message:'小满zs'}则只会输出'小满zs',name的值被过滤了
*/

动态传参Params

和Vue中类似,next.js支持params传参方式,以下为一个例子,接收的参数key为'id'

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get(':id')
  findAll(@Request() req) {
    console.log(req.params.id);
    return {
      code: 200,
      data: req.params.id,
    };
  }
}
// 若请求url为http://localhost:3000/x,则id为x

同样的,nest.js也提供了@Param装饰器(注意没有s)来直接获取params参数,这个装饰器也可以通过传入一个key来过滤其他不需要的请求信息

  1. 直接调用
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get(':id')
  findAll(@Param() params) {
    console.log(params);    // {"id": "6"}
    return {
      code: 200,
      data: params,
    };
  }
}
  1. 过滤参数
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get(':id')
  findAll(@Param('id') id) {
    console.log(id);    // 6
    return {
      code: 200,
      data: id,
    };
  }
}

Headers装饰器

获取请求头信息
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get(':id')
  findAll(@Param() req, @Headers() headers) {
    console.log(headers);
    return {
      code: 200,
      data: headers,
    };
  }
}
// headers的内容:
/* 
    {
        "user-agent": "Apifox/1.0.0 (https://www.apifox.cn)",
        "accept": "*/*",
        "host": "localhost:3000",
        "accept-encoding": "gzip, deflate, br",
        "connection": "keep-alive",
        "cookie": "123=4566"
    }
*/

如图,headers变量即为保存请求头信息的变量

@HttpCode装饰器

修改响应状态码
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get(':id')
  // 其他都不重要,就看下面这行,请求状态码被改成500
  @HttpCode(500)
  findAll(@Param() req, @Headers() headers) {
    console.log(headers);
    return {
      code: 200,
      data: headers,
    };
  }
}

image.png

相关文章
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
1月前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
57 0
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
41 0
|
6月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
65 0
webgl学习笔记3_javascript的HTML DOM
|
6月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
51 0
|
6月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
6月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
49 0
|
存储 JavaScript 前端开发
【js】函数概述学习笔记(8)
【js】函数概述学习笔记(8)
43 0
|
存储 JavaScript
【js】数组学习笔记(7-2)
【js】数组学习笔记(7-2)
66 0
下一篇
无影云桌面