當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

koa --- nunjucks在Koa中的使用、中间件的配置

發(fā)布時(shí)間：2023/12/10 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 koa --- nunjucks在Koa中的使用、中间件的配置小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Nunjucks在Koa中的應(yīng)用

app.js

const koa = require('koa'); const app = new koa(); const router = require('./router') const nunjucks = require('koa-nunjuncks-2'); app.use(nunjucks({ext: 'html', // 指定視圖文件默認(rèn)后綴path: path.join(__dirname, 'views'), // 指定視圖目錄nunjucksConfig:{trimBlocks: true // 開啟轉(zhuǎn)義,防止XSS} }))

注: 配置要在router前面

使用 (ctx.render(path))
/controller/home.js

user: async (ctx, next) =>{await ctx.render('home/login',{btnName: 'GoGoGo'}) }

關(guān)鍵代碼

使用&&掛載&&配置nunjucks

const nunjucks = require('koa-nunjucks-2'); app.use(nunjucks({ext: 'html', // 默認(rèn)的后綴名path: path.join(__dirname, 'views'),nunjucksConfig:{trimBlocks: true // 開啟轉(zhuǎn)義,防止XSS} }));

views的目錄結(jié)構(gòu)如下
例如使用 /views/home/login.html 模板進(jìn)行渲染

async (ctx, next) =>{awaite ctx.render('home/login',{btnName: 'GoGoGo'}) }

/views/home/login.html

{% extends "common/layout-home.html" %} {% block homeBanner %} <div class="banner_box"><div class="banner_inner"><h2 class="slogan">匯聚天下英才</h2><p class="des">吃貨吃貨 Marron<br>好吃不貴,多吃不胖!!!</p><a href="/login" title="gogogo" class="btn" id="gogogo">進(jìn)入戰(zhàn)場(chǎng)</a></div> </div> {% endblock %} {% block content %} <div class="hp-dialog"><div class="hp-box"><form action="/user/login" method="post"><h1>到達(dá)戰(zhàn)場(chǎng)</h1><p class="error">{{content}}</p><input type="text" name="name" placeholder="請(qǐng)輸入用戶名：marron"><input type="password" name="password" placeholder="請(qǐng)輸入密碼：123456"><button>GoGoGo</button></form></div> </div> <div class="hp-overlay"></div> {% endblock %}

Nunjucks語法介紹

一般情況下,模板引擎都需要具備以下功能: 變量、邏輯表達(dá)式、循環(huán)、layout、include、宏和擴(kuò)展等.

1.文件擴(kuò)展名

Nunjucks支持用任意擴(kuò)展名來命名模板文件,但Nunjucks社區(qū)還是推薦使用’.njk’為后綴進(jìn)行命名

2.變量

變量會(huì)從模板文件運(yùn)行時(shí)的上下文獲取,如果需要顯示一個(gè)變量,代碼如下:
{{username}}
模板文件運(yùn)行時(shí),會(huì)從上下文對(duì)象中查找username屬性,然后顯示。模板語法也支持像JavaScript一樣獲取變量的屬性(可使用點(diǎn)操作符或中括號(hào)操作符),代碼如下:

如果變量的值為undefined或null將不予顯示,引用的對(duì)象為undefined或null也是如此,

3.注釋

在Nunjucks模板語法中,可以使用語法{# 注釋內(nèi)容 #}來編寫注釋,注釋不會(huì)被編譯,示例代碼如下:

{# Loop through all the users #} {% for user in users %}...{% endfor %}

模板文件運(yùn)行后只會(huì)渲染第2行的文本內(nèi)容。

4.標(biāo)簽

標(biāo)簽是一些特殊的區(qū)塊,應(yīng)用標(biāo)簽可以對(duì)模板執(zhí)行一些操作。Nunjucks包含一些內(nèi)置的標(biāo)簽,同時(shí)也支持自定義標(biāo)簽。

if標(biāo)簽
if為分支語句,與JavaScript中的if語句類似,代碼如下:

{% if variable %}It is true {% endif %} 如果variable已經(jīng)被定義且為true,則會(huì)顯示"It is true",否則什么也不顯示。注意: 這里并非布爾值,和JavaScript的處理是一樣的。 ````javascript {% if hungry %}I am hungry! {% elif tired %}I am tired! {% else %}I am good! {% endif %}

for標(biāo)簽
for可以用來遍歷數(shù)組和對(duì)象。假設(shè)遍歷如下數(shù)組:

var items = [{ title: "foo", id: 1}, { title: "bar", id:2 }];

對(duì)應(yīng)的模板代碼如下:

<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> 上面的示例通過for循環(huán)調(diào)用items數(shù)組中的每個(gè)元素,并將對(duì)應(yīng)元素的title屬性顯示出來。如果items是空數(shù)組,則會(huì)渲染else語句中的內(nèi)容。- macro(宏)標(biāo)簽宏: 定義可復(fù)用的內(nèi)容,類似于編程語言中的函數(shù),示例代碼如下: ````javascript {% macro field(name, value='', type='text') %} <div class="field"> <input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" /> </div> {% endmacro %}

接下來就可以把field當(dāng)作函數(shù)一樣使用了,代碼如下:

Extends/Block標(biāo)簽
Extends用來指定模板繼承,被指定的模板為父級(jí)模板。Block(區(qū)塊)定義了模板片段并標(biāo)識(shí)一個(gè)名字,在模板繼承中使用。父級(jí)模板可指定一個(gè)區(qū)塊,子模板覆蓋這個(gè)區(qū)塊。Extends標(biāo)簽和Block標(biāo)簽相互搭配,在模板繼承場(chǎng)景中經(jīng)常會(huì)被用到。在實(shí)戰(zhàn)項(xiàng)目中,經(jīng)常需要設(shè)定一個(gè)固定的公用模板Layout,然后開發(fā)人員再創(chuàng)建一個(gè)業(yè)務(wù)級(jí)的模板文件,并把Layout繼承過來。公用模板文件layout.html的示例代碼如下:

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">{% 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>

總結(jié)

以上是生活随笔為你收集整理的koa --- nunjucks在Koa中的使用、中间件的配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：知名中文语料库
下一篇： koa --- 使用koa-multe