在Koa中應用Nunjucks，需要先把Nunjucks集成為符合Koa規格的中間件（Middleware），從本質上來講，集成後的中間件的作用是給上下文對象綁定一個render(view, model)方法，這樣，後面的Controller就可以調用這個方法來渲染模板了。 ...
技術架構：
在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文件，部分代碼已省略。代碼如下：
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方法。代碼如下：
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開發實戰》吧！
