模板引擎?
模板引擎是一種用于生成動態內容的工具，它通過將預定義的模板與特定數據結合，來生成最終的輸出。?
在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>
?效果如下：
使用Ejs有一個好處，當你只想做一個很少頁面的項目時候，你可以使用模板引擎來減少前端的工作量，且?能很好的保護你的代碼。
?
個人公眾號，求關注，不定時更新前端技術文章
公眾號文章求關注
)
![[electron]窗口 BrowserWindow](http://pic.xiahunao.cn/[electron]窗口 BrowserWindow)
