技术架构：

​

在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中的应用（视频演示）的更多相关文章

  1. Koa与Node.js开发实战（2）——使用Koa中间件获取响应时间（视频演示）

    学习架构: 在实战项目中,经常需要记录下服务器的响应时间,也就是从服务器接收到HTTP请求,到最终返回给客户端之间所耗时长.在Koa应用中,利用中间件机制可以很方便的实现这一功能.代码如下所示: 01 ...

  2. Koa与Node.js开发实战（1）——Koa安装搭建（视频演示）

    学习架构: 由于Koa2已经支持ES6及更高版本,包括支持async方法,所以请读者保证Node.js版本在7.6.0以上.如果需要在低于7.6的版本中应用Koa的async方法,建议使用Babel ...

  3. iKcamp新书上市《Koa与Node.js开发实战》

    内容摘要 Node.js 10已经进入LTS时代!其应用场景已经从脚手架.辅助前端开发(如SSR.PWA等)扩展到API中间层.代理层及专业的后端开发.Node.js在企业Web开发领域也日渐成熟,无 ...

  4. 《Node.js开发实战详解》学习笔记

    <Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...

  5. 基于 Koa平台Node.js开发的KoaHub.js的控制器，模型，帮助方法自动加载

    koahub-loader koahub-loader是基于 Koa平台Node.js开发的KoaHub.js的koahub-loader控制器,模型,帮助方法自动加载 koahub loader I ...

  6. 腾讯高级工程师带你完整体验Node.js开发实战

    Node.js拥有广大的 JavaScript程序员基础并且完全开源,它被广泛地用在 Web服务.开发工作流.客户端应用等诸多领域.在 Web 服务开发这个领域,业界对 Node.js 的接受程度最高 ...

  7. 基于 Koa平台Node.js开发的KoaHub.js连接打印机的代码

    最近好多小伙伴都在做微信商城的项目,那就给大家分享一个基于 Koa.js 平台的 Node.js web 开发的框架连接微信易联云打印机接口的代码,供大家学习.koahub-yilianyun 微信易 ...

  8. 基于 Koa平台Node.js开发的KoaHub.js获取/设置会话功能代码

    koa-session2 Middleware for Koa2 to get/set session use with custom stores such as Redis or mongodb ...

  9. 基于 Koa平台Node.js开发的KoaHub.js的输出json到页面代码

    koahub-body-res koahub body res Format koa's respond json. Installation $ npm install koahub-body-re ...

随机推荐

  1. row_number() over()分页查询

    1.首先讲下row_number() over() 是干什么的? 是一个分析函数,会在数据表生成一个排序列. 案例SQL: select ROW_NUMBER() over(order by book ...

  2. python内存回收的问题

    python实际上,对于占用很大内存的对象,并不会马上释放. 举例,a=range(10000*10000),会发现内存飙升一个多G,del a 或者a=[]都不能将内存降下来.. del 可以删除多 ...

  3. Go语言打造以太坊智能合约测试框架（level3）

    传送门: 柏链项目学院 第三课 智能合约自动化测试 之前课程回顾 我们之前介绍了go语言调用exec处理命令行,介绍了toml配置文件的处理,以及awk处理文本文件获得ABI信息.我们的代码算是完成了 ...

  4. 【原】Java学习笔记032 - 多线程

    package cn.temptation; public class Sample01 { public static void main(String[] args) { /* * [进程]:正在 ...

  5. 删除Widows 启动项中的信息

    1.打开任务管理器切换到启动Tab,在需要删除的项目上点击右键,点击打开文件所在位置,这样就找到了启动项所在磁盘位置,可以根据需要决定是否删除. 2.从注册表中删除在启动中的注册信息. regedit ...

  6. [题解]SP703 SERVICE - Mobile Service_Done

    设计状态F[i][j][k]代表完成任务i后,有一个员工在地点P[i],其他两人分别在j和k两地.所需要的最小代价. 转移的方式: 分别考虑派遣i,j,k三人前往下一个需求地点,并更新状态. #inc ...

  7. java学习札记

    java学习札记 0x0 学习原因  本来打算大三再去跟着课程去学习java的,但是现在题目越来越偏向java,所以迫于无奈开启了java的学习篇章,同时也正好写个笔记总结下自己学习一门语言的流程. ...

  8. Linux：Day18(下) Bind9

    子域授权:每个域的名称服务器,都是通过其上级名称服务器在解析库中进行授权. 类似根域授权tld: .com IN NS ns1.com. .com IN NS ns1.com. ns1.com IN ...

  9. vuex直接修改state 与 用dispatch／commit来修改state的差异

    一. 使用vuex修改state时,有两种方式: 1.可以直接使用 this.$store.state.变量 = xxx; 2.this.$store.dispatch(actionType, pay ...

  10. 团队开发项目--NABCD模型

    N(need)需求: 鉴于在学校中的大部分爱学习的学生平时都去拍空教室的占有情况,我们发现有的时候太多,导致同学们们拍照会浪费很长的时间,而且空教室的显示不是一下子全出来,有的时候还会出现无法显示的情 ...