render()函式進行伺服器端渲染(詳細)
使用 Express 做服務端框架的時候，如果選擇一種類似於 EJS這種模板引擎渲染前端頁面的時候，經常服務端在響應 http 請求的時候呼叫 res.render({options}) 去向模板中渲染資料, 可以把檢視響應給客戶端.
框架
怎麼來的？
安裝package.json => npm init
新建app.js
安裝express框架 => npm install express --save
模組什麼時候用什麼時候安裝
node app
新建public資料夾/index.html(客戶端渲染)
建立views資料夾/product.js order.js
app.js
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(7000,function(){
console.log('服務已經啟動，請訪問http://localhost:7000');
// 訪問http://localhost:7000
})
報錯cannot get/ 原因沒有設定靜態資源目錄 管線
就是加入管線 app.use(express.static('public'));
為什麼能找到public資料夾?
把app.use看成管道，第一道網就是public,帶進入這個資料夾，預設進入index.js
index.html
<body> <h1>我是主頁</h1> <a href="http://www.baidu.com">百度</a> <a href="/user.html">使用者</a> <!-- 跳轉使用render函式 -路由 --> <a href="/order/list">訂單列表</a> <a href="/product/list">產品列表</a> <a href="/api/product/list">產品列表</a> </body>
1打通路
加入管線
效果：返回一個json
2.怎麼讓他返回一個HTML頁面？
express約定的檢視資料夾views
node app
效果：找不到檔案
缺少一道網 -->檢視模板 必須用它來找views/.html並且可以解析它->安裝ejs
npm install ejs --save
引入 const ejs = require('ejs');
加入管線（設定檢視引擎） app.engine('ejs',ejs.renderFile);
3.怎麼讓他去找到views資料夾？ app.set('views','views'); set和use功能一樣
// 第一個引數是檢視模板（固定），第二個引數是檢視模板所在的位置，預設express框架把views資料夾當成檢視檔案的位置
app.engine('ejs',require('ejs').renderFile);//優化
查文件 http://www.expressjs.com.cn/4x/api.html#app.engine
如果想讓他解析jsp檔案(安全性高)
app.engine(‘jsp’,require(‘ejs’).renderFile);//優化
views/ order.jsp
router/order.js ->res.render(‘order.jsp’)//ejs字尾可以省略
改成ejs
app.engine(‘ejs’,require(‘ejs’).renderFile);
views/ order.ejs
router/order.js ->res.render(‘order’)
錯誤表示沒有解析器，設定一個解析器
app.set(‘view engine’,‘ejs’);
相當於
解析HTML，js
app.engine('ejs',require('ejs').renderFile);
解析ejs
app.set('view engine','ejs');
兩個作用一樣
4.怎麼讓檢視動態化？
原來：檢視模板裡面發起ajax請求 ，指令碼，jQuery $.get 獲取資料，繫結到檢視上（dom繫結）
現在：要動態渲染，需要資料
資料從哪裡來？
回到render函式
res.render('order',[option]);
// 第一個引數是檢視的名稱，如果是.ejs檔案，必須省略字尾名，如果是.html,.jsp,.abc,.def等自己定義的字尾名時，必須加字尾。
// 第二個引數是檢視需要的資料
資料傳過去了如何使用？
<%= title %>
app.js
app.set('views','views');//可以省略。預設
app.set('view engine','ejs');//與下兩行等效 如果是.ejs檔案，可省略字尾名，
// 需要使用檢視模板引擎，讓他解析views檔案中的.html檔案
// 需要安裝檢視模板引擎：npm install ejs --save
// const ejs = require('ejs');
// app.engine('ejs',ejs.renderFile);
// 設定檢視引擎
// 加（）立即執行了，沒有加（）相當於繫結到前面
// app.engine('ejs',require('ejs').renderFile);//要在order.js里加 res.render('order.ejs') 如果是.ejs檔案，必須加上字尾名，
//------------------------------------------------------
app.use(require('./router/order.js'));
app.use(require('./router/product.js'));
// 理解在介面前多加一個字首
app.use('/api',require('./router/product.js'));
router/order.js
const express = require('express');
const route = express.Router();
// 方盒子-屬性，不加括號、 立方體-方法加括號
// a標籤發起的是get請求，如果要讓他發起post請求，要設定監聽事件
route.get('/order/list',function(req,res,next){
// res.json({code:200});
res.render('order',{
title:'我是訂單列表頁',
content:'<h2>我是標題2</h2>',
person:{
name:'張三',
age:20,
sex:true,
fav:['讀書','聽音樂','唱歌']
}
});
});
module.exports = route;
模板用ejs渲染
views/order.ejs
<body>
訂單列表
<!-- 帶=的不會解析HTML標籤，
帶-的會解析HTML標籤
判斷語句注意：1.不能加=號 2.閉合{}-->
<%= title %>
<hr>
<%- content %>
<hr>
姓名：<%= person.name %><br />
年齡：<%= person.age %><br />
姓別：<%= person.sex?"男":"女" %><br />
姓別：<% if(person.sex){ %>
<span style="color: red">男</span>
<% }else{ %>
女
<% } %>
<hr>
愛好：
<% for(var i = 0; i < person.fav.length ;i++){%>
<%= person.fav[i]%>
<% }%>
</body>
router/product.js
const express = require('express');
const route = express.Router();
route.get("/product/list",function(req,res,next){
res.render('product',{
id:1,
name:'華為',
price:2000,
amount:309,
products:[
{id:2,name:'華為1',price:200, amount:309},
{id:3,name:'華為2',price:20, amount:309}
]
});
});
module.exports = route;
product.ejs
<!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>
<style>
table{
/* 為表格設定合併邊框模型 */
border-collapse: collapse;
width: 600px;
}
th,td{
border:1px solid #ccc;
height:40px;
text-align: center;
}
</style>
</head>
<body>
<h2>產品列表</h2>
<table>
<tr>
<td>編號</td>
<th>產品名稱</th>
<th>單價</th>
<th>庫存量</th>
</tr>
<tr>
<td><%=id%></td>
<td><%=name%></td>
<td><%=price%></td>
<td><%=amount%></td>
</tr>
<% for(var i = 0;i < products.length;i++ ){ %>
<tr>
<td><%= products[i].id %></td>
<td><%= products[i].name %></td>
<td><%= products[i].price %></td>
<td><%= products[i].amount %></td>
</tr>
<% } %>
</table>
</body>
</html>
