node（4）express 框架 EJS模板，cookie, session的學習

時間 2019-12-12

標籤 node express 框架 ejs 模板 cookie session 學習欄目 HTML 简体版

原文原文鏈接

1、EJShtml

概述：前端我們使用過的一個模板套路，是underscore的套路。接下來EJS它屬於後臺工程師人的模板。前端

https://www.npmjs.com/package/ejs 官網地址node

特色：express

Control flow with <% %> 流程控制語句用的是<% %> :例如if for循環等等npm

Escaped output with <%= %> (escape function configurable) 若是有賦值的操做（輸出）你能夠用<%= 變量名%>json

//須要的模塊 express  app.js
var 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 ，今天又學習了一個rendercookie

⑤res.render(「shouye」),直接加上模板的名稱，不須要拼接路徑也不須要有ejs尾綴，渲染的數據用第二個參數json傳遞

2、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>

3、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>
             密碼&nbsp;&nbsp;:<input type="text"  name="mima"/>
        </p>
            <input type="submit"/>
     </form>
     <% }else{%>
      <!-- 這裏是登陸的狀況 -->
          <h3>歡迎你進入你的首頁<%=yonghuming%></h3>
     <% }%>