Node - Egg.js 框架从入门到放弃系列（5）- 模板引擎渲染

最新推荐文章于 2026-05-22 12:14:42 发布

原创最新推荐文章于 2026-05-22 12:14:42 发布 · 709 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文为个人学习整理所得，希望对读者有所帮助。

View 模板渲染

基本信息

在某些情况下，我们需要进行服务端渲染，是需要引入对应的模板引擎的。

在egg.js框架内置 egg-view 作为模板解决方案，并支持多模板渲染，每个模板引擎都以插件的方式引入，但保持渲染的 API 一致。如果想更深入的了解，可以查看模板插件开发。

这里推荐给大家一个比较成熟的egg-view的插件，也是官方推荐的插件：egg-view-nunjucks，官方API文档点击这里。

安装插件

$ npm i egg-view-nunjucks --save

引入插件

我们在 config/plugin.js 文件中输入以下代码

exports.nunjucks = {
  enable: true,
  package: 'egg-view-nunjucks',
};

配置插件

在 config/config.default.js 文件中输入以下代码

// 添加 view 配置
config.view = {
    defaultViewEngine: 'nunjucks',
    mapping: {
  // 这里可以是.nj/.tpl/.html等文件后缀
  // '.nj': 'nunjucks',
  // '.tpl': 'nunjucks',
    '.html': 'nunjucks',
    },
}

如何利用引擎渲染

一个简单业务场景：我们在收到一个商品list数组，里面包括了id、name和price，需要渲染到页面上。

我们修改一下上一节的代码。

controller/goods.js

async index() {
   const { ctx } = this;
   const res = await ctx.service.goods.index();
   await ctx.render('goods.html', { 
     res
   });
}

service/goods.js

const Service = require('egg').Service;
class GoodsService extends Service {
 async index() {
   const list = [
     {
       id:1,
       name:'河粉',
       price: 666,
     },
     {
       id:2,
       name:'米粉',
       price: 233,
     },
     {
       id:3,
       name:'肠粉',
       price: 99,
     }
   ]
   return list;
 }
}
module.exports = GoodsService;

这里我们使用ctx对象的render方法，调用 render 渲染文件时，会根据上述配置的后缀名去寻找对应的模板引擎。

render方法接受两个参数：① 是需要渲染的文件，此处为 goods.html；

紧接着在view文件夹中创建一个新文件goods.html

<body>
  {% for item in res %}
  <ul>
    <li>商品名：{{item.name}}</li>
    <li>商品ID：{{item.id}}</li>
    <li>商品价格：{{item.price}}</li>
  </ul>
  {% endfor %}
</body>

浏览器中输入localhost:7001/goods，得到下图结果便是成功使用：