node（4）express 框架 EJS模板，cookie, session的學習
一、EJS
概述：前端咱們使用過的一個模板套路，是underscore的套路。接下來EJS它屬於後臺工程師人的模板。
https://www.npmjs.com/package/ejs 官網地址
特點：
Control flow with <% %> 流程控制語句用的是<% %> :例如if for循環等等
Escaped output with <%= %> (escape function configurable) 如果有賦值的操作（輸出）你可以用<%= 變量名%>
//需要的模塊 express app.jsvar express = require("express"); var app = express(); //設置模板引擎 app.set("view engine","ejs"); //這個是修改默認的文件夾的目錄名字 app.set("views","template"); app.get("/",function (req,res) { //這裏需要註意的事情：不需要拼接路徑 res.render("shouye",{ "gaoxing":"高興", "dongxi":"iphoneX", "qian":2,"ouxiang":["趙本山大叔","劉德華","成龍"] }) }); app.listen(3000);
//template shouye.ejs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <h1>我今天好<%=gaoxing%>啊,我買了一個<%=dongxi%>,花了我<%=qian%>啊</h1> <select> <% for(var i = 1990 ; i< 2017 ; i++) {%> <% if (i %2 ==0) {%> <option><%= i %></option> <% }%> <% } %> </select> <ul> <% for(var i = 0 ;i < ouxiang.length ;i++) {%> <li><%= ouxiang[i]%></li> <% } %> </ul> </body> </html>
提示：①不需要引入EJS模塊，因此就不需要require(“EJS”);
②設置視圖的模板引擎為ejs,app.set(“view engine” ,”ejs”),設置完模板引擎，自動回搜索views文件夾中的模板。
③如果需要重新設置views文件夾的名稱，app.set(“views”,”template”);
④已經學習過的res.send end json jsonp redirect ，今天又學習了一個render
⑤res.render(“shouye”),直接加上模板的名稱，不需要拼接路徑也不需要有ejs尾綴，渲染的數據用第二個參數json傳遞
二、cookie (cookie-parser)
概述：HTTP協議（應用層FTP）而且還是短輪詢鏈接，發起一次請求之後，就斷開連接了；
Cookie它主要做的事情，是讓服務器知道誰訪問了我，知道誰是誰。
註意：這裏面的信物就是咱們今天學習的cookie(餅幹)，cookie的下發是服務器下發；在node的學習當中有一個模塊叫做，它對於cookie進行了封裝。
註意：cookie是由服務器下發，用的是報文頭下發，報文當中多了一個選項 set-cookie = “XXXXXXX”,
當你瀏覽器再次訪問服務器的時候，用的是上行請求的報文頭裝載cookie在上去。
//app.js var express = require("express"); //解析cookie的時候，需要他解析 var cookieParser = require(‘cookie-parser‘); var app = express(); app.use(cookieParser()); //設置模板引擎 app.set("view engine","ejs"); //中間件 app.get("/",function (req,res) { res.render("shouye",{ "arr":req.cookies.visited||[] }); }); //接受的是瀏覽器反問的時候給咱們的城市的信息 app.get("/:city",function (req,res) { var city = req.params.city; //這是第一次訪問咱們這個中間件的時候，因為cookie還沒有因此就沒有visited的屬性，因此走if分支 if(!req.cookies.visited){ var arr = [city]; }else{ //第二次訪問這個中間件的時候，namecookie已經有了，因此在網cookie當中數組當中添加新的數據 var arr = req.cookies.visited; if(arr.indexOf(city)==-1){ arr.push(city); } } res.cookie("visited",arr,{maxAge:1000*60*60*24}); res.send("<h4>你要去的地方是"+city+"</h4>"); }) app.listen(3000);
//template shouye.ejs 模板頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <div> 旅遊攻略 <a href="/北京">北京</a> <a href="/上海">上海</a> <a href="/廣州">廣州</a> <a href="/深圳">深圳</a> <a href="/蘇州">蘇州</a> <a href="/杭州">杭州</a> <a href="/成都">成都</a> </div> <% for(var i = 0; i< arr.length;i++) {%> <h4><%= arr[i]%></h4> <% } %> </body> </html>
三、session(express-session)
概述：每一次用戶登錄的時候，服務器會給客戶端下發一個亂碼（session），而每一次瀏覽器在反問的時候，帶著亂碼在上去，對比的活是服務器在做。服務器當中的某一部分的內存在進行對比，它（服務器）就知道你是誰？誰來了。
上面的這些操作相當於 setCookie 與cookie已經這只好了；
但是很好的一件事情，是express，它對外暴露了一個模塊，這個模塊對session進行了封裝，我們直接使用，這個模塊的名字 express-session
案例描述：有一個form表單，有用戶名和密碼（123456），每個人登錄之後頁面顯示你的用戶名；
//app.js var express = require("express"); var formidable = require("formidable"); //express-session 模塊的引用 var session = require(‘express-session‘); var app = express(); //下面的東西不需要理解，因為人家讓你這麽寫的 app.set(‘trust proxy‘, 1) ; app.use(session({ secret: ‘jiachenghao‘, resave: false, saveUninitialized: true, cookie: {maxAge:86400} cookie這個選項什麽都可以沒有但是必須要有時間的設置 })); //設置模板引擎 app.set("view engine","ejs") app.get("/",function (req,res) { res.render("index",{ login:req.session.login, yonghuming:req.session.yonghuming }); }); //post請求用formidable app.post("/login",function (req,res) { var form = new formidable.IncomingForm(); form.parse(req,function (err,fields) { if(fields.mima=="123456"){ req.session.login = true; req.session.yonghuming = fields.yonghuming; //重定向：又進入主頁面是發起一次請求 res.redirect("/") } }) })
app.listen(3000);
//template shouye.ejs 模板頁面 <% if(!login) {%> <!-- 沒有登錄的情況 --> <form action="/login" method="post"> <p> 用戶名:<input type="text" name="yonghuming"/> </p> <p> 密碼 :<input type="text" name="mima"/> </p> <input type="submit"/> </form> <% }else{%> <!-- 這裏是登錄的情況 --> <h3>歡迎你進入你的首頁<%=yonghuming%></h3> <% }%>
node（4）express 框架 EJS模板，cookie, session的學習