专栏名称: 前端大全
分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯
目录
相关文章推荐
前端早读课  ·  【第3435期】构建更高效的 React ... ·  3 天前  
前端早读课  ·  【早阅】工程团队代码所有权挑战 ·  4 天前  
前端大全  ·  两款知名国产前端开源项目被“投毒” ·  6 天前  
前端早读课  ·  【早阅】GitHub Copilot最佳实践 ·  5 天前  
51好读  ›  专栏  ›  前端大全

图解Nestjs - 适合中国宝宝的入门指导

前端大全  · 公众号  · 前端  · 2024-12-24 11:50

正文

转自:

https://b-sirius.github.io/posts/learn-nestjs-with-diagram

笔者入门Nest的时候属实是迷糊了一阵,本文将从初学者的视角出发,试图为大家解释Nestjs到底是如何运作的。如有错误欢迎指出,谢谢~



假设我们来做这样一个服务:宝可梦大全

提供四个接口:

  1. 获取完整的宝可梦列表
  2. 根据宝可梦编号获取某一只宝可梦的信息
  3. 获取完整的技能列表
  4. 根据某个技能获取可以学会该技能的宝可梦列表

Module = 模块

Module,中文译作模块,我们将从它来入手,搞清楚Nestjs大概是如何工作的。


官网这张图表达的很清楚,Nest的大致理念就是一颗“模块树”,从根模块出发,连接到许多的子功能模块。

我们的宝可梦查询的结构可能是这样的:

(本文中我们使用Prisma来操作数据库)

现在让我们聚焦到其中一个功能模块:Pokemon Module

细说Pokemon Module

这个模块的领域是宝可梦,显然这是一个非常核心的模块。那么“模块”,又是怎么运作的呢?

从外部看,“模块”是一个黑盒,有自己的输入和输出:

而黑盒的内部,则主要是两部分:

  1. Services
  2. Controllers

Controllers是接收请求的入口,Services则是方法实现,这个应该不难理解

那么我们仔细看看所谓的输入输出是什么。

Module的输入是什么?

由于宝可梦的信息是存在数据库中的,因此宝可梦模块需要Prisma模块来与数据库交互。所以Prisma Module是Pokemon Module的输入。

Module的输出是什么?

既然我们说Prisma Module是Pokemon Module的输入,那,Prisma Module一定是输出了什么,对吧?

没错,Prisma Module的输出就是Prisma Service。Pokemon Module可以使用Prisma Service中的各种方法来交互数据库。

Provider?

在刚刚的叙述中,我们还没有提及在Nest中非常有存在感的Provider

我们说过,“Controllers是接收请求的入口,Services则是方法实现”,那么,Controllers是如何调用Services的呢?答案就是,当Services成为Provider时

这就像是同一样东西的两种名字。它既是Pokemon Service,也是Pokemon Module的Provider,取决于从什么视角去看他。因此,在代码中它往往表现为这样:

// nestjs project directory
|-pokemon
| |_pokemon.module.ts
| |_pokemon.controller.ts
| |_pokemon.service.ts
|-......
// pokemon.module.ts
@Module({
  controllers: [PokemonController],
  providers: [PokemonService],
  imports: [PrismaModule],
  exports: [PokemonService],
})
// pokemon.controller.ts
export class PokemonController {
  // 正是因为Module的providers中传入了PokemonService
  // Controller的constructor才能接收到pokemonService参数
  constructor(private readonly pokemonService: PokemonService) {}
  
  @Get('/find/all')
  async findAll() {
    const allPokemons = await this.pokemonService.findAll();
  // ......
  }
  
  @Get('/find/:id')
  async findOne(
    @Param('id', ParseIntPipe) id: number,
  ) {
    const pokemon = await this.pokemonService.findOne(id);
  // ......
  }
}
// pokemon.service.ts

// 此行Injectable装饰器也是必要的
// 关于Dependency Injection的更多信息,建议参考Angular官方文档:https://angular.dev/guide/di
@Injectable()
export class PokemonService {
  constructor(private prisma: PrismaService) {}
  
  parsePokemon(pokemon) {
    // ...
  }
  
  async findAll() {
    const pokemons = await this.prisma.pokemon.findMany({
      include: {
        likes: true,
      },
    });
    return pokemons.map((item) => this.parsePokemon(item));
  }

  async findOne(id: number) {
    const pokemon = await this.prisma.pokemon.findUnique({
      where: { id }
    });
    if (!pokemon) {
      throw new NotFoundException(`pokemon ${id} not found`);
    }
    return this.parsePokemon(pokemon);
  }
}

Provider vs Import

在上面的例子我们可以看到,由于Injectable的PokemonService被放入了module定义的providers中,PokemonController便可以使用它,那么它的功能岂不是和imports重叠了?

事实上,如果我们去掉imports,将Prisma Service也放到providers中,我们的代码依然可以运行:

// pokemon.module.ts
@Module({
  controllers: [PokemonController],
  providers: [PokemonService, PrismaService],
  imports: [],
  exports: [PokemonService],
})

直接先说结论:用Import

具体来说,只要是用外部服务(也就是除去PokemonModule将PokemonService作为Provider这种情况),使用import更为合适。

区别在于:import module会复用已经创建的实例,而每个provider都会创建新的实例。

前者占用更少的内存,且一个可复用的实例在多处被使用在需求中也更加常见。

// pokemon.module.ts

// 推荐
@Module({
  controllers: [PokemonController],
  providers: [PokemonService],
  imports: [PrismaModule],
  exports: [PokemonService],
})
// 不推荐
@Module({
  controllers: [PokemonController],
  providers: [PokemonService, PrismaService],
  imports: [],
  exports: [PokemonService],
})

总结

看一个Nestjs应用是怎么跑的,首先就是看明白Module之间是如何互相作用的。

那么在实现我们自己的Module时,只需要记住:

  • 定义自己的controllers
  • 定义自己的service
  • 把自己的service放在providers中,这样controllers才能用service
  • 如果需要用外部的service,将外部module放在imports里
  • 如果自己的service也需要被其他module使用,将自己的service放到exports里

比如这样:

// pokemon.module.ts
@Module({
  controllers: [PokemonController],
  providers: [PokemonService],
  imports: [PrismaModule],
  exports: [PokemonService],
})

// skill.module.ts
@Module({
  controllers: [SkillController],
  providers: [SkillService],
  imports: [PrismaModule, PokemonModule],
})

好了,恭喜你,你已经完全掌握Nestjs了!


推荐阅读  点击标题可跳转

1、浏览器节能机制导致Websocket断连的巨坑!

2、现在前端组长都是这样做 Code Review

3、在滴滴开发H5一年了,我遇到了这些问题