渲染是指将数据代入模板的过程
<!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 粘性布局,适合滚动场景
中间件(middleware)就是处理HTTP请求的函数,数据正式发给用户之前,对数据进行处理
use是express注册中间件的方法,它返回一个函数
all方法表示,所有请求都必须通过该中间件,参数中的“*”表示对所有路径有效
除了get方法以外,Express还提供post、put、delete方法,即HTTP动词都是Express的方法
这些方法的第一个参数,都是请求的路径。除了绝对匹配以外,Express允许模式匹配。
app.get("/hello/:who", function(req, res) {
res.end("Hello, " + req.params.who + ".");
});
如果需要指定HTTP头信息,回调函数就必须换一种写法,要使用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);
});
除了发送字符串,res.send方法还可以直接发送对象
res.sendfile用于发送文件
req.params.xxxxx 从path中的变量
req.query.xxxxx 从get中的?xxxx=中
req.body.xxxxx 从post中的变量
cors通信解决跨域问题
对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。
如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段
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
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为“预检”请求(preflight)。
除了Origin字段,“预检”请求的头信息包括两个特殊字段。
(1)Access-Control-Request-Method
该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT。
(2)Access-Control-Request-Headers
该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header。
网友评论