How to use EJS template engine with NestJS?

在NestJS中使用EJS模板引擎并不是一个非常常见的场合，因为NestJS主要用于构建API，通常与前后端分离的场景更为契合。不过，如果你需要在NestJS中使用EJS作为服务器端模板引擎来渲染HTML，你可以按照以下步骤进行：

安装相关依赖:

你需要首先安装ejs包作为项目的依赖。
```
bash
npm install ejs
```

配置NestJS以使用EJS:

在你的NestJS应用中，需要配置ViewEngine以使用EJS。这通常在main.ts文件中完成。

typescript
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as express from 'express';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.use(express.static('public')); // 如果你有静态文件（如样式表、JavaScript文件、图像等）。

  app.setViewEngine('ejs'); // 设置EJS为模板引擎。

  await app.listen(3000);
}
bootstrap();

创建EJS模板文件:

在你的项目目录中，你需要创建一个文件夹来存储EJS模板文件（例如views），并在里面创建EJS模板文件（例如index.ejs）。
```
shell
/src
  /views
    index.ejs
```
在index.ejs文件中，你可以编写HTML代码，并使用EJS的模板语法：
```
html
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>
```

在控制器中渲染EJS模板:

接下来，在你的控制器中，你可以使用@Render装饰器或者res.render方法来渲染EJS模板并发送响应。

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

@Controller()
export class AppController {
  @Get()
  @Render('index') // 指向views文件夹下的index.ejs文件。
  root() {
    return { title: 'Hello World', message: 'Welcome to NestJS with EJS!' };
  }
}

以上步骤提供了一个基本的指南，说明了如何在NestJS应用程序中集成EJS模板引擎。重要的是要记住，这种整合通常用于服务端渲染（SSR）的场景，这在现代Web开发中越来越少见，因为现代前端框架（如React、Angular、Vue等）通常负责视图层的渲染。如果你的NestJS应用需要与这些前端框架协作，你可能会倾向于构建一个纯API服务，而不是使用EJS来渲染HTML。

2024年6月29日 12:07 回复

1个答案

你的答案