1. 程式人生 > >理解node的模板引擎

理解node的模板引擎

1.1.3:分析模板引擎

   1.什麼是模板引擎

    模板引擎是一個將頁面模板和要顯示的資料結合生成HTML頁面的工具

    可以這麼理解,如果說Express中的路由控制方法是MVC中的控制器的話,那麼模板就是MVC的檢視。

    什麼是ejs?

    ejs是模板引擎的一種,也是在1.1.2節中用到的模板引擎,因為它使用起來非常簡單,而且與express整合良好。

   2.使用模板引擎

     我在之前講過通過以下兩行程式碼設定模板檔案的儲存位置和使用的模板引擎:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); 

注意:通過express -e blog,我們只是初始化了一個使用ejs模板引擎的工程而已,比如node_modules下添加了ejs模組,在views有index.ejs。這並不是說強制該專案只能使用ejs,而不能使用其它模板引擎如jade,真正指定使用哪個模板引擎的是:

app.use('view engine','ejs');

  在1.1.2節的routes/index.js中通過呼叫res.render()渲染模組,並將其產生的頁面返回給客戶端。它接收兩個引數,第一個引數是模板名稱,即views目錄下的模板檔名,副檔名.ejs可選;第二個引數是傳遞給模板的資料物件,用於模板翻譯。

       開啟views/index.ejs,內容如下:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

  當我們res.render("index",{title:"木人子韋"});時,模板引擎會把<%=title%>替換成“木人子韋”,然後把替換後的頁面顯示給使用者。

       渲染後生成的頁面程式碼為:

<!DOCTYPE html>
<html>
  <head>
    <title>木人子韋</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>木人子韋</h1>
    <p>Welcome to 木人子韋</p>
  </body>
</html>

注意:通過app.use(express.static(path.join(__dirname, 'public')));將css等靜態檔案的根目錄設定為了public資料夾,所以在上面程式碼中的

href='/stylesheets/style.css'

就相當於

href='public/stylesheets/style.css'

       ejs的標籤系統非常簡單,有以下標籤:

  • <% '指令碼' 標籤,用於流程控制,無輸出。
  • <%_ 刪除其前面的空格符
  • <%= 輸出資料到模板(輸出是轉義 HTML 標籤)
  • <%- 輸出非轉義的資料到模板
  • <%# 註釋標籤,不執行、不輸出內容
  • <%% 輸出字串 '<%'
  • %> 一般結束標籤
  • -%> 刪除緊隨其後的換行符
  • _%> 將結束標籤後面的空格符刪除

注意:當變數code為普通字串時,<%=code%>和<%-code%>沒有區別。當code為<div>從刪庫到跑路</div>這樣的字串時,<%=code%>會原樣輸出<div>從刪庫到跑路</div>,而<%-code%>則會顯示  從刪庫到跑路  字串。

      感受一下標籤<% code %>,其它的標籤找官方文件https://ejs.bootcss.com/。下面模仿ejs的官方例項:

例項

資料

user:{name:"木人子韋"}

模板

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

渲染後的程式碼

<h2>木人子韋</h2>

  

 3.頁面佈局

     在Express 3.x中不再使用layout.ejs進行頁面佈局,轉而使用include來替代。

include的簡單使用方法如下:

     index.ejs

<%- include top%>
murenziwei
<%- include bottom%>

  top.ejs

I am top.ejs

 bottom.ejs

I am bottom.ejs

 最終,index.ejs會顯示

I am top.ejs
murenziwei
I am bottom.ejs

 在1.1.3節中,我們學習了模板引擎的相關知識。