Koa與Node.js開發實戰（3）——Nunjucks模板在Koa中的應用（視訊演示）
阿新 • • 發佈：2019-01-14
技術架構：
在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開發實戰》吧！
