模板引擎

刘春龙原创2026/3/5大约 2 分钟

默认情况下，Nest 在底层使用 Express 库。因此，在 Express 中使用 MVC（模型-视图-控制器）模式的每种技术也适用于 Nest。

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

npm install --save hbs

我们使用了 hbs (Handlebars) 引擎，但你可以使用任何符合你要求的引擎。安装过程完成后，我们需要使用以下代码配置 express 实例：

import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'
import { NestExpressApplication } from '@nestjs/platform-express'
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule)
  app.useStaticAssets('src/public')
  app.setBaseViewsDir('src/views')
  app.setViewEngine('hbs')
  await app.listen(3000)
}
bootstrap()

现在，我们在src目录下创建public和views文件夹，其中，public文件夹用于存放公共访问资源，views文件夹用于存放.hbs模板文件

我们在public文件夹下新建一个a.txt文件，之后访问：http://localhost:3000/a.txt

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

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

使用

import { Controller, Get, Render } from '@nestjs/common'
import { UserService } from './user.service'

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get()
  @Render('a')
  findOne() {
    return { message: 'Hello world!' }
  }
}

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

在应用运行时，打开浏览器并导航至 http://localhost:3000/user。你应该会看到 Hello world! 消息。

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。