模板引擎

刘春龙原创...大约 1 分钟

默认情况下，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

<!DOCTYPE html>
<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! 消息。

昵称

邮箱

网址

按正序
按倒序
按热度

模板引擎

预览: