node.js模板引擎ejs的使用方法
阿新 • • 發佈：2018-12-15
ejs模板引擎
安裝模組 ejs express
cnpm install ejs-cli -g
-
標準的json字串必須是單引號
-
編譯ejs模板檔案命令
什麼是模板引擎 為什麼要用模板引擎
- 迴圈遍歷資料顯示
- 實現資料和檢視分離
案例
- 用jquery或者原生將以下使用者資訊新增到表格當中
userList = [{"username":"Alice",classNo:"1001","age":20},
{"username":"Tom",classNo:"1002","age":22},
{"username":"Jhon",classNo:"1001","age":19},
{"username" ejs語法
ejs是一個JavaScript模板庫，用來從json資料中生成html頁面
- 功能：快取功能，能夠快取好的HTML模板；
- <% code %>用來執行javascript程式碼
- ejs模板檔案字尾名.ejs
- 編譯ejs檔案命令
$ ejs-cli -f ./injector02.ejs -o ../dist -O '{"name":"Alice","age":15}'
- 模板中輸出變數
- <%= username %> 特殊字元將進行轉義
- <%- myHtml %> 變數直接輸出，不做轉義處理
- 變數定義標籤屬性
<h1 style="<%= style %>"></h1>
- 迴圈
<ul>
<% for(var i in users){ %>
<li><%= users[i].username %>--<%= users[i].age %></li>
<% } %>
</ ejs字尾
<!-- 定義一組陣列 -->
<% users=["Jack","Rose","Alice","Ave"] %>
<ul>
<% for(var item in users){ %>
<li>
<%= users[item] %>
</li>
<% } %>
</ul>
控制檯
$ ejs-cli -f for.ejs -o ../dist
服務檯執行之後自動出現html
<!-- 定義一組陣列 -->
<ul>
<li>
Jack
</li>
<li>
Rose
</li>
<li>
Alice
</li>
<li>
Ave
</li>
</ul>
- if語句
<% if(isLogin){ %>
<p><a href="#">Jerry</a> | <a href="#">退出</a></p>
<% }else{ %>
<p><a href="#">登入</a> | <a href="#">註冊</a></p>
<% } %>
.ejs
<!-- 將所有條件判斷程式碼放<% %>裡面即可 -->
<% if(isLogin){ %>
<div class="user">
<a href="">Jack</a>
<a href="">退出</a>
</div>
<% }else{ %>
<div class="login">
<a href="">登入</a>
<a href="">註冊</a>
</div>
<% } %>
```
7. 模板巢狀
+ <% include 巢狀模板路徑 %>
+ <% include ./header %>
```
head.ejs
<meta charset="utf-8"/>
<title><%= title %></title>
<link rel="styleSheet" type="text/css" href="/css/index.css" />
header.ejs
<nav>
<li>item-one</li>
<li>item-two</li>
<li>itm-three</li>
</nav>
footer.ejs
<p>powered by Node.js Author:Jessco 215668636[email protected].com</p>
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include ./head %>
</head>
<body>
<main>
<% include ./header %>
<div>main content</div>
<% include ./footer %>
</main>
</body>
</html>
為什麼使用ejs
-
在web專案中渲染頁面,我們很多時候會用json或者拼接的方式不夠美觀 破壞原有的結構大量的html拼接會使得html難以閱讀
-
ejs是一個簡單高效的模板語言通過資料和模板，可以生成html頁面