iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 视图Nunjucks

whlong 发布于2019-08-21 18:42 / 1043人阅读

视频地址：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}]

  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 这类字符串变量，并且不进行转义，页面渲染时该脚本就会自动执行，弹出提示框。

安装并运行

安装 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:

重写 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小节汇总(含视频)

GPU云服务器云服务器搭建 node.js 云主机搭建 node.js 云vps webrtc node.js服务搭建搭建 node.js 云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90727.html

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

沪江CCtalk视频地址：https://www.cctalk.com/v/15114923887518 showImg(https://segmentfault.com/img/remote/1460000013096340?w=1282&h=714); 处理错误请求爱能遮掩一切过错。当我们在访问一个站点的时候，如果访问的地址不存在(404)，或服务器内部发生了错误(500)，站点会展示出某...

leeon 2019-08-26 11:35 评论0 收藏0
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 解析JSON

视频地址：https://www.cctalk.com/v/15114923886141 showImg(https://segmentfault.com/img/remote/1460000012840997?w=1604&h=964); JSON 数据我颠倒了整个世界，只为摆正你的倒影。前面的文章中，我们已经完成了项目中常见的问题，比如路由请求、结构分层、视图渲染、静态资源等。那么，J...

mudiyouyou 2019-08-22 13:50 评论0 收藏0
开始连载啦～每周２更共11堂iKcamp课｜基于Koa2搭建Node.js实战项目教学（含视频）|

摘要：玩转同时全面掌握潮流技术采用新一代的开发框架更小更富有表现力更健壮。融合多种常见的需求场景网络请求解析模板引擎静态资源日志记录错误请求处理。结合语句中转中间件控制权，解决回调地狱问题。注意分支中的目录为当节课程后的完整代码。 ?? 与众不同的学习方式，为你打开新的编程视角独特的『同步学习』方式文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。云集一线大厂...

B0B0 2019-08-22 11:17 评论0 收藏0
【完结汇总】iKcamp出品基于Koa2搭建Node.js实战共十一堂课(含视频)

摘要：云集一线大厂有真正实力的程序员团队云集一线大厂经验丰厚的码农，开源奉献各教程。融合多种常见的需求场景网络请求解析模板引擎静态资源日志记录错误请求处理。结合语句中转中间件控制权，解决回调地狱问题。注意分支中的目录为当节课程后的完整代码。 ?? 与众不同的学习方式，为你打开新的编程视角独特的『同步学习』方式文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。云...

sPeng 2019-08-22 14:58 评论0 收藏0
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 代码分层

视频地址：https://www.cctalk.com/v/15114923889408 showImg(https://segmentfault.com/img/remote/1460000012682164?w=1604&h=964); 文章在前面几节中，我们已经实现了项目中的几个常见操作：启动服务器、路由中间件、Get 和 Post 形式的请求处理等。现在你已经迈出了走向成功的第一步。 ...

shusen 2019-08-21 18:36 评论0 收藏0