Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）

时间 2019-12-07

标签 koa node.js node 开发实战 nunjucks 模板应用视频演示栏目 Node.js 繁體版

原文原文链接

技术架构：html

在Koa中应用Nunjucks，须要先把Nunjucks集成为符合Koa规格的中间件（Middleware），从本质上来说，集成后的中间件的做用是给上下文对象绑定一个render(view, model)方法，这样，后面的Controller就能够调用这个方法来渲染模板了。npm

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文件，部分代码已省略。代码以下：

01     const nunjucks = require('koa-nunjucks-2');       // 引入模板引擎

02     app.use(nunjucks({

03              ext: 'html',                                 // 指定视图文件默认后缀

04              path: path.join(__dirname, 'views'),            // 指定视图目录

05              nunjucksConfig: {

06                        trimBlocks: true                                 // 开启转义，防止Xss漏洞

07              }

08     }));

在以前的项目中，视图内容被写在了controller/home.js里面，如今须要把视图部分的代码迁移到views中。新建view/home/login.html，代码以下：

01     <!DOCTYPE html>

02     <html lang="en">

03              <head>

04                        <title></title>

05                        <meta charset="UTF-8">

06                        <meta name="viewport" content="width=device-width, initial-scale=1">

07              </head>

08     <body>

09     <form action="/user/login" method="post">

10              <input name="name" type="text" placeholder="请输入用户名：ikcamp" />

11              <br/>

12              <input name="password" type="text" placeholder="请输入密码：123456" />

13              <br/>

14              <button>{{btnName}}</button>

15     </form>

16     </body>

17     </html>

重写controller/home.js中的login方法。代码以下：app

login: async(ctx, next) => {

         await ctx.render('home/login',{

                   btnName: 'GoGoGo'

         });

},

注意：函数中使用了await语句来异步读取文件，由于须要等待，因此在读取文件以后再进行请求的响应。koa

打开浏览器并访问地址http://localhost:3000/user，将会看到一个简易版的登陆视图。异步

对Nunjucks模板引擎的引入给本项目增长了View层。实现更完善的视图功能还须要增长静态资源目录等，若是能直接使用静态服务器的话更好。后面章节中，将会介绍如何增长静态文件以及对项目的视图进行美化。async

本节在线视频地址https://camp.qianduan.group/koa2/2/1/6，二维码函数

喜欢就和我一块儿学习这本书《Koa与Node.js开发实战》吧！