Egg 中使用模板引擎及引用静态资源

越陌度阡

发布于 2020-11-26 12:35:39

1.2K0

发布于 2020-11-26 12:35:39

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/03/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html