免費AI編程助手
NestJS MVC
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 模板引擎來呈現 HTML 輸出。
模板渲染
現在，讓我們在其中創(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 文件并更新其內容：
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 需要注意的一個區(qū)別是傳遞給 @Render() 裝飾器的模板名稱必須包含文件擴展名。
import { Get, Controller, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index.hbs')
root() {
return { message: 'Hello world!' };
}
}
更多建議：