模板引擎

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

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

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

配置Ejs

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

npm install ejs

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

javascript 复制代码

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

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

javascript 复制代码

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

整个main.ts的代码如下

javascript 复制代码

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);

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

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

使用Ejs

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

javascript 复制代码

nest g controller list

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

javascript 复制代码

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

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

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

javascript 复制代码

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循环渲染。代码如下：

javascript 复制代码

<!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>

效果如下：

使用Ejs有一个好处，当你只想做一个很少页面的项目时候，你可以使用模板引擎来减少前端的工作量，且能很好的保护你的代码。

个人公众号，求关注，不定时更新前端技术文章

公众号文章求关注

NestJS使用模板引擎ejs

模板引擎​

配置Ejs​

使用Ejs

模板引擎

配置Ejs