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開發實戰》吧！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。