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，获得下图结果即是成功使用：

一块儿作项目

估计要Pass几章节才会有实践项目，这里就看成是唠叨吧

PS：所有的代码仓库：github.com/hejian1993/…，暂时没有分章节，仅供参考。

我是河粉，咱们下一节见

三个月前，一我的关注了我，他娶了一个如花似玉的老婆。一周前，一我的关注了我，他中了888亿。今年，关注了个人人都娶了如花似玉的老婆结婚那天还中888亿。我已开过光，话已经放到这了。