MVC

Nest 默认使用 Express 库作为底层。因此，Express 中使用的每一种 MVC（模型-视图-控制器）模式技术在 Nest 中同样适用。

首先，让我们使用 CLI 工具创建一个简单的 Nest 应用程序：

npm i -g @nestjs/cli
nest new project

为了创建一个 MVC 应用，我们还需要一个模板引擎来呈现我们的 HTML 视图：

npm install --save hbs

我们使用了 hbs（Handlebars）引擎，但你可以根据需要选择其他引擎。安装过程完成后，我们需要使用以下代码配置 express 实例：

main.ts

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

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();

我们告诉 Express， public 目录将用于存储静态资源，views 将包含模板，而 hbs 模板引擎应该用于呈现 HTML 输出。

模板渲染

现在，让我们创建一个 views 目录和一个 index.hbs 模板。在模板中，我们将打印从控制器传递的message：

<!-- index.hbs -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>App</title>
  </head>
  <body>
    {{ message }}
  </body>
</html>

接下来，打开 app.controller 文件，并用以下代码替换 root() 方法：

app.controller.ts

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

@Controller()
export class AppController {
  @Get()
  @Render('index')
  root() {
    return { message: 'Hello world!' };
  }
}

在这段代码中，我们在 @Render() 装饰器中指定要使用的模板，路由处理程序方法的返回值传递给模板进行渲染。请注意，返回值是一个具有属性 message 的对象，与我们在模板中创建的 message 占位符相匹配。

当应用程序正在运行时，打开浏览器并导航到 http://localhost:3000。您应该会看到 Hello world! 消息。

动态模板渲染

如果应用程序逻辑必须动态决定要渲染哪个模板，那么我们应该使用 @Res() 装饰器，并在路由处理程序中提供视图名称，而不是在 @Render() 装饰器中提供：

note

当 Nest 检测到 @Res() 装饰器时，它会注入与库特定的response对象。我们可以使用此对象动态渲染模板。在这里了解有关response对象 API 的更多信息。

app.controller.ts

import { Get, Controller, Res, Render } from '@nestjs/common';
import { Response } from 'express';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private appService: AppService) {}

  @Get()
  root(@Res() res: Response) {
    return res.render(
      this.appService.getViewName(),
      { message: 'Hello world!' },
    );
  }
}

示例

这里有一个可运行的示例。

Fastify

正如本章所述，我们能够与 Nest 一起使用任何兼容的 HTTP 提供程序。其中一种库就是 Fastify。为了使用 Fastify 创建一个 MVC 应用程序，我们必须安装以下软件包：

npm i --save @fastify/static @fastify/view handlebars

接下来的步骤几乎与 Express 使用的过程相同，只是具体到平台的一些细微差异。安装过程完成后，打开 main.ts 文件并更新其内容：

main.ts

import { NestFactory } from '@nestjs/core';
import { NestFastifyApplication, FastifyAdapter } from '@nestjs/platform-fastify';
import { AppModule } from './app.module';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );
  app.useStaticAssets({
    root: join(__dirname, '..', 'public'),
    prefix: '/public/',
  });
  app.setViewEngine({
    engine: {
      handlebars: require('handlebars'),
    },
    templates: join(__dirname, '..', 'views'),
  });
  await app.listen(3000);
}

bootstrap();

Fastify API 稍微不同，但这些方法调用的最终结果保持不变。请注意，与 Fastify 一起使用 @Render() 装饰器时，传递到装饰器的模板名称必须包含文件扩展名。

app.controller.ts

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

@Controller()
export class AppController {
  @Get()
  @Render('index.hbs')
  root() {
    return { message: 'Hello world!' };
  }
}

当应用程序正在运行时，打开浏览器并导航到 http://localhost:3000。您应该会看到 Hello world! 消息。

示例

这里有一个可运行的示例。

MVC

模板渲染​

动态模板渲染​

示例​

Fastify​

示例​

模板渲染

动态模板渲染

示例

Fastify

示例