Egg 中使用模闆引擎及引用靜态資源

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" 開頭的絕對路徑來通路靜态資源。

參考：https://github.com/eggjs/egg-view-ejs