Koa2學習系列06-檢視nunjucks——Koa 預設支援的模板引擎
檢視 Nunjucks
彩虹是上帝和人類立的約,上帝不會再用洪水滅人。
客戶端和服務端之間相互通訊,傳遞的資料最終都會展示在檢視中,這時候就需要用到『模板引擎』。
什麼是模板引擎?
模板引擎是為了使使用者介面與業務資料分離而產生的,可以生成特定格式的文件。例如,用於網站的模板引擎會生成一個標準的 HTML
文件。
市面上常見的模板引擎很多,例如:Smarty
、Jade
、Ejs
、Nunjucks
等,可以根據個人喜好進行選擇。koa-views
、koa-nunjucks-2
等支援 Koa
本專案中,我們使用 koa-nunjucks-2
作為模板引擎。Nunjucks
是 Mozilla
開發的,純 js
編寫的模板引擎,既可以用在 Node
環境下,也可以執行在瀏覽器端。koa-nunjucks-2
是基於 Nunjucks
封裝出來的第三方中介軟體,完美支援 Koa2
。
Nunjucks 介紹
首先我們需要了解 Nunjucks
的幾個特性
簡單語法
變數
{{ username }} {{ foo.bar }} {{ foo["bar"] }}
如果變數的值為 undefined
或 null
,將不予顯示。
過濾器
{{ foo | title }} {{ foo | join(",") }} {{ foo | replace("foo", "bar") | capitalize }}
if
判斷
{% if variable %} It is true {% endif %} {% if hungry %} I am hungry {% elif tired %} I am tired {% else %} I am good! {% endif %}
for
迴圈
var items = [{ title: "foo", id: 1 }, { title: "bar", id: 2}]
<h1>Posts</h1> <ul> {% for item in items %} <li>{{ item.title }}</li> {% else %} <li>This would display if the 'item' collection were empty</li> {% endfor %} </ul>
macro
巨集
巨集:定義可複用的內容,類似於程式語言中的函式
{% macro field(name, value='', type='text') %} <div class="field"> <input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" /> </div> {% endmacro %}
接下來就可以把 field
當作函式一樣使用:
{{ field('user') }} {{ field('pass', type='password') }}
更多語法內容請查閱官方文件
繼承功能
網頁常見的結構大多是頭部、中間體加尾部,同一個網站下的多個網頁,頭部和尾部內容通常來說基本一致。於是我們可以採用繼承功能來進行編寫。
先定義一個 layout.html
<html> <head> {% block head %} <link rel="stylesheet"> {% endblock %} </head> <body> {% block header %} <h1>this is header</h1> {% endblock %} {% block body %} <h1>this is body</h1> {% endblock %} {% block footer %} <h1>this is footer</h1> {% endblock %} {% block content %} <script> //this is place for javascript </script> {% endblock %} </body> </html>
layout
定義了五個模組,分別命名為:head
、header
、body
、footer
、content
。header
和 footer
是公用的,因此基本不動。業務程式碼的修改只需要在 body
內容體中進行、業務樣式表和業務指令碼分別在頭部 head
和底部 content
中引入。
接下來我們再定義一個業務級別的檢視頁面:home.html
{% extends 'layout.html' %} {% block head %} <link href="home.css"> {% endblock %} {% block body %} <h1>home 頁面內容</h1> {% endblock %} {% block content %} <script src="home.js"></script> {% endblock%}
最終的 home.html
輸出後如下所示:
<html> <head> <link href="home.css"> </head> <body> <h1>this is header</h1> <h1>home 頁面內容</h1> <h1>this is footer</h1> <script src="home.js"></script> </body> </html>
安全性
請對特殊字元進行轉義,防止 Xss
攻擊。若在頁面上寫入 Hello World<script>alert(0)</script>
這類字串變數,並且不進行轉義,頁面渲染時該指令碼就會自動執行,彈出提示框。
安裝並執行
安裝 koa-nunjucks-2
:
npm i koa-nunjucks-2 -S
修改 app.js
,引入中介軟體,並指定存放檢視檔案的目錄 views
:
const Koa = require('koa') const path = require('path') const bodyParser = require('koa-bodyparser') const nunjucks = require('koa-nunjucks-2') const app = new Koa() const router = require('./router') app.use(nunjucks({ ext: 'html', path: path.join(__dirname, 'views'),// 指定檢視目錄 nunjucksConfig: { trimBlocks: true // 開啟轉義 防Xss } })); app.use(bodyParser()) router(app) app.listen(3000, () => { console.log('server is running at http://localhost:3000') })
在之前的專案中,檢視被寫在了 controller/home
裡面,現在我們把它遷移到 views
中:
新建 views/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/register" 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
中的 login
方法:
login: async(ctx, next) => { await ctx.render('home/login',{ btnName: 'GoGoGo' }) },
注意: 這裡我們使用了 await
來非同步讀取檔案。因為需要等待,所以必須保證讀取檔案之後再進行請求的響應。
增加了 views
層之後,檢視功能還不算完善,我們還需要增加靜態資源目錄。當然,如果能直接使用靜態伺服器的話更好。下一節中,我們將講述下如何增加靜態檔案及美化專案檢視。