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 接收資料裡面有不同的接收格式
- [=] 是把資料都渲染成字串
- [-] 有 HTML 格式資料會自動轉化
- 不加任何符號 EJS 裡面可以寫判斷 IF
<% -%> 後面加上[-]是去除不需要的空格
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
7app.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 | app.get('/',function(req,res){ |
EJS - 設定Layout
前面都是 EJS 使用的方法,接下來要製作一個 EJS 樣版。
- 先新增一個 user.ejs 這樣你就有 index.ejs 跟 user.ejs 兩個 ejs 檔案了,後面會解釋會什麼要這樣寫。
1
<h1>user</h1>
- 新增一個 layout.ejs 檔案,然後在裡面這樣寫
1
2
3
4
5
6
7
8
9
10
11
12
<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>
- 把之前的 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>
- app.js 這樣寫
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20var 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 一起共同討論。