渲染是指將數(shù)據(jù)代入模板的過(guò)程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
margin: 0 auto;
margin-top: 100px;
width: 500px;
height: 500px;
overflow: auto;
border: 1px solid;
}
.cont{
height: 1500px;
}
.con{
height: 50px;
margin-top: 50px;
margin-bottom: 150px;
background: yellowgreen;
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="cont">
<div class="con con-one">content-one</div>
<div class="con con-two">content-two</div>
<div class="con con-thr">content-three</div>
<div class="con con-fou">content-four</div>
</div>
</div>
</body>
</html>
position: sticky 粘性布局誓沸,適合滾動(dòng)場(chǎng)景
中間件(middleware)就是處理HTTP請(qǐng)求的函數(shù)盆偿,數(shù)據(jù)正式發(fā)給用戶之前撕阎,對(duì)數(shù)據(jù)進(jìn)行處理
use是express注冊(cè)中間件的方法,它返回一個(gè)函數(shù)
all方法表示斗这,所有請(qǐng)求都必須通過(guò)該中間件动猬,參數(shù)中的“*”表示對(duì)所有路徑有效
除了get方法以外,Express還提供post表箭、put赁咙、delete方法,即HTTP動(dòng)詞都是Express的方法
這些方法的第一個(gè)參數(shù)免钻,都是請(qǐng)求的路徑彼水。除了絕對(duì)匹配以外,Express允許模式匹配极舔。
app.get("/hello/:who", function(req, res) {
res.end("Hello, " + req.params.who + ".");
});
如果需要指定HTTP頭信息凤覆,回調(diào)函數(shù)就必須換一種寫法,要使用setHeader方法與end方法拆魏。
app.get('/', function(req, res){
var body = 'Hello World';
res.setHeader('Content-Type', 'text/plain');
res.setHeader('Content-Length', body.length);
res.end(body);
});
除了發(fā)送字符串盯桦,res.send方法還可以直接發(fā)送對(duì)象
res.sendfile用于發(fā)送文件
req.params.xxxxx 從path中的變量
req.query.xxxxx 從get中的?xxxx=中
req.body.xxxxx 從post中的變量
cors通信解決跨域問(wèn)題
對(duì)于簡(jiǎn)單請(qǐng)求慈俯,瀏覽器直接發(fā)出CORS請(qǐng)求。具體來(lái)說(shuō)拥峦,就是在頭信息之中贴膘,增加一個(gè)Origin字段。
如果Origin指定的域名在許可范圍內(nèi)略号,服務(wù)器返回的響應(yīng)刑峡,會(huì)多出幾個(gè)頭信息字段
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求,比如請(qǐng)求方法是PUT或DELETE玄柠,或者Content-Type字段的類型是application/json突梦。
非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求,會(huì)在正式通信之前随闪,增加一次HTTP查詢請(qǐng)求阳似,稱為“預(yù)檢”請(qǐng)求(preflight)。
除了Origin字段铐伴,“預(yù)檢”請(qǐng)求的頭信息包括兩個(gè)特殊字段撮奏。
(1)Access-Control-Request-Method
該字段是必須的,用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法当宴,上例是PUT畜吊。
(2)Access-Control-Request-Headers
該字段是一個(gè)逗號(hào)分隔的字符串,指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段户矢,上例是X-Custom-Header玲献。