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 一起共同討論。