nodejs express template (模版)的使用 (ejs + express)

時間 2019-11-21

標籤 nodejs express template 模版使用 ejs 简体版

原文原文鏈接

                                                                                                 
var express = require("express")
var app = express();

//註冊ejs模板爲html頁。簡單的講，就是原來以.ejs爲後綴的模板頁，如今的後綴名能夠//是.html了
app.engine('.html', require('ejs').__express);
//設置視圖模板的默認後綴名爲.html,避免了每次res.Render("xx.html")的尷尬
app.set('view engine', 'html');
//設置模板文件文件夾,__dirname爲全局變量,表示網站根目錄
app.set('views', __dirname + '/views');

app.use(express.static(__dirname + '/public'));

var users = [
    {name: 'tobi', email: 'tobi@learnboost.com'},
    {name: 'loki', email: 'loki@learnboost.com'},
    {name: 'jane', email: 'jane@learnboost.com'}
];


app.get('/', function(req, res) {
    //向頁面模板傳遞參數，能夠傳遞字符串和對象，注意格式
    res.render('users', {
        users: users,
        title: "EJS example",
        header: "Some users"
    });
});

if (!module.parent) {
    app.listen(3000);
    console.log('Express app started on port 3000');
}

//user.html
<% include header.html %>

<h1>Users</h1>
<ul id="users">
    <% users.forEach(function(user){ %>
    <li><%= user.name %> <<%= user.email %>></li>
    <% }) %>
</ul>
<hr/>
<script>
    avalon.define("test", function(vm){
        vm.users = <%- JSON.stringify(users) %>
    })
</script>
<ul ms-each-el="users" ms-controller="test">
       <li>{{el.name}} <{{el.email}}></li>
</ul>

<% include footer.html %>

//header.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title> <%= title %> </title>
        <script src="avalon.js"></script>
            
        <style type="text/css">
            body {
                padding: 50px;
                font: 13px Helvetica, Arial, sans-serif;
            }
        </style>
    </head>
    <body>

//footer.html

</body>
</html>

一、上面是express使用模版的一個基本例子html

app.set("view engine","ejs"); 這句將模版引擎設置爲 ejs （http://github.com/visionmedia/ejs）node

ejs可經過 npm install ejs 來進行安裝git

二、在app.get中。github

res.render('users', { users: users, title: "EJS example", header: "Some users" }); 會執行2個步驟。web

會讀取 ./views/index.ejs文件的內容，而後將其中的title變量替換爲EJS example,例如<%=title%>會變爲EJS example。假設返回的內容爲content1express
接着，會讀取./views/layout.ejs，並將其中的body變量替換爲content1，例如<%=body%>會變爲content1的內容。npm

三、在2中，若是不肯意使用默認的layout.ejs，可自行指定。例如：數組

res.render("index",{"title":"test","layout":"main"});

或app

res.render("index",{"title":"test","layout":"main.ejs"});

四、若是不肯意使用layout，則能夠設置layout爲false，例如:

res.render("index",{"layout":false});

五、若是不想每一個請求都單獨設置一次。可使用全局設置：

app.set("view options",{                                                                                          
                                                                                                                                                                                     
    "layout":false
                                                                                                                                                                                     
});

六、ejs 裏，默認的閉合標記是 <% .. %>，咱們也能夠定義本身的標籤。例如：

app.set("view options",{                                                                                  
   "open":"{{",                                                                                  
   "close":"}}"
});

七、每一個模版引擎的用法都有所異同，整體的使用方法都是上面這樣的。

如下是目前經常使用的模版引擎：

Template Engines

Below are a few template engines commonly used with Express:

Haml haml implementation
Jade haml.js successor
EJS Embedded JavaScript
CoffeeKup CoffeeScript based templating
jQuery Templates for node

八、在web應用中，常常會須要重複顯示某個內容，例如：用戶評論功能，須要重複顯示出每一條用戶的評論，這個時候，咱們能夠經過循環來實現。可是也可使用【局部模版】（partial）來實現。例如：

首先咱們建一個局部的模版 ./views/comment.ejs：

<div class="comment_item">                                                                
    <div class="comment_user"><%=comment.user%></div> :                                                                
    <div class="comment_content"><%=comment.content%></div>                                                                
</div>

注意：這裏是comment.xxxx

而後在./views/index.ejs中，經過partial調用comment

this is <%=title%>!                                                          
<br/>                                                          
<%- partial("comment",comments)%>

注意：這裏是 partial("comment.ejs", comments); <-- 單詞要用複數。

最後是在router中，調用index.ejs。

var app=require("express").createServer();                                                  
                                                                                                     
app.set("view engine","ejs");                                                  
                                                                                                     
app.get("/",function(req,res){                                                  
    res.render("index",{"title":"test","layout":false,"comments":[                                                  
        {"user":"gainover","content":"test1"},                                                  
        {"user":"zongzi","content":"test2"},                                                  
        {"user":"maomao","content":"test3"}                                                  
    ]});                                                  
});                                                  
                                                                                                     
app.listen(3000);

注意：代碼裏的 comments 和 index.ejs的 comments變量名稱一致，而partial所調用的comment.ejs中，則採用 comment 的單數形式。

查看源代碼：效果圖以下：
在列表顯示時，咱們一般會遇到的場景是，對第一個元素或者最後一個元素加以特殊顯示。在partial中，咱們能夠經過express內置的變量來判斷當前對象是不是第一個元素或者最後一個元素，例如:
```
<div class="comment_item<%if(firstInCollection){%> firtitem <%}%>">                               
    <div class="comment_user"><%=comment.user%></div> :                               
    <div class="comment_content"><%=comment.content%></div>                               
</div>
```
這樣第一條評論的 class 裏就會多一個firstitem。
相似的內置變量還有：
firstInCollection 若是是數組的第一個元素，則爲true
indexInCollection 當前元素在數組裏的索引
lastInCollection 若是是數組的最後一個元素，則爲true
collectionLength 數組的長度
最後是partial調用模版時的路徑查找問題：
partial("edit") 會查找同目錄下的edit.ejs文件。
partial("../message") 會查找上一級目錄的message.ejs文件。
partial("users") 會查找 users.ejs文件，若是不存在users.ejs, 則會查找 /users/index.ejs文件。