資訊專欄INFORMATION COLUMN
視頻地址：https://www.cctalk.com/v/15114923888328
視圖 Nunjucks彩虹是上帝和人類立的約，上帝不會(huì)再用洪水滅人。
客戶端和服務(wù)端之間相互通信，傳遞的數(shù)據(jù)最終都會(huì)展示在視圖中，這時(shí)候就需要用到『模板引擎』。
什么是模板引擎？模板引擎是為了使用戶界面與業(yè)務(wù)數(shù)據(jù)分離而產(chǎn)生的，可以生成特定格式的文檔。例如，用于網(wǎng)站的模板引擎會(huì)生成一個(gè)標(biāo)準(zhǔn)的 HTML 文檔。
市面上常見(jiàn)的模板引擎很多，例如：Smarty、Jade、Ejs、Nunjucks 等，可以根據(jù)個(gè)人喜好進(jìn)行選擇。koa-views、koa-nunjucks-2 等支持 Koa 的第三方中間件也可以自行選擇。
本項(xiàng)目中，我們使用 koa-nunjucks-2 作為模板引擎。Nunjucks 是 Mozilla 開(kāi)發(fā)的，純 js 編寫(xiě)的模板引擎，既可以用在 Node 環(huán)境下，也可以運(yùn)行在瀏覽器端。koa-nunjucks-2 是基于 Nunjucks 封裝出來(lái)的第三方中間件，完美支持 Koa2。
Nunjucks 介紹首先我們需要了解 Nunjucks 的幾個(gè)特性
簡(jiǎn)單語(yǔ)法變量
{{ username }}
{{ foo.bar }}
{{ foo["bar"] }}
如果變量的值為 undefined 或 null ，將不予顯示。
過(guò)濾器
{{ 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 循環(huán)
var items = [{ title: "foo", id: 1 }, { title: "bar", id: 2}]
Posts
macro 宏
宏：定義可復(fù)用的內(nèi)容，類似于編程語(yǔ)言中的函數(shù)
{% macro field(name, value="", type="text") %}
{% endmacro %}
接下來(lái)就可以把 field 當(dāng)作函數(shù)一樣使用：
{{ field("user") }}
{{ field("pass", type="password") }}
更多語(yǔ)法內(nèi)容請(qǐng)查閱官方文檔
繼承功能網(wǎng)頁(yè)常見(jiàn)的結(jié)構(gòu)大多是頭部、中間體加尾部，同一個(gè)網(wǎng)站下的多個(gè)網(wǎng)頁(yè)，頭部和尾部?jī)?nèi)容通常來(lái)說(shuō)基本一致。于是我們可以采用繼承功能來(lái)進(jìn)行編寫(xiě)。
先定義一個(gè) layout.html
{% block head %}
{% endblock %}
{% block header %}
this is header
{% endblock %}
{% block body %}
this is body
{% endblock %}
{% block footer %}
this is footer
{% endblock %}
{% block content %}
{% endblock %}
layout 定義了五個(gè)模塊，分別命名為：head、header、body、footer、content。header 和 footer 是公用的，因此基本不動(dòng)。業(yè)務(wù)代碼的修改只需要在 body 內(nèi)容體中進(jìn)行、業(yè)務(wù)樣式表和業(yè)務(wù)腳本分別在頭部 head 和底部 content 中引入。
接下來(lái)我們?cè)俣x一個(gè)業(yè)務(wù)級(jí)別的視圖頁(yè)面：home.html
{% extends "layout.html" %}
{% block head %}
{% endblock %}
{% block body %}
home 頁(yè)面內(nèi)容
{% endblock %}
{% block content %}
{% endblock%}
最終的 home.html 輸出后如下所示：
this is header
home 頁(yè)面內(nèi)容
this is footer
安全性
請(qǐng)對(duì)特殊字符進(jìn)行轉(zhuǎn)義，防止 Xss 攻擊。若在頁(yè)面上寫(xiě)入 Hello World 這類字符串變量，并且不進(jìn)行轉(zhuǎn)義，頁(yè)面渲染時(shí)該腳本就會(huì)自動(dòng)執(zhí)行，彈出提示框。 ?
安裝并運(yùn)行安裝 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 // 開(kāi)啟轉(zhuǎn)義 防Xss
}
}));
app.use(bodyParser())
router(app)
app.listen(3000, () => {
console.log("server is running at http://localhost:3000")
})
在之前的項(xiàng)目中，視圖被寫(xiě)在了 controller/home 里面，現(xiàn)在我們把它遷移到 views 中：
新建 views/home/login.html:
重寫(xiě) controller/home 中的 login 方法：
login: async(ctx, next) => {
await ctx.render("home/login",{
btnName: "GoGoGo"
})
},
注意： 這里我們使用了 await 來(lái)異步讀取文件。因?yàn)樾枰却?，所以必須保證讀取文件之后再進(jìn)行請(qǐng)求的響應(yīng)。
增加了 views 層之后，視圖功能還不算完善，我們還需要增加靜態(tài)資源目錄。當(dāng)然，如果能直接使用靜態(tài)服務(wù)器的話更好。下一節(jié)中，我們將講述下如何增加靜態(tài)文件及美化項(xiàng)目視圖。
下一篇：處理靜態(tài)資源——指定靜態(tài)文件目錄，設(shè)定緩存
上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js實(shí)戰(zhàn)（含視頻）? 代碼分層推薦： 翻譯項(xiàng)目Master的自述： 1. 干貨｜人人都是翻譯項(xiàng)目的Master 2. iKcamp出品微信小程序教學(xué)共5章16小節(jié)匯總(含視頻)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90727.html
滬江CCtalk視頻地址：https://www.cctalk.com/v/15114923887518 showImg(https://segmentfault.com/img/remote/1460000013096340?w=1282&h=714); 處理錯(cuò)誤請(qǐng)求 愛(ài)能遮掩一切過(guò)錯(cuò)。 當(dāng)我們?cè)谠L問(wèn)一個(gè)站點(diǎn)的時(shí)候，如果訪問(wèn)的地址不存在(404)，或服務(wù)器內(nèi)部發(fā)生了錯(cuò)誤(500)，站點(diǎn)會(huì)展示出某...
視頻地址：https://www.cctalk.com/v/15114923886141 showImg(https://segmentfault.com/img/remote/1460000012840997?w=1604&h=964); JSON 數(shù)據(jù) 我顛倒了整個(gè)世界，只為擺正你的倒影。 前面的文章中，我們已經(jīng)完成了項(xiàng)目中常見(jiàn)的問(wèn)題，比如 路由請(qǐng)求、結(jié)構(gòu)分層、視圖渲染、靜態(tài)資源等。 那么，J...
摘要：玩轉(zhuǎn)同時(shí)全面掌握潮流技術(shù)采用新一代的開(kāi)發(fā)框架更小更富有表現(xiàn)力更健壯。融合多種常見(jiàn)的需求場(chǎng)景網(wǎng)絡(luò)請(qǐng)求解析模板引擎靜態(tài)資源日志記錄錯(cuò)誤請(qǐng)求處理。結(jié)合語(yǔ)句中轉(zhuǎn)中間件控制權(quán)，解決回調(diào)地獄問(wèn)題。注意分支中的目錄為當(dāng)節(jié)課程后的完整代碼。 ?? ?與眾不同的學(xué)習(xí)方式，為你打開(kāi)新的編程視角 獨(dú)特的『同步學(xué)習(xí)』方式 文案講解+視頻演示，文字可激發(fā)深層的思考、視頻可還原實(shí)戰(zhàn)操作過(guò)程。 云集一線大廠...
摘要：云集一線大廠有真正實(shí)力的程序員團(tuán)隊(duì)云集一線大廠經(jīng)驗(yàn)豐厚的碼農(nóng)，開(kāi)源奉獻(xiàn)各教程。融合多種常見(jiàn)的需求場(chǎng)景網(wǎng)絡(luò)請(qǐng)求解析模板引擎靜態(tài)資源日志記錄錯(cuò)誤請(qǐng)求處理。結(jié)合語(yǔ)句中轉(zhuǎn)中間件控制權(quán)，解決回調(diào)地獄問(wèn)題。注意分支中的目錄為當(dāng)節(jié)課程后的完整代碼。 ?? ?與眾不同的學(xué)習(xí)方式，為你打開(kāi)新的編程視角 獨(dú)特的『同步學(xué)習(xí)』方式 文案講解+視頻演示，文字可激發(fā)深層的思考、視頻可還原實(shí)戰(zhàn)操作過(guò)程。 云...
視頻地址：https://www.cctalk.com/v/15114923889408 showImg(https://segmentfault.com/img/remote/1460000012682164?w=1604&h=964); 文章 在前面幾節(jié)中，我們已經(jīng)實(shí)現(xiàn)了項(xiàng)目中的幾個(gè)常見(jiàn)操作：?jiǎn)?dòng)服務(wù)器、路由中間件、Get 和 Post 形式的請(qǐng)求處理等?，F(xiàn)在你已經(jīng)邁出了走向成功的第一步。 ...
閱讀 3250·2021-11-24 10:43
閱讀 4215·2021-11-24 10:33
閱讀 3794·2021-11-22 09:34
閱讀 2143·2021-10-11 10:58
閱讀 3762·2021-10-11 10:58
閱讀 870·2021-09-27 13:36
閱讀 3593·2019-08-30 15:54
閱讀 2977·2019-08-29 18:41
