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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章