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

时间 2020-01-20

标签 ikcamp 基于 koa2 koa 搭建 node.js node 实战视频视图 nunjucks 栏目 Node.js 繁體版

原文原文链接

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

视图 Nunjucks

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

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

什么是模板引擎？

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

市面上常见的模板引擎不少，例如：Smarty、Jade、Ejs、Nunjucks 等，能够根据我的喜爱进行选择。koa-views、koa-nunjucks-2 等支持 Koa 的第三方中间件也能够自行选择。 java

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

Nunjucks 介绍

首先咱们须要了解 Nunjucks 的几个特性github

简单语法

变量npm

{{ 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实战（含视频）☞ 代码分层

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

视图 Nunjucks

什么是模板引擎？

Nunjucks 介绍

简单语法

继承功能

安全性

安装并运行

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

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

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

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

视图 Nunjucks

什么是模板引擎？

Nunjucks 介绍

简单语法

继承功能

安全性

安装并运行

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

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

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

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