iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 14
0
自我挑戰組

通過Node.js了解後端運作原理!系列 第 14

Day.14 MVC網站框架(六)Middleware中介軟體

官方說明:Express 是一個本身功能極簡的路由與中介軟體 Web 架構:本質上,Express 應用程式是一系列的中介軟體函數呼叫。
中介軟體函數是一些有權存取要求物件 (req)、回應物件 (res) 和應用程式要求/回應循環中之下一個中介軟體函數的函數。下一個中介軟體函數通常以名為 next 的變數表示。

簡單來說Middleware是一個function可以接收request和response物件,每一個Middleware可以針對所收到的物件做修改或是解析等處理,然後再傳給下個Middleware,但也可以決定中斷不繼續傳遞。
而每當Express收到客服端的連線請求時,就會引入設定好的Miidleware來處理,

Middleware會長得類似這樣

var express = require('express');
var app = express();

//這一段是Middleware
app.use(function (req, res, next) {
    console.log(new Date());//請求時間
    console.log(req.method);//請求方法
    console.log(req.url));//請求路徑
  next();
});

app.listen(3000);

實際應用上像是必須輸入密碼才能觀看文章的功能

var express = require('express');
var app = express();
var bodyParser = require('body-parser');


app.use(express.static(__dirname + '/views'));

app.set('view engine', 'EJS');
app.use(bodyParser.urlencoded({ 
  
  extended: false 
}));

app.post('/result',function(req, res) {
    //密碼對應正確
    if(req.body.password === 1234){
    	res.render('result',{Pass:true});
    }
    //密碼失敗
    else{
    	res.render('result',{Pass:false});
    }
    res.end();
});
app.listen(3000);

輸入表單:

//password.html
<form method="POST" id="register" action="/result" class="col-md-offset-3 col-md-6">
			<h1>文章已被密碼保護</h1>
			
			<div class="form-group">
				<label for="country">輸入密碼</label>
				<input type="password" name="password" id="password" placeholder="輸入密碼" class="form-control">
			</div>
			<button type="submit" class="btn btn-primary">確認</button>
		</form>

結果頁面:

//result.ejs
<div class="container">
		
		<% if(Pass) {%>
			<h1>註冊成功!</h1>
    		<p>顯示文章內容</p>
    	<% } else { %>
    		<h1>註冊失敗!</h1>
    		<p >錯誤的密碼!!</p>
   		<% } %>
	</div>

上一篇
Day13. MVC網站框架(五)接收&處理客戶端資訊(續)
下一篇
Day.15 MVC網站框架(七)Session&Cookie
系列文
通過Node.js了解後端運作原理!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言