理解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節中,我們學習了模板引擎的相關知識。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM