[图片上传失败...(image-b84e9e-1510470910952)]
后端概念:
模板引擎开发页面时:
http://abc.edu.cn/bbs/forum.php
这种就是我们所说的SSR(Server Side Render),通过服务器的渲染,直接返回页面。
1.浏览器发出请求
2.服务器监听到端口有请求过来,解析url路径
3.根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等)
4.浏览器根据数据包的Content-Type来决定如何解析数据
路由:与后端服务器交互的一种方式,通过不同的路径,请求不同的资源。
前端路由:
90年代初。大多数网页通过直接返回HTML进行显示,每次操作都需要重新刷新页面。
Ajax出现以后,Web页面的交互不用每次都刷新页面了。
异步交互体验为我们带来了SPA(单页应用),不仅页面交互不需要刷新,页面跳转页不需要刷新,为了实现单页应用,就有了前端路由。
实现原理:
本质:检测url的变化,截获url地址,然后解析来匹配规定好的路由规则。
2014以前一般通过改变#后面的hush值。因为hash值的改变不会导致发送请求,但是会触发hashchange
事件,我们可以通过这个事件得到hash
值的变化。
2014以后,因为HTML5标准发布,多了pushState
和replaceState
,通过这两个API可以改变url地址并且不会发送请求。这样子就不会多出一个#,更加美观。通过popstate
来监听。
带来的问题是:当用户进行刷新页面的操作,浏览器会给服务器发送请求。需要服务器的支持,也就是把所有路由重定向到根页面。也就是我们在nginx
里面经常做的配置:try_files $uri /index.html;
react-router源码:
componentWillMount() {
addEventListener("popstate", this.handlePop)
}
componentWillUnmount() {
removeEventListener("popstate", this.handlePop)
}
handlePop = () => {
this.forceUpdate()
}