egg-view-ejs 是 Egg 中比較常用的模板引擎,雖然性能不是很高,但是它的語法規則卻是極其的簡單,使用起來很方便,下面簡單介紹一下它的用法。
1. 安裝模板引擎
npm i egg-view-ejs --save
2. 在 config 文件夾下找到 plugin.js 文件,導出ejs
'use strict';
// 導出 ejs
exports.ejs = {
enable: true,
package: 'egg-view-ejs',
};
3. 在config 文件夾下找到 config.default.js,配置ejs
'use strict';
module.exports = appInfo => {
const config = exports = {};
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + '_1532511512428_3477';
// add your config here
config.middleware = [];
// 新增以下配置
// 配置模板引擎
config.view = {
mapping: {
// 模板文件以html結尾
'.html': 'ejs',
},
};
return config;
};
完成以上3步操作,就可以正式的使用模板引擎了,下面演示一個使用模板引擎的示例。
首先在app文件夾下的router.js中配置路由。
'use strict';
module.exports = app => {
const { router, controller } = app;
// 配置路由,指向controller文件夾下news.js文件裏的index方法
router.get('/news', controller.news.index);
};
然後在 controller 文件夾中新建路由所對應的控制器文件 new.js,並在文件裏添加路由所對應的控制器方法 index。
'use strict';
const Controller = require('egg').Controller;
class NewsController extends Controller {
async index() {
// 注意render是一個異步方法,要用await
// title與list爲模擬數據,項目中一般通過service查詢數據庫獲取
await this.ctx.render('news',{
title:'新聞頁面',
list:['新聞一','新聞二','新聞三'],
})
}
}
module.exports = NewsController;
最後在view文件夾中新建模板文件news.html,接受控制器傳來的參數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 使用靜態資源 -->
<link rel="stylesheet" href="/public/css/basic.css">
</head>
<body>
<h2><%=title%></h2>
<ul>
<% for(var i=0;i<list.length;i++){ %>
<li><%=list[i]%></li>
<%}%>
</ul>
<!-- 使用靜態資源 -->
<img src="/public/images/1.jpg" alt="">
</body>
</html>
完成以上這些操作,就可以通過本地的服務器地址 http://127.0.0.1:7001/news 看到效果了。
注意,靜態資源必須存放在public文件夾下,實際引用時,如果擔心層級過多,可以用"/public" 開頭的絕對路徑來訪問靜態資源。