Node - Egg.js 框架從入門到放棄系列（5）- 模板引擎渲染

時間 2019-11-07

標籤 node egg.js egg 框架入門放棄系列模板引擎渲染欄目 JavaScript 简体版

原文原文鏈接

本文爲我的學習整理所得，但願對讀者有所幫助。javascript

View 模板渲染

基本信息

在某些狀況下，咱們須要進行服務端渲染，是須要引入對應的模板引擎的。html

在egg.js框架內置 egg-view 做爲模板解決方案，並支持多模板渲染，每一個模板引擎都以插件的方式引入，但保持渲染的 API 一致。若是想更深刻的瞭解，能夠查看模板插件開發。java

這裏推薦給你們一個比較成熟的egg-view的插件，也是官方推薦的插件：egg-view-nunjucks，官方API文檔點擊這裏。node

安裝插件

$ npm i egg-view-nunjucks --save
複製代碼

引入插件

咱們在 config/plugin.js 文件中輸入如下代碼git

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

配置插件

在 config/config.default.js 文件中輸入如下代碼github

// 添加 view 配置
config.view = {
    defaultViewEngine: 'nunjucks',
    mapping: {
  // 這裏能夠是.nj/.tpl/.html等文件後綴
  // '.nj': 'nunjucks',
  // '.tpl': 'nunjucks',
    '.html': 'nunjucks',
    },
}
複製代碼

如何利用引擎渲染

一個簡單業務場景：咱們在收到一個商品list數組，裏面包括了id、name和price，須要渲染到頁面上。npm

咱們修改一下上一節的代碼。api

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，獲得下圖結果即是成功使用：