iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 视图Nunjucks
视频地址：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的更多相关文章
- iKcamp团队制作｜基于Koa2搭建Node.js实战项目教学（含视频）☞ 环境准备
安装搭建项目的开发环境 视频地址:https://www.cctalk.com/v/15114357764004 文章 Koa 起手 - 环境准备 由于 koa2 已经开始使用 async/await ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理
沪江CCtalk视频地址:https://www.cctalk.com/v/15114923887518 处理错误请求 爱能遮掩一切过错. 当我们在访问一个站点的时候,如果访问的地址不存在(404), ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 记录日志
沪江CCtalk视频地址:https://www.cctalk.com/v/15114923883523 log 日志中间件 最困难的事情就是认识自己. 在一个真实的项目中,开发只是整个投入的一小部分 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 解析JSON
视频地址:https://www.cctalk.com/v/15114923886141 JSON 数据 我颠倒了整个世界,只为摆正你的倒影. 前面的文章中,我们已经完成了项目中常见的问题,比如 路由 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源
视频地址:https://www.cctalk.com/v/15114923882788 处理静态资源 无非花开花落,静静. 指定静态资源目录 这里我们使用第三方中间件: koa-static 安装并 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 代码分层
视频地址:https://www.cctalk.com/v/15114923889408 文章 在前面几节中,我们已经实现了项目中的几个常见操作:启动服务器.路由中间件.Get 和 Post 形式的请 ...
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 规范与部署
沪江CCtalk视频地址:https://www.cctalk.com/v/15114923889450 规范与部署 懒人推动社会进步. 本篇中,我们会讲述三个知识点 定制书写规范 开发环境运行 如何 ...
- iKcamp团队制作｜基于Koa2搭建Node.js实战（含视频）☞ 中间件用法
中间件用法--讲解 Koa2 中间件的用法及如何开发中间件
- iKcamp团队制作｜基于Koa2搭建Node.js实战（含视频）☞ 路由koa-router
路由koa-router--MVC 中重要的环节:Url 处理器
随机推荐
- springboot 知识点
---恢复内容开始--- 1springBoot项目引入方式, 1,继承自父 project (需要没有付项目才能用,一般我们的项目都会有 父 项目 所以 这种方式不推荐 ,记住有这种方式 就可以了) ...
- [boost] : lightweight_test库
lightweight_test轻量级单元测试框架, 只支持最基本的单元测试, 不支持测试用例, 测试套件的概念, 简单小巧, 适合要求不高或者快速测试的工作. 基本用法 需要包含头文件#includ ...
- 【selenium】下拉框和弹出框处理
#-*-coding=utf-8 from selenium import webdriver import os,time driver= webdriver.Firefox() driver.ge ...
- CentOS7.1下生产环境Keepalived+Nginx配置
CentOS7.1下生产环境Keepalived+Nginx配置 [日期:2015-07-20] 来源:Linux社区 作者:soulful [字体:大 中 小] 注:下文涉及到配置的,如无特别 ...
- ExtJS xtype 一览
基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...
- nginx和apache最核心的区别在于apache是同步多进程模型，一个连接对应一个进程；nginx是异步的，多个连接（万级别）可以对应一个进程
nginx和apache的一些优缺点比较,摘自网络,加自己的一些整理. nginx相对于apache的优点: 1.轻量级,同样是web 服务,比apache 占用更少的内存及资源 2.抗并发,ngin ...
- Android手机卸载第三方应用
测试机互相拆借,过多的应用占用手机空间,使用脚本将不需要的第三方应用卸载. #!/bin/sh #白名单 whiteName=( com.tencent.mobileqq com.tencent.mm ...
- java study2
Intellj小技巧 数组 1.java数组元素类型是唯一的,即一个数组只能存储一种数据类型的数据,而不能存储多种数据类型的数据. 2.java数组的长度,一旦初始化完成,控件就被固定,即数组的长度将 ...
- 1065 A+B and C (64bit) （20 分）
1065 A+B and C (64bit) (20 分) Given three integers A, B and C in [−2^63,2^63], you are suppose ...
- linux开机启动详细流程图
linux开机启动详细流程图: 一.BIOS 加电自检当你按电源开关开机时,电脑会首先去启动BIOS(基本输入输出系统),BIOS一般是集成在主板上的.BIOS 的工作1.检测连接硬件,比如显卡,内存 ...