iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks

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

视图 Nunjucks

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

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

什么是模板引擎?

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

市面上常见的模板引擎很多,例如:SmartyJadeEjsNunjucks 等,可以根据个人喜好进行选择。koa-viewskoa-nunjucks-2 等支持 Koa 的第三方中间件也可以自行选择。

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

Nunjucks 介绍

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

简单语法

变量

  {{ username }}

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

如果变量的值为 undefinednull ,将不予显示。

过滤器

  {{ 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 定义了五个模块,分别命名为:headheaderbodyfootercontentheaderfooter 是公用的,因此基本不动。业务代码的修改只需要在 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 层之后,视图功能还不算完善,我们还需要增加静态资源目录。当然,如果能直接使用静态服务器的话更好。下一节中,我们将讲述下如何增加静态文件及美化项目视图。

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何保护您的服务器免受HTTPoxy漏洞的影响

2016年7月18日,披露了一个名为HTTPoxy的CGI应用程序漏洞。攻击者可以通过传递带有请求的HTTPProxy 标头来利用易受攻击的部署,这会在联系支持...

6600
来自专栏java学习

面试题13(一个具有生命的线程有哪些状态)

考点:考察求职者对线程的理解 出现频率:★★★ 【面试题解析】线程的状态表示线程在某时间段内进行的活动和将要进行的任务程有创建、就绪、运行、阻塞、死亡5种状态。...

34850
来自专栏Jerry的SAP技术分享

使用SAP云平台的destination消费Internet上的OData service

通过SAP云平台上的destination我们可以消费Internet上的OData service或者其他通过HTTP方式暴露出来的服务。

42040
来自专栏HansBug's Lab

【前端】Ubuntu16下nodejs+npm+vue环境配置

笔者最近在学习vue.js,不过一直都是在runoob上面各种尝试。今天笔者在本机(Ubuntu16.04)尝试部署了nodejs+npm+vue开发环境,接下...

38450
来自专栏流柯技术学院

linux下MySQL表名忽略大小写设置

最近公司项目的MySQL数据库要迁移到linux下,部署时日志总是显示报找不到一个表,用MYSQL查看明明有这个表。后来经百度,原来LINUX下的MYSQL默认...

32920
来自专栏Java成神之路

Java_异常_01_org.apache.commons.lang.exception.NestableRuntimeException

异常信息: The type org.apache.commons.lang.exception.NestableRuntimeException cannot...

9110
来自专栏FreeBuf

解密攻击者如何利用D-Link路由器构建僵尸网络

在这篇文章中,我们将跟大家讨论我们在几台顶级D-Link路由器中发现的安全漏洞,受影响的路由器型号如下: -DIR890L -DIR885L -DIR895L...

28080
来自专栏bboysoul

自己搭建ngrok服务把树莓派放到公网上去

为什么自己搭建ngrok服务呢?原因很简单,官方如果绑定域名要收费啊,自己有服务器,所以就自己搭建一个好了,要求的服务器配置又不高,说实在的树莓派IO真的惨不忍...

15910
来自专栏平凡文摘

Java程序员最常用的Linux命令

27340
来自专栏公众号_薛勤的博客

深入理解跨域SSO原理与技术

​ SSO英文全称Single Sign On,单点登录。SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登...

24210

扫码关注云+社区

领取腾讯云代金券