视频地址：

视图 Nunjucks

彩虹是上帝和人类立的约，上帝不会再用洪水灭人。

客户端和服务端之间相互通信，传递的数据最终都会展示在视图中，这时候就需要用到『模板引擎』。

什么是模板引擎？

模板引擎是为了使用户界面与业务数据分离而产生的，可以生成特定格式的文档。例如，用于网站的模板引擎会生成一个标准的 HTML 文档。

市面上常见的模板引擎很多，例如：Smarty、Jade、Ejs、Nunjucks 等，可以根据个人喜好进行选择。koa-views、koa-nunjucks-2 等支持 Koa 的第三方中间件也可以自行选择。

本项目中，我们使用 koa-nunjucks-2 作为模板引擎。Nunjucks 是 Mozilla 开发的，纯 js 编写的模板引擎，既可以用在 Node 环境下，也可以运行在浏览器端。koa-nunjucks-2 是基于 Nunjucks 封装出来的第三方中间件，完美支持 Koa2。

Nunjucks 介绍

首先我们需要了解 Nunjucks 的几个特性

简单语法

变量

{
   { username }}  {
   { foo.bar }}  {
   { foo["bar"] }}

如果变量的值为 undefined 或 null ，将不予显示。

过滤器

{
   { foo | title }}  {
   { foo | join(",") }}  {
   { foo | replace("foo", "bar") | capitalize }}

if 判断

{% if variable %}    It is true  {% endif %}  {% if hungry %}    I am hungry  {% elif tired %}    I am tired  {% else %}    I am good!  {% endif %}

for 循环

var items = [{ title: "foo", id: 1 }, { title: "bar", id: 2}]

Posts
  
    
       {% for item in items %}    
     
{
   { item.title }}
  {% else %}    
     
This would display if the 'item' collection were empty
  {% endfor %}  
    

macro 宏

宏：定义可复用的内容，类似于编程语言中的函数

{% macro field(name, value='', type='text') %}  
    
    
       
    
  {% endmacro %}

接下来就可以把 field 当作函数一样使用：

{
   { field('user') }}  {
   { field('pass', type='password') }}

更多语法内容请查阅

继承功能

网页常见的结构大多是头部、中间体加尾部，同一个网站下的多个网页，头部和尾部内容通常来说基本一致。于是我们可以采用继承功能来进行编写。

先定义一个 layout.html

          {% block head %}      
          {% endblock %}                {% block header %}      
this is header
      {% endblock %}      {% block body %}      
this is body
      {% endblock %}      {% block footer %}      
this is footer
        {% endblock %}      {% block content %}            {% endblock %}      

layout 定义了五个模块，分别命名为：head、header、body、footer、content。header 和 footer 是公用的，因此基本不动。业务代码的修改只需要在 body 内容体中进行、业务样式表和业务脚本分别在头部 head 和底部 content 中引入。

接下来我们再定义一个业务级别的视图页面：home.html

{% extends 'layout.html' %}  {% block head %}  
      {% endblock %}  {% block body %}  
home 页面内容
  {% endblock %}  {% block content %}    {% endblock%}

最终的 home.html 输出后如下所示：

          
                    
this is header
      
home 页面内容
      
this is footer
              

安全性

请对特殊字符进行转义，防止 Xss 攻击。若在页面上写入 Hello World<script>alert(0)</script> 这类字符串变量，并且不进行转义，页面渲染时该脚本就会自动执行，弹出提示框。  

安装并运行

安装 koa-nunjucks-2:

npm i koa-nunjucks-2 -S

修改 app.js，引入中间件，并指定存放视图文件的目录 views：

const Koa = require('koa')  const path = require('path')  const bodyParser = require('koa-bodyparser')  const nunjucks = require('koa-nunjucks-2')  const app = new Koa()  const router = require('./router')  app.use(nunjucks({    ext: 'html',    path: path.join(__dirname, 'views'),// 指定视图目录    nunjucksConfig: {      trimBlocks: true // 开启转义 防Xss    }  }));  app.use(bodyParser())  router(app)  app.listen(3000, () => {    console.log('server is running at http://localhost:3000')  })

在之前的项目中，视图被写在了 controller/home 里面，现在我们把它迁移到 views 中：

新建 views/home/login.html:

            
        
            
    
      
           
     
      
           
     
      
     {
   {btnName}}    
    
    

重写 controller/home 中的 login 方法：

login: async(ctx, next) => {    await ctx.render('home/login',{      btnName: 'GoGoGo'    })  },

注意： 这里我们使用了 await 来异步读取文件。因为需要等待，所以必须保证读取文件之后再进行请求的响应。

增加了 views 层之后，视图功能还不算完善，我们还需要增加静态资源目录。当然，如果能直接使用静态服务器的话更好。下一节中，我们将讲述下如何增加静态文件及美化项目视图。

下一篇：处理静态资源——指定静态文件目录，设定缓存

上一篇：iKcamp新课程推出啦～～～～～

推荐： 翻译项目Master的自述：

1.

2. iKcamp出品微信小程序教学共5章16小节汇总(含视频)