NestJS使用模板引擎ejs

在这里插入图片描述

模板引擎

模板引擎是一种用于生成动态内容的工具，它通过将预定义的模板与特定数据结合，来生成最终的输出。

在NodeJS开发中，我们会使用模板引擎来渲染一些常用的页面，比如渲染代表404的Not Found 页面，502的Bad Request页面等，在部分后端渲染的项目中，也会使用模板引擎来渲染页面，而不会用VUE或者是React等前端框架。

本文章会用Ejs模板引擎作为例子，在使用了NestJS的项目中，渲染一个list页面。

配置Ejs

首先第一步，必须得是在我们的项目中引入Ejs模板引擎

npm install ejs

接着，在我们的目录中创建一个folder，个人会将其命名为views，作用是存放我们的不同的模板，在此文件夹中，我会在此创建一个名为List.ejs的文件，作用是显示出列表数据。
即然有了存放ejs的地方，那么我们就需要在我们的项目中设置该文件夹内的模板供我们使用，因为是全局，所以我们会在main.ts中去设置

  //ejsapp.setBaseViewsDir('views');app.setViewEngine('ejs');

需要注意的是，由于本地创建的NestJS项目中。app没有具体的类型，可能会导致报错说app这个instance上没有这两个方法，所以建议如下操作，替换掉创建app的方法。

  const app = await NestFactory.create<NestExpressApplication>(AppModule);

整个main.ts的代码如下

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);
//ejsapp.setBaseViewsDir('views');app.setViewEngine('ejs');
await app.listen(3000);
}
bootstrap();

使用Ejs

配置之后，我们手动使用如下指令创建一个新的controller，在新生成的控制类中写我们的代码。

nest g controller list

自己手动写一个最简单的get请求的处理代码

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

@Controller('article')
export class ListController {@Get('list/index')getList(): string {return '获取列表成功';}
}

接下来，我们需要将其设置为返回一个列表信息的页面，所以我们需要先配置@Render这个注释器，并且在代码的最后返回定制好的数据，即下面的代码

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

@Controller('list')
export class ListController {@Render('list')@Get('index')getList(): { list: { id: number; name: string }[] } {return {list: [{ id: 1, name: 'name1' },{ id: 2, name: 'name2' },],};}
}

上述的代码中，模拟了从数据库中查询出数据，并且将其返回到我们的Ejs模板中去渲染。

同样的，我们需要在我们的Ejs文件中去接受并渲染数据，对list参数做for循环渲染。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><% for (var i = 0; i < list.length; i++) { %><li><%= list[i].name %></li><% } %></ul>
</body>
</html>