Node.js 的 30 天學習日記--第二十一天

Node.js 學習第二十一天

如果在看的過程中有任何錯誤歡迎寫 E-MAIL: pp840405@gmail.com 提醒我錯誤。


EJS - 參數導入

要如何把用 node.js 傳送資料到 EJS 檔案呢,要在你要傳送的檔案名稱後面在下物件參數。
這邊是把第二十天的一些設定給省略,不要照這邊的寫入。
這是 index.ejs 檔案 設定

1
2
3
4
 <body>
<%= title %>
<h1><%= title2 %></h1>
</body>

這是 app.js 檔案 設定

1
2
3
4
5
6
7
 //自行輸入其它設定(參考第20天)
app.get('/',function(req,res){
res.render('index',{
'title':'顯示結果',
'title2':'第二筆資料'
});
});


EJS - 載入內容種類

在 HMTL 接收資料裡面有不同的接收格式

  1. [=] 是把資料都渲染成字串
  2. [-] 有 HTML 格式資料會自動轉化
  3. 不加任何符號 EJS 裡面可以寫判斷 IF
  4. <% -%> 後面加上[-]是去除不需要的空格

    1
    2
    3
    4
    5
    6
    7
    8
     <body>
    //寫JavaSrcipt 需要在<%%>裡面寫入
    <% if(show){ %>
    <span>資料有呈現</span>
    <% } %>
    <%= title %>
    <h1><%= title2 %></h1>
    </body>
    1
    2
    3
    4
    5
    6
    7
     app.get('/',function(req,res){
    res.render('index',{
    'title':'顯示結果',
    'title2':'第二筆資料',
    'show':true
    });
    });

EJS - 載入陣列

用陣列呈現資料

1
2
3
4
5
6
7
8
9
10
11
 <body>
<%= title %>
<h1><%= title2 %></h1>
//列表呈現資料
<ul>
<% for(var i = 0; i < name.length; i++){ %>
//若沒有加入<%- %> EJS就會認為你只要載入字串
<li><%- name[i] %></li>
<%}%>
</ul>
</body>

1
2
3
4
5
6
7
 app.get('/',function(req,res){
res.render('index',{
'title':'顯示結果',
'title2':'第二筆資料',
'name':['tom','join','liucon','angel']
});
});

EJS - 設定Layout

前面都是 EJS 使用的方法,接下來要製作一個 EJS 樣版。

  1. 先新增一個 user.ejs 這樣你就有 index.ejs 跟 user.ejs 兩個 ejs 檔案了,後面會解釋會什麼要這樣寫。
    1
    <h1>user</h1>

  1. 新增一個 layout.ejs 檔案,然後在裡面這樣寫
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <%- body %>
    </body>
    </html>

  1. 把之前的 index.ejs 檔案更改成這樣,一些的 HTML 設定不用寫,第一段是載入一個 layout 檔案,它的檔案是叫 layout
    1
    2
    3
    4
    5
    6
    7
    8
    <% layout('layout') %>
    <%= title %>
    <h1><%= title2 %></h1>
    <ul>
    <% for(var i = 0; i < name.length; i++){ %>
    <li><%- name[i] %></li>
    <%}%>
    </ul>

  1. app.js 這樣寫
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var express = require('express');
    var app = express();
    app.use(express.static('public'));
    var engine = require('ejs-locals');
    app.engine('ejs',engine);
    app.set('views','./views');
    app.set('view engine','ejs');
    app.get('/',function(req,res){
    res.render('index',{
    'title':'顯示結果',
    'title2':'第二筆資料',
    'name':['tom','join','liucon','angel']
    });
    });
    //新增這段 載入 user.ejs
    app.get('/user',function(req,res){
    res.render('user');
    });
    var port = process.env.PORT || 3000;
    app.listen(port);

結語

樣版這很方便不用一個一個去修改,只要修改有套用樣版的地方就好,有任何問題歡迎寫 MAIL: pp840405@gmail.com 一起共同討論。