视频地址：https://www.cctalk.com/v/15114923888328

视图 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}]


  <h1>Posts</h1>

  <ul>

  {% for item in items %}

    <li>{{ item.title }}</li>

  {% else %}

    <li>This would display if the 'item' collection were empty</li>

  {% endfor %}

  </ul>

macro 宏

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

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

  <div class="field">

    <input type="{{ type }}" name="{{ name }}"

          value="{{ value | escape }}" />

  </div>

  {% endmacro %}

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

  {{ field('user') }}

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

更多语法内容请查阅官方文档

继承功能

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

先定义一个 layout.html

  <html>

    <head>

      {% block head %}

      <link rel="stylesheet">

      {% endblock %}

    </head>

    <body>

      {% block header %}

      <h1>this is header</h1>

      {% endblock %}

      {% block body %}

      <h1>this is body</h1>

      {% endblock %}

      {% block footer %}

      <h1>this is footer</h1>

      {% endblock %}

      {% block content %}

      <script>

        //this is place for javascript

      </script>

      {% endblock %}

    </body>

  </html>

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

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

  {% extends 'layout.html' %}

  {% block head %}

  <link href="home.css">

  {% endblock %}

  {% block body %}

  <h1>home 页面内容</h1>

  {% endblock %}

  {% block content %}

  <script src="home.js"></script>

  {% endblock%}

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

  <html>

    <head>

      <link href="home.css">

    </head>

    <body>

      <h1>this is header</h1>

      <h1>home 页面内容</h1>

      <h1>this is footer</h1>  

      <script src="home.js"></script>

    </body>

  </html>

安全性

请对特殊字符进行转义，防止 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:

  <!DOCTYPE html>

  <html lang="en">

  <head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>

  <body>

    <form action="/user/register" method="post">

      <input name="name" type="text" placeholder="请输入用户名：ikcamp" />

      <br/>

      <input name="password" type="text" placeholder="请输入密码：123456" />

      <br/>

      <button>{{btnName}}</button>

    </form>

  </body>

  </html>

重写 controller/home 中的 login 方法：

  login: async(ctx, next) => {

    await ctx.render('home/login',{

      btnName: 'GoGoGo'

    })

  },

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

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

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

上一篇：iKcamp新课程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 代码分层

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

1. 干货｜人人都是翻译项目的Master

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

iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 视图Nunjucks的更多相关文章

  1. iKcamp团队制作｜基于Koa2搭建Node.js实战项目教学（含视频）☞ 环境准备

    安装搭建项目的开发环境 视频地址:https://www.cctalk.com/v/15114357764004 文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await ...

  2. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理

    沪江CCtalk视频地址:https://www.cctalk.com/v/15114923887518 处理错误请求 爱能遮掩一切过错. 当我们在访问一个站点的时候,如果访问的地址不存在(404), ...

  3. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 记录日志

    沪江CCtalk视频地址:https://www.cctalk.com/v/15114923883523 log 日志中间件 最困难的事情就是认识自己. 在一个真实的项目中,开发只是整个投入的一小部分 ...

  4. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 解析JSON

    视频地址:https://www.cctalk.com/v/15114923886141 JSON 数据 我颠倒了整个世界,只为摆正你的倒影. 前面的文章中,我们已经完成了项目中常见的问题,比如 路由 ...

  5. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源

    视频地址:https://www.cctalk.com/v/15114923882788 处理静态资源 无非花开花落,静静. 指定静态资源目录 这里我们使用第三方中间件: koa-static 安装并 ...

  6. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 代码分层

    视频地址:https://www.cctalk.com/v/15114923889408 文章 在前面几节中,我们已经实现了项目中的几个常见操作:启动服务器.路由中间件.Get 和 Post 形式的请 ...

  7. iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 规范与部署

    沪江CCtalk视频地址:https://www.cctalk.com/v/15114923889450 规范与部署 懒人推动社会进步. 本篇中,我们会讲述三个知识点 定制书写规范 开发环境运行 如何 ...

  8. iKcamp团队制作｜基于Koa2搭建Node.js实战（含视频）☞ 中间件用法

    中间件用法--讲解 Koa2 中间件的用法及如何开发中间件

  9. iKcamp团队制作｜基于Koa2搭建Node.js实战（含视频）☞ 路由koa-router

    路由koa-router--MVC 中重要的环节:Url 处理器

随机推荐

  1. css 通用兄弟选择器( ~ )

    stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...

  2. MySql数据库中敏感字段加密处理方案

    比如数据表中有一个手机号码字段是敏感字段,不想明文存储,可以是用MySQL的自带的函数处理 Table 12.17 Encryption Functions Name Description AES_ ...

  3. 安装Linux软件时没有图形界面的问题

    Q: 现在Linux下的软件有很多也采用图形界面安装了:但有时候我们发现启动安装程序时本该出现图形界面时却出现了文本界面. A: 检查常用的图形函数库(最主要的自然是gtk, qt)是否已安装.尤其是 ...

  4. BASIC-22_蓝桥杯_FJ的字符串

    示例代码: #include <stdio.h>#define N 1000000 int main(void){ int n = 0 , i = 0; char arr[N] , tmp ...

  5. Linux系统管理员非常使用的几款工具推荐

    1. ExplainShell.com 命令解释 对于Linux用户来说每天都会写各种命令和脚本,那么你可以使用这个网站工具来查看命令式如何工作的,这样可以避免不必要的错误出现:也是一个很好的学习命令 ...

  6. scala学习之路一

    所谓学习,那么首先就先简单介绍一下scala吧 1.scala的介绍 Scala 是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性. Scal ...

  7. freemarker 宏嵌套nested 的使用

    转载来源:http://blog.sina.com.cn/s/blog_7e5699790100z59g.html 模板页: <#assign basePath = request.contex ...

  8. java操作Excel之POI（3）

    一.字体处理 /** * 字体处理 */ public static void main(String[] args) throws Exception { Workbook wb = new HSS ...

  9. springMVC学习(10)-上传图片

    需求:在修改商品页面,添加上传商品图片功能. SpringMVC中对多部件类型解析: 1)springmvc中配置: <!-- 文件上传 --> <bean id="mul ...

  10. Windows下永久解决数据库乱码 utf8 转 gbk

    产生乱码原因 因为windows终端的默认字符集是gbk编码,而mysql数据库是utf8的编码,所以会产生乱码问题 解决乱码问题(临时修改) 询当前数据库默认编码: mysql> show v ...