Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）
技术架构：
在Koa中应用Nunjucks，需要先把Nunjucks集成为符合Koa规格的中间件（Middleware），从本质上来讲，集成后的中间件的作用是给上下文对象绑定一个render(view, model)方法，这样，后面的Controller就可以调用这个方法来渲染模板了。
NPM社区有很多开源爱好者提供的第三方中间件。开发者可以根据实际情况自由选择，也可以像iKcamp团队一样，自己实现集成Nunjucks。本示例中，选用了koa-nunjucks-2模块。
安装koa-nunjucks-2，命令如下：
npm install koa-nunjucks-2 --save
此处的示例代码将会在5.1.3节的基础上继续操作。修改app.js并引入koa-nunjucks-2中间件，同时指定存放视图文件的目录views。项目结构如下：
├── controller/
│ ├── home.js
├── service/
│ ├── home.js
├── views/
├── app.js
├── router.js
修改app.js文件，部分代码已省略。代码如下：
const nunjucks = require('koa-nunjucks-2'); // 引入模板引擎
app.use(nunjucks({
ext: 'html', // 指定视图文件默认后缀
path: path.join(__dirname, 'views'), // 指定视图目录
nunjucksConfig: {
trimBlocks: true // 开启转义，防止Xss漏洞
}
}));
在之前的项目中，视图内容被写在了controller/home.js里面，现在需要把视图部分的代码迁移到views中。新建view/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/login" 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.js中的login方法。代码如下：
login: async(ctx, next) => {
await ctx.render('home/login',{
btnName: 'GoGoGo'
});
},
注意：函数中使用了await语句来异步读取文件，因为需要等待，所以在读取文件之后再进行请求的响应。
打开浏览器并访问地址http://localhost:3000/user，将会看到一个简易版的登录视图。
对Nunjucks模板引擎的引入给本项目增加了View层。实现更完善的视图功能还需要增加静态资源目录等，如果能直接使用静态服务器的话更好。后面章节中，将会介绍如何增加静态文件以及对项目的视图进行美化。
本节在线视频地址https://camp.qianduan.group/koa2/2/1/6，二维码
喜欢就和我一起学习这本书《Koa与Node.js开发实战》吧！
Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）的更多相关文章
- Koa与Node.js开发实战（2）——使用Koa中间件获取响应时间（视频演示）
学习架构: 在实战项目中,经常需要记录下服务器的响应时间,也就是从服务器接收到HTTP请求,到最终返回给客户端之间所耗时长.在Koa应用中,利用中间件机制可以很方便的实现这一功能.代码如下所示: 01 ...
- Koa与Node.js开发实战（1）——Koa安装搭建（视频演示）
学习架构: 由于Koa2已经支持ES6及更高版本,包括支持async方法,所以请读者保证Node.js版本在7.6.0以上.如果需要在低于7.6的版本中应用Koa的async方法,建议使用Babel ...
- iKcamp新书上市《Koa与Node.js开发实战》
内容摘要 Node.js 10已经进入LTS时代!其应用场景已经从脚手架.辅助前端开发(如SSR.PWA等)扩展到API中间层.代理层及专业的后端开发.Node.js在企业Web开发领域也日渐成熟,无 ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- 基于 Koa平台Node.js开发的KoaHub.js的控制器，模型，帮助方法自动加载
koahub-loader koahub-loader是基于 Koa平台Node.js开发的KoaHub.js的koahub-loader控制器,模型,帮助方法自动加载 koahub loader I ...
- 腾讯高级工程师带你完整体验Node.js开发实战
Node.js拥有广大的 JavaScript程序员基础并且完全开源,它被广泛地用在 Web服务.开发工作流.客户端应用等诸多领域.在 Web 服务开发这个领域,业界对 Node.js 的接受程度最高 ...
- 基于 Koa平台Node.js开发的KoaHub.js连接打印机的代码
最近好多小伙伴都在做微信商城的项目,那就给大家分享一个基于 Koa.js 平台的 Node.js web 开发的框架连接微信易联云打印机接口的代码,供大家学习.koahub-yilianyun 微信易 ...
- 基于 Koa平台Node.js开发的KoaHub.js获取/设置会话功能代码
koa-session2 Middleware for Koa2 to get/set session use with custom stores such as Redis or mongodb ...
- 基于 Koa平台Node.js开发的KoaHub.js的输出json到页面代码
koahub-body-res koahub body res Format koa's respond json. Installation $ npm install koahub-body-re ...
随机推荐
- CRC32明文攻击
明文攻击是一种较为高效的攻击手段,大致原理是当你不知道一个zip的密码,但是你有zip中的一个已知文件(文件大小要大于12Byte)时, 因为同一个zip压缩包里的所有文件都是使用同一个加密密钥来加密 ...
- anki server 错误与解决
anki 客户端 转载请注明出处 :http://www.cnblogs.com/qq-757617012/ 1.无法同步 是否突然停电,导致程序损坏(提示被防火墙或杀毒软件阻止) anki客 ...
- js关于new Date() 日期格式
下面是关于Date的对象 var oDay = new Date(); oDay.getYear(); //当前年份 oDay.getFullYear(); //完整的年月日(xx年,xx月,xx日) ...
- 360 随身 WiFi3 在 Ubuntu 14.04 下的使用
由于 360 随身 WiFi3 采用 Mediaek 代号 0e8d:760c 的芯片,目前没有官方或第三方 Linux 驱动,所以造成 Linux 用户的诸多困扰. 本文给出一个迂回的解决方案:在 ...
- libgdx学习记录2——文字显示BitmapFont
libgdx对中文支持不是太好,主要通过Hireo和ttf字库两种方式实现.本文简单介绍最基本的bitmapfont的用法. 代码如下: package com.fxb.newtest; import ...
- 《JavaScript设计模式与开发实践》笔记第一章
第一章 面向对象的JavaScript 动态类型语言和鸭子类型 编程语言按照数据类型大体可以分为两类:静态类型语言.动态类型语言. 静态类型语言:在编译时便已确定变量的类型. 优点: 在编译时就能发现 ...
- 挥舞的手臂(mixly+二次开发)
从vb6到vb.net,一路c#, java, python, nn, c,对技术的切换早已经没有害怕的感觉了,一直有的是技术的热情和我所认为的技术信仰. 扯完,开始正文. 看看效果图: 使用的是Ar ...
- ValueError: too many values to unpack
Error msg: 执行: python manage,py makemigrations 报错:Value: too many values to unpack 问题: django第一次数据库迁 ...
- JSP页面、EL表达式
JSP页面: jsp 是一种动态页面,html 页面和 jsp页面最大的区别是:html 是一种静态页面,在 html 中只 能定义 css.js 等,在 jsp 中除了可以定义 css.js 之外还 ...
- 关于php中 json_encode 编码成json数据参数说明
JSON_UNESCAPED_SLASHES 编码不要转义符 \ 反斜杠 JSON_UNESCAPED_UNICODE 编码不转义成 unicode 字符串 如果如果多个参数可以用 | 隔开添 ...