NestJS MVC

2023-09-08 17:41 更新

Nest 默認使用底層的 Express 庫。 因此,在 Express 中使用 MVC(模型-視圖-控制器)模式的每種技術也適用于 Nest。

首先,讓我們使用 CLI 工具搭建一個簡單的 Nest 應用程序:

$ npm i -g @nestjs/cli
$ nest new project

為了創(chuàng)建一個 MVC 應用程序,我們還需要一個模板引擎來渲染我們的 HTML 視圖:

$ npm install --save hbs

我們使用了 hbs(Handlebars)引擎,但你可以使用任何適合自己要求的引擎。 安裝過程完成后,我們需要使用以下代碼配置 express 實例:

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 目錄將用于存儲靜態(tài)資源,視圖將包含模板,并且應該使用 hbs 模板引擎來呈現(xiàn) HTML 輸出。

模板渲染

現(xiàn)在,讓我們在其中創(chuàng)建一個 views 目錄和 index.hbs 模板。 在模板中,我們將打印從控制器傳遞的消息:

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

接下來,打開 app.controller 文件并將 root() 方法替換為以下代碼:

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

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

在這段代碼中,我們在 @Render() 裝飾器中指定了要使用的模板,并將路由處理程序方法的返回值傳遞給模板進行渲染。 請注意,返回值是一個帶有屬性消息的對象,與我們在模板中創(chuàng)建的消息占位符匹配。

在應用程序運行時,打開瀏覽器并導航到 http://localhost:3000 。 我們應該看到 Hello world! 信息。

動態(tài)模板渲染

如果應用程序邏輯必須動態(tài)決定要渲染哪個模板,那么我們應該使用 @Res() 裝飾器,并在我們的路由處理程序中提供視圖名稱,而不是在 @Render() 裝飾器中:

提示 當 Nest 檢測到 @Res() 裝飾器時,它會注入特定于庫的響應對象。 我們可以使用這個對象來動態(tài)渲染模板。
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

如本章所述,我們可以將任何兼容的 HTTP 提供程序與 Nest 一起使用。 Fastify 就是這樣一個庫。 為了使用 Fastify 創(chuàng)建 MVC 應用程序,我們必須安裝以下軟件包:

$ npm i --save fastify-static point-of-view handlebars

接下來的步驟涵蓋了與 Express 使用的幾乎相同的過程,只是特定于平臺的細微差別。 安裝過程完成后,打開 main.ts 文件并更新其內(nèi)容:

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 略有不同,但這些方法調(diào)用的最終結(jié)果保持不變。 Fastify 需要注意的一個區(qū)別是傳遞給 @Render() 裝飾器的模板名稱必須包含文件擴展名。

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

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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號