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

夏天的一朵云

已于 2022-05-11 11:07:03 修改

阅读量384

点赞数

分类专栏： web 服务端渲染文章标签： javascript node.js

于 2022-05-01 23:50:13 首次发布

本文链接：https://blog.csdn.net/ximenxiafeng/article/details/124535097

版权

web 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

服务端渲染

5 篇文章 0 订阅

订阅专栏

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" 开头的绝对路径来访问静态资源。

片段视图

这里为了演示还使用了include用来包含另一个ejs。

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%- include('user/show'); %> 代码包含后者。
你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理

<head>
	<%- include('template/header.html',{item: item}); %>
</head>

<%-代表输出非转义的数据到模板，其它标签含义还有

夏天的一朵云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Egg 中使用模板引擎及引用静态资源

egg-view-ejs 是Egg 中比较常用的模板引擎，虽然性能不是很高，但是它的语法规则却是极其的简单，使用起来很方便，下面简单介绍一下它的用法。1. 安装模板引擎npm i egg-view-ejs --save2. 在 config 文件夹下找到 plugin.js 文件，导出ejs'use strict'; // 导出 ejsexports.ejs = { enable: true, package: 'egg-view-ejs',};3. 在co.
复制链接

扫一扫

专栏目录