国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? 視圖Nunjucks

whlong / 1057人閱讀

視頻地址：https://www.cctalk.com/v/15114923888328

視圖 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}]
  
Posts

  
    
  {% for item in items %}
    
  • {{ item.title }}
    • 
  {% else %}
    
  • This would display if the "item" collection were empty
    • 
  {% endfor %}

macro 宏

宏：定義可復用的內容，類似于編程語言中的函數

  {% macro field(name, value="", type="text") %}
  

    
  

  {% endmacro %}

接下來就可以把 field 當作函數一樣使用：

  {{ field("user") }}
  {{ field("pass", type="password") }}

更多語法內容請查閱官方文檔

繼承功能

網頁常見的結構大多是頭部、中間體加尾部，同一個網站下的多個網頁，頭部和尾部內容通常來說基本一致。于是我們可以采用繼承功能來進行編寫。

先定義一個 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 定義了五個模塊，分別命名為：head、header、body、footer、content。header 和 footer 是公用的，因此基本不動。業務代碼的修改只需要在 body 內容體中進行、業務樣式表和業務腳本分別在頭部 head 和底部 content 中引入。

接下來我們再定義一個業務級別的視圖頁面：home.html

  {% extends "layout.html" %}

  {% block head %}
  
  {% endblock %}

  {% block body %}
  
home 頁面內容

  {% endblock %}

  {% block content %}
  
  {% endblock%}

最終的 home.html 輸出后如下所示：

  
    
      
      
    
      
this is header


      
home 頁面內容


      
this is footer
安全性

請對特殊字符進行轉義，防止 Xss 攻擊。若在頁面上寫入 Hello World 這類字符串變量，并且不進行轉義，頁面渲染時該腳本就會自動執行，彈出提示框。 ?

安裝并運行

安裝 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:

重寫 controller/home 中的 login 方法：

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

注意： 這里我們使用了 await 來異步讀取文件。因為需要等待，所以必須保證讀取文件之后再進行請求的響應。

增加了 views 層之后，視圖功能還不算完善，我們還需要增加靜態資源目錄。當然，如果能直接使用靜態服務器的話更好。下一節中，我們將講述下如何增加靜態文件及美化項目視圖。

下一篇：處理靜態資源——指定靜態文件目錄，設定緩存

上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? 代碼分層
推薦： 翻譯項目Master的自述： 1. 干貨｜人人都是翻譯項目的Master 2. iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90727.html

相關文章

  • iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? 錯誤處理

    滬江CCtalk視頻地址：https://www.cctalk.com/v/15114923887518 showImg(https://segmentfault.com/img/remote/1460000013096340?w=1282&h=714); 處理錯誤請求 愛能遮掩一切過錯。 當我們在訪問一個站點的時候，如果訪問的地址不存在(404)，或服務器內部發生了錯誤(500)，站點會展示出某...

    leeon 評論0 收藏0

  • iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? 解析JSON

    視頻地址：https://www.cctalk.com/v/15114923886141 showImg(https://segmentfault.com/img/remote/1460000012840997?w=1604&h=964); JSON 數據 我顛倒了整個世界，只為擺正你的倒影。 前面的文章中，我們已經完成了項目中常見的問題，比如 路由請求、結構分層、視圖渲染、靜態資源等。 那么，J...

    mudiyouyou 評論0 收藏0

  • 開始連載啦～每周２更共11堂iKcamp課｜基于Koa2搭建Node.js實戰項目教學（含視頻）|

    摘要：玩轉同時全面掌握潮流技術采用新一代的開發框架更小更富有表現力更健壯。融合多種常見的需求場景網絡請求解析模板引擎靜態資源日志記錄錯誤請求處理。結合語句中轉中間件控制權，解決回調地獄問題。注意分支中的目錄為當節課程后的完整代碼。 ?? ?與眾不同的學習方式，為你打開新的編程視角 獨特的『同步學習』方式 文案講解+視頻演示，文字可激發深層的思考、視頻可還原實戰操作過程。 云集一線大廠...

    B0B0 評論0 收藏0

  • 【完結匯總】iKcamp出品基于Koa2搭建Node.js實戰共十一堂課(含視頻)

    摘要：云集一線大廠有真正實力的程序員團隊云集一線大廠經驗豐厚的碼農，開源奉獻各教程。融合多種常見的需求場景網絡請求解析模板引擎靜態資源日志記錄錯誤請求處理。結合語句中轉中間件控制權，解決回調地獄問題。注意分支中的目錄為當節課程后的完整代碼。 ?? ?與眾不同的學習方式，為你打開新的編程視角 獨特的『同步學習』方式 文案講解+視頻演示，文字可激發深層的思考、視頻可還原實戰操作過程。 云...

    sPeng 評論0 收藏0

  • iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? 代碼分層

    視頻地址：https://www.cctalk.com/v/15114923889408 showImg(https://segmentfault.com/img/remote/1460000012682164?w=1604&h=964); 文章 在前面幾節中，我們已經實現了項目中的幾個常見操作：啟動服務器、路由中間件、Get 和 Post 形式的請求處理等。現在你已經邁出了走向成功的第一步。 ...

    shusen 評論0 收藏0

發表評論

0條評論

whlong

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<