什么是后端渲染，后端路由，前端渲染，前端路由，前后端分离，单页面富应用

image.png

一，后端渲染：

网页开发初期，没有js，没有ajax，网页全部由后端写，由jsp,php写，动态数据由java写好，在后端写完后直接把写好的，并且渲染好了的HTML直接传给浏览器展示。给到浏览器的时候，只有css,html。

image.png

后端路由：

image.png

由后端（服务器）处理URL与页面之间的映射关系。
根据你输入的url映射不同的网页。

二，前端渲染：

（一）前后端分离：

当输入url敲了回车后，浏览器解析url，提供静态资源服务器请求下来html+css+js（就是我们前端写完代码打包放到静态服务器的那个文件），然后浏览器解析这个文件，发现里面有网络请求，就根据网络api接口去向提供API接口的服务器发送请求，得到想要的数据，得到以后继续由我们前端写的js代码来解析、处理、渲染。整个过程，都是由前端来完成，后端只是提供接口。（有的公司的服务器分为静态资源服务器和提供api接口的服务器，有的不分。因为有的服务器可以同时做作为静态资源服务器和和提供api接口的服务器）

image.png

在前后端分离时期 ，一个url对应一套html+css+url，在静态资源服务器中放着好几套，当你搜索一个url，请求下来的是url对应的那一套html+css+url。 这种url与资源的映射关系由后端管理，所以也是后端路由。

（二）前端路由

就是在前后端分离的基础上加了一层前端路由。即前端来维护一条路由规则。

单页面富应用阶段：

SPA 单页面富应用 simple page web application
整个网页只有一个html页面
但是在SPA页面中，静态资源服务器中只有一个html页面，甚至css、js可能也只有一套，当搜索url，浏览器就将这套资源全部请求下来，当想要显示对应的数据的时候，就从这套资源中抽离出想要的数据，这个所需的技术就是前端路由。当用前端路由请求对应页面时，生成页面对应的url，抽离的数据就是一个组件。这种url对应一个页面的情况，是在前端来管理的，所以是前端路由
前端路由核心：
改变URL，但是页面不进行整体的刷新。
如何实现：

1，改变hash:
location.hash = "xxxx"

image.png

2,使用HTML5的history
history.pushState({},"","home") //home是路径

history的pushState类似于栈结构的push

history的repalceState({},"","home")
history的repalceState是替换 不是压栈，不能返回

pushState之后可使用history.go(）前进后退

image.png

history.back()等价于history.go(-1)
history.forward()则等价于history.go(1)
这三个方法相当于浏览器界面的前进后退