跳至主要內容
作用域

作用域

Provider 作用域

默认使用单例作用域

类型 说明
DEFAULT 该提供者的单一实例在整个应用程序中共享。实例的生命周期直接与应用程序的生命周期相关联。一旦应用程序启动,所有单例提供者都已被实例化。默认情况下使用单例作用域。
REQUEST 为每个传入请求创建一个该提供者的新实例。实例会在请求完成处理后进行垃圾回收
TRANSIENT 瞬态提供者在不同的消费者之间不共享。每个注入瞬态提供者的消费者都会收到一个新的、专用的实例。

Song原创大约 2 分钟
装饰器

拷贝自 Nest通关秘籍

Nest 的功能都是大多通过装饰器来使用的,这节我们就把所有的装饰器过一遍。

我们创建个新的 nest 项目:

nest new all-decorator -p npm

Nest 提供了一套模块系统,通过 @Module声明模块:

通过 @Controller、@Injectable 分别声明其中的 controller 和 provider:

这个 provider 可以是任何的 class:

注入的方式可以是构造器注入:

或者属性注入:

属性注入要指定注入的 token,可能是 class 也可能是 string。

你可以通过 useFactory、useValue 等方式声明 provider:

这时候也需要通过 @Inject 指定注入的 token:

这些注入的依赖如果没有的话,创建对象时会报错。但如果它是可选的,你可以用 @Optional 声明一下,这样没有对应的 provider 也能正常创建这个对象。

如果模块被很多地方都引用,为了方便,可以用 @Global 把它声明为全局的,这样它 exports 的 provider 就可以直接注入了:

filter 是处理抛出的未捕获异常的,通过 @Catch 来指定处理的异常:

然后通过 @UseFilters 应用到 handler 上:

除了 filter 之外,interceptor、guard、pipe 也是这样用:

当然,pipe 更多还是单独在某个参数的位置应用:

这里的 @Query 是取 url 后的 ?bbb=true,而 @Param 是取路径中的参数,比如 /xxx/111 种的 111

此外,如果是 @Post 请求,可以通过 @Body 取到 body 部分:

我们一般用 dto 的 class 来接受请求体里的参数:

nest 会实例化一个 dto 对象:

用 postman 发个 post 请求:

可以看到 nest 接受到了 body 里的参数:

除了 @Get、@Post 外,还可以用 @Put、@Delete、@Patch、@Options、@Head 装饰器分别接受 put、delete、patch、options、head 请求:

handler 和 class 可以通过 @SetMetadata 指定 metadata:

然后在 guard 或者 interceptor 里取出来:

你可以通过 @Headers 装饰器取某个请求头 或者全部请求头:

通过 @Ip 拿到请求的 ip:

通过 @Session 拿到 session 对象:

但要使用 session 需要安装一个 express 中间件:

npm install express-session

在 main.ts 里引入并启用:

指定加密的密钥和 cookie 的存活时间。

然后刷新页面:

会返回 set-cookie 的响应头,设置了 cookie,包含 sid 也就是 sesssionid。

之后每次请求都会自动带上这个 cookie:

这样就可以在 session 对象里存储信息了。

@HostParam 用于取域名部分的参数:

我们再创建个 controller:

nest g controller aaa --no-spec --flat

这样指定 controller 的生效路径:

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

@Controller({ host: ':host.0.0.1', path: 'aaa' })
export class AaaController {
    @Get('bbb')
    hello() {
        return 'hello';
    }
}

controller 除了可以指定某些 path 生效外,还可以指定 host:

然后再访问下:

这时候你会发现只有 host 满足 xx.0.0.1 的时候才会路由到这个 controller。

host 里的参数就可以通过 @HostParam 取出来:

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

@Controller({ host: ':host.0.0.1', path: 'aaa' })
export class AaaController {
    @Get('bbb')
    hello(@HostParam('host') host) {
        return host;
    }
}

前面取的这些都是 request 里的属性,当然也可以直接注入 request 对象:

通过 @Req 或者 @Request 装饰器,这俩是同一个东西:

注入 request 对象后,可以手动取任何参数:

当然,也可以 @Res 或者 @Response 注入 response 对象,只不过 response 对象有点特殊:

当你注入 response 对象之后,服务器会一直没有响应:

因为这时候 Nest 就不会再把 handler 返回值作为响应内容了。

你可以自己返回响应:

Nest 这么设计是为了避免你自己返回的响应和 Nest 返回的响应的冲突。

如果你不会自己返回响应,可以通过 passthrough 参数告诉 Nest:

除了注入 @Res 不会返回响应外,注入 @Next 也不会:

当你有两个 handler 来处理同一个路由的时候,可以在第一个 handler 里注入 next,调用它来把请求转发到第二个 handler:

Nest 不会处理注入 @Next 的 handler 的返回值。

handler 默认返回的是 200 的状态码,你可以通过 @HttpCode 修改它:

当然,你也可以修改 response header,通过 @Header 装饰器:

此外,你还可以通过 @Redirect 装饰器来指定路由重定向的 url:

或者在返回值的地方设置 url:

@Get('xxx')
@Redirect()
async jump() {
    return {
      url: 'https://www.baidu.com',
      statusCode: 302
    }  
}

你还可以给返回的响应内容指定渲染引擎,不过这需要先这样设置:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

  await app.listen(3000);
}
bootstrap();

分别指定静态资源的路径和模版的路径,并指定模版引擎为 handlerbars。

当然,还需要安装模版引擎的包 hbs:

npm install --save hbs

然后准备图片和模版文件:

在 handler 里指定模版和数据:

就可以看到渲染出的 html 了:

案例代码在小册仓库

总结

这节我们梳理了下 Nest 全部的装饰器

  • @Module: 声明 Nest 模块
  • @Controller:声明模块里的 controller
  • @Injectable:声明模块里可以注入的 provider
  • @Inject:通过 token 手动指定注入的 provider,token 可以是 class 或者 string
  • @Optional:声明注入的 provider 是可选的,可以为空
  • @Global:声明全局模块
  • @Catch:声明 exception filter 处理的 exception 类型
  • @UseFilters:路由级别使用 exception filter
  • @UsePipes:路由级别使用 pipe
  • @UseInterceptors:路由级别使用 interceptor
  • @SetMetadata:在 class 或者 handler 上添加 metadata
  • @Get、@Post、@Put、@Delete、@Patch、@Options、@Head:声明 get、post、put、delete、patch、options、head 的请求方式
  • @Param:取出 url 中的参数,比如 /aaa/:id 中的 id
  • @Query: 取出 query 部分的参数,比如 /aaa?name=xx 中的 name
  • @Body:取出请求 body,通过 dto class 来接收
  • @Headers:取出某个或全部请求头
  • @Session:取出 session 对象,需要启用 express-session 中间件
  • @HostParm: 取出 host 里的参数
  • @Req、@Request:注入 request 对象
  • @Res、@Response:注入 response 对象,一旦注入了这个 Nest 就不会把返回值作为响应了,除非指定 passthrough 为true
  • @Next:注入调用下一个 handler 的 next 方法
  • @HttpCode: 修改响应的状态码
  • @Header:修改响应头
  • @Redirect:指定重定向的 url
  • @Render:指定渲染用的模版引擎

把这些装饰器用熟,就掌握了 nest 大部分功能了。


Song原创大约 16 分钟
微信小程序关键概念一览

历史使命

微信中的webview逐渐成为移动web的入口。

基于微信JS API(​微信官方是没有对外暴露过如此调用的,此类 API 最初是提供给腾讯内部一些业务使用,很多外部开发者发现了之后,依葫芦画瓢地使用了,逐渐成为微信中网页的事实标准。)的能力,2015年初,微信发布了一整套网页开发工具包,称之为 JS-SDK,让所有开发者都可以使用到微信的原生能力,去完成一些之前做不到或者难以做到的事情。

JS-SDK逐渐暴露出一些问题,需要一个全新的系统来完成

  • 快速的加载

  • 更强大的能力

  • 原生的体验

  • 易用且安全的微信数据开放

  • 高效和简单的开发


Song原创大约 3 分钟
浏览器进程与线程

进程

浏览器是多进程架构,相比于单进程架构

  • 有数据隔离的能力
  • 有多核优势
  • 各司其职,互不影响。单页面崩溃不会影响其他页面

包含的进程

  1. Browser进程

    主进程

  2. 插件进程

    插件管理

  3. GPU进程

  4. 渲染进程(浏览器内核)

每个tab一个进程

渲染进程


Song原创大约 1 分钟
Vue与React的区别

从核心差异出发

从核心差异出发,能更清晰的将两者的不同形成脉络。

核心差异:Vue进行数据的拦截/代理,颗粒度更细。React偏重函数式,页面更新就是不断的执行函数。

从这个核心差异衍生出来的不同:

  1. 保证页面渲染性能的手段不一样
    vue因为颗粒度更细,所以能采用依赖追踪,变多少,动多少,自动更新。React则将这个更新的心智通过
    shouldComponentUpdate这个生命周期hook交给开发者控制)。(在这一块,他们也有共同点,例如合并更新操作。)

  2. Hooks的实现和表现不一致
    React在每次render时都会按照顺序执行,但是vue主会被注册调用一次,因为他是基于数据代理观察的。这也就是为什么
    vue会包装.value这么一层,因为基于对象代理观察,那么一些基本类型,number和string是没办法做到的。


Song原创大约 3 分钟
学习路径

基础概念

理清技术栈的关系

apollo server 中的plugin

NestJS核心概念

GraphQL和Nest的关系

实现细节

理解module

http模块的封装

不在模型中的返回值类型


Song原创小于 1 分钟
基于GraphQL的BFF实现

背景

关键字:

  • 中台
  • 聚合
  • 按需

解决服务端单一稳定与端的差异灵活诉求之间的矛盾

技术选型

GraphQL: 图查询语言

查看语言支持GraphQL

  • Client: Vue + Vue Apollo
  • Server: NestJS + Apollo Server

Song原创大约 2 分钟BFF
models` 目录和 `dto` 目录的主要区别

models 目录和 dto 目录的主要区别在于:

  • models 目录: 通常用于定义与数据库表或业务实体一一对应的模型类。这些类通常包含与业务逻辑相关的所有属性和方法。
  • dto 目录: 通常用于定义用于数据传输的对象。这些类通常只包含数据本身,不包含任何业务逻辑。

以下是一些更具体的区别:


Song原创大约 2 分钟BFF
2