第一部分：ejs模板引擎
ejs-cli
ejs預先定義好
數據---將數據注入到模板中->|編譯
帶有數據的html頁面
-
cnpm install ejs-cli -g 全局安裝
-
ejs-cli-h 幫助文檔
-
標准的json字符串外面必須是單引號
-
編譯ejs模板文件命令
1、什么是模板引擎，為什么要用模板引擎
- 循環遍歷數據顯示
- 實現數據與試圖分離（即html結構與數據分離）
- 例如
- 用jQuery或原生js將以下用戶信息顯到網頁表格中
userList = [{"username":"Alice",classNo:"1001","age":20},
{"username":"Tom",classNo:"1002","age":22},
{"username":"Jhon",classNo:"1001","age":19},
{"username":"Mary",classNo:"1003","age":21},
{"username":"Jerry",classNo:"1002","age":18},
{"username":"Jenny",classNo:"1004","age":22}]
2、准備
- 全局安裝ejs-cli cnpm install ejs-cli -g
- 全局安裝ejs cnpm install ejs -g
- 查看幫助命令 ejs-cli -h
3、ejs模板語法
EJS是一個javascript模板庫，用來從json數據中生成HTML字符串
- 功能：緩存功能，能夠緩存好的HTML模板；
- <% code %>用來執行javascript代碼
(1)、 ejs模板文件后綴名 .ejs
(2)、編譯ejs模板文件命令
-
參數輸入形式
-
ejs-cli -f(--f) 模板文件路徑 -o(--out) 輸出文件路徑 -O(--options) 輸入模板參數
-
ejs-cli -f "index.ejs" -o "../dist" -O '{"title":"Hello wrold"}'
$ ejs-cli -f ./injector02.ejs -o ../dist -O '{"name":"Alice","age":15}'
(3)、模板中輸出變量
-
聲明變量<% title="EJS Template engine" %>
-
輸出變量
-
<%= username %> 特殊字符將進行轉義
-
<%- myHtml %> 變量直接輸出，不做轉義處理
4.變量定義標簽屬性
<h1 style="<%= style %>"></h1>
5.循環
<ul>
<% for(var i in users){ %>
<li><%= users[i].username %>--<%= users[i].age %></li>
<% } %>
</ul>
.ejs
<!-- 定義一組數組 -->
<% users=["Jack","Rose","Alice","Ave"] %>
<ul>
<% for(var item in users){ %>
<li>
<%= users[item] %>
</li>
<% } %>
</ul>
服務台
$ ejs-cli -f for.ejs -o ../dist
服務台運行之后自動出現html
<!-- 定義一組數組 -->
<ul>
<li>
Jack
</li>
<li>
Rose
</li>
<li>
Alice
</li>
<li>
Ave
</li>
</ul>
6.if語句
<% if(isLogin){ %>
<p><a href="#">Jerry</a> | <a href="#">退出</a></p>
<% }else{ %>
<p><a href="#">登錄</a> | <a href="#">注冊</a></p>
<% } %>
.ejs
<!-- 將所有條件判斷代碼放<% %>里面即可 -->
<% if(isLogin){ %>
<div class="user">
<a href="">Jack</a>
<a href="">退出</a>
</div>
<% }else{ %>
<div class="login">
<a href="">登錄</a>
<a href="">注冊</a>
</div>
<% } %>
7.模板嵌套
- <% include 嵌套模板路徑 %>
- <% include ./header %>
例
新建文件
head.ejs
<meta charset="utf-8"/>
<title><%= title %></title>
<link rel="styleSheet" type="text/css" href="/css/index.css" />
header.ejs
<nav>
<li>item-one</li>
<li>item-two</li>
<li>itm-three</li>
</nav>
footer.ejs
<p>powered by Node.js Author:Jessco 215668636lai@gmail.com</p>
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include ./head %>
</head>
<body>
<main>
<% include ./header %>
<div>main content</div>
<% include ./footer %>
</main>
</body>
</html>
為什么使用ejs
- 在web項目中渲染頁面，我們很多時候，會用json或者拼接字符串的方式，不夠美觀，破壞原有html結構，大量的html拼接會使代碼難以閱讀。
- ejs是一個簡單高效的模板語言，通過數據和模板，可以生成HTML標記文本。
第二部分：ejs在express中使用方法
1、為express服務器，設置模板引擎類型
- app.set("view engine","jade/ejs/handlebars/任選其一")
2、配置ejs模板文件存放路徑
- app.set("View",path)
3、將ejs模板渲染成html頁面后返回給瀏覽器
- res.render(path,data)
- path:模板文件路徑 字符串
- 渲染模板時需要使用的數據，對象
- res.render("404")
- res.render("login",{title:"用戶登錄“})
express -generator ———用來快速生成一個基於express服務器的項目
使用方法
1、全局安裝
- cnpm install express -generator -g
2、使用
- express -e projectName
- -e 模板名稱（使用的模板類型） projectName 項目
3、進入到該項目
- cd projectName
4、安裝項目依賴包
- cnpm install
- -e 代表ejs模板 -pug 代表pug模板
express中使用express -session中間件的步驟
1、安裝express -session模塊
2、引入var session =require("express -session")
3、調用中間件
app.use(session,({
secret:"aaa",
resave:false,
saveUninitialized:true,
cookie:{
secure:false,maxAge:1000*60*60
}//cookie保存的時間值
}))
利用session記錄用戶訪問網站次數
if(req.session.times){
req.session.times++;
}else{
req.session.times=1;
//判斷出如果用戶是第一次訪問，則在req.session對象上添加times屬性
}//假如用戶第一次訪問的時候req.session.times值為undefined
在后台解析cookie，需要下載cookie -parser
- cnpm install cookie -parser --save
為ejs設置公共變量
-
給信息做預處理返回
-
讓res.render都有{isLogin:true,username:""}
var app=express() app.use(function(req,res,next){ res.locals={isLogin:true,username:""} })