你有一份NestJS入门指南,请查收（上）

什么是 NestJS

简单来说 NestJS 就是一个 NodeJS 服务端框架,它完全支持 TypeScript,并且有自己一套架构模式,开发者需要按照 NestJS 要求的架构来组织代码,而这套架构思想接近于传统后端的开发框架,所以作为一个完全的前端开发者理解起来相对来说会有些出入。下面是官网的介绍

Nest (NestJS) 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架。它利用 JavaScript 的渐进增强的能力，使用并完全支持 TypeScript （仍然允许开发者使用纯 JavaScript 进行开发），并结合了 OOP （面向对象编程）、FP （函数式编程）和 FRP （函数响应式编程）。在底层，Nest 构建在强大的 HTTP 服务器框架上，例如 Express （默认），并且还可以通过配置从而使用 Fastify ！

接下来就让我们走进 NestJS 的世界

第一个 NestJS 程序

作为一个 node 框架 NestJS 跑起来还是很容易的,npm 就完了~

npm i -g @nestjs/cli

然后

nest new project-name

这时候会让你选择一个安装工具(npm,yarn,pnpm),选择一个你喜欢的就行了,选择完毕之后等待你会项目就建好了,然后你就会看到这样的目录

有 Java 基础的同学一定会发出一声感叹: 哇!好 spring。先简单介绍一下这鸡哥文件:

• app.controller.ts

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}
  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

传说中的控制层,这里主要是写路由相关代码以及处理前端传来的一些参数(后面文章会介绍如何接收参数)

• app.service.ts

import { Injectable } from "@nestjs/common";
@Injectable()
export class AppService {
  getHello(): string {
    return "Hello World!";
  }
}

这里是业务层,在这里写一些与业务相关的逻辑。比如对数据库的 CRUD 就可以写到这里

• app.module.ts

import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

这里相当于一个应用程序的根模块,我们可以看到它将AppController和AppService都通过@Module进行了一个注入

介绍完这些文件的作用,我们执行npm run start:dev便可启动我们的项目,然后可以访问http://localhost:3000/便可以以看到我们第一个接口的输出

这里简单说一下它的执行顺序,首先访问根路由则会进入到app.controller.ts中的 get 方法,即@Get()修饰的方法getHello(),然后调用this.appService.getHello()进入app.service.ts从而返回Hello World!

讲到这里或与有些小伙伴会有这样一个疑问,那就是在app.controller.ts是如何直接调用this.appService的?appService 并没有实例化啊! 好问题(假装是你们问的)。这里就要提一嘴 IOC(控制反转了),其实这个实例化操作交给了 IOC 容器,在app.module.ts中,由 IOC 容器去获取 AppService，在调用的 AppController 的时候去帮我们自动注入，自动 new AppService。当然这些原理什么乱七八糟的不理解也没关系,毕竟我们才刚开始学 NestJS 吗(放不放弃还不知道呢)

装饰器

在上面的代码中我们看到了像什么@Controller(),@get(),@Module()之类的东西,这些是什么玩意?以前好像没见过啊。这其实是 TS 中的装饰器,这里举个类装饰器的例子,聪明的你一定一看就理解了

const Get: ClassDecorator = (target: any) => {
  target.prototype.type = "get";
};
@Get
class QueryData {
  type: string;
  constructor(public url: string) {}
}
const getData = new QueryData("xxxx");
console.log(getData.type); //get

从上面例子可以看出,类装饰器会将整个QueryData类当成参数传递给Get函数,在Get对这个类进行一些处理。除了类装饰器,还用属性装饰器,方法装饰器等,这些大家可以自己查阅相关资料试一下

路由装饰器

接下来我们看一下 controller 中的装饰器,看它是如何利用装饰器来搞定这些前端过来的请求的。这里我们新建一个 user 模块,新建一个模块我们并不需要手动一个个再创建什么user.service.ts,user.controller.ts等文件,我们只需要一个命令nest g resource user即可搞定,如果你不想生成测试文件,可以在nest-cli.json中配置

"generateOptions": {
    "spec": false
  }

执行完毕后就自动生成了一个 user 文件夹,同时在app.module.ts也进行了自动导入,也就是说创建完毕之后直接用就完了,当然 Cli 不止这一个生成全部文件的命令,下面列一下常用的命令

• 生成一个 module (nest g mo) 。
• 生成一个 controller (nest g co) 。
• 生成一个 service (nest g s) 。

来到user.controller.ts中我们会发现它已经帮你写好了这些请求的示例

import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
} from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
  @Post()
  create(@Body() createUserDto: CreateUserDto) {
    return this.userService.create(createUserDto);
  }
  @Get()
  findAll() {
    return this.userService.findAll();
  }
  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.userService.findOne(+id);
  }
  @Patch(':id')
  update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {
    return this.userService.update(+id, updateUserDto);
  }
  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.userService.remove(+id);
  }
}

我们可以看到有很多装饰器,像@Controller('user')定义的是请求路径user,而@Get,@Post等这些就代表请求方式的装饰器,比如你用 POSt 请求调用http://localhost:3000/user就会进入@Post()下面的 create()方法(这里你需要一个模拟请求的工具,比如 Apifox 或者 Postman 等),这里我使用 Apifox 进行模拟 post 请求,我们修改一下user.service.ts中的create函数

create(createUserDto: CreateUserDto) {
    return {
        code:200,
        result:'请求成功'
    };
  }

我们就会发现我们的请求成功啦!

如果我们想要获取前端 Post 请求传过来参数,可以直接用@Body装饰器即可,同样的 get 请求的话则使用@Query,这里以 post 请求为例,我们回到user.controller.ts中的 create 函数里

@Post()
  create(@Body() createUserDto: CreateUserDto) {
    console.log(createUserDto);
    return this.userService.create(createUserDto);
  }

前端 post 携带 body 请求

这时候控制台就会得到前端传来的参数,是不是非常的方便~

如果你想直接获得 body 中的 name,你可以直接

create(@Body('name') name: string) {
    console.log(name);//小月
  }

看到这有小伙伴就会问了CreateUserDto干啥的,很简单,它是用来描述数据形状的,也就是说它可以定义应该接受前端传来的什么参数,参数类型等,比如在 create-user.dto.ts 中可以这样定义

export class CreateUserDto {
  name: string;
}

很多情况下我们需要获取前端传过来的请求头,其实在 nestjs 中获取请求头也很简单,只需要一个 Headers 装饰器即可

@Post()
  create(@Body() createUserDto: CreateUserDto, @Headers() headers) {
    console.log(headers);
    return this.userService.create(createUserDto);
  }

关于装饰器还有很多,由于篇幅有限这里就不再过多介绍了,大家可以到官网自行查看呦~