第一个阶段：后端渲染
后端路由（映射表）
后端处理url和页面之间的映射关系。（control）
后端渲染
前端访问一个url，后端通过jsp技术把页面（和数据）渲染好，返回（html+css）给前端。
jsp：html+css+java，java代码作用是从数据库中读取数据，并将它动态的放在页面中。
这样做的好处是，前端不需要去加载任何的js和css，可以直接交给浏览器展示，这样也有利于seo的优化。
缺点是：整个页面的模块由后端人员编写，如果前端开发要写页面，需要通过学习php和java等来编写，而且通常情况下html代码和数据以及对应的逻辑会混在一期，编写和维护都是灰常糟糕的事情。
第二个阶段：前后端分离
后端只提供API来返回数据，前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中，这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上，并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可。
在这个阶段，前端访问一个url，会先到静态资源服务器拿html+css+js（有很多套），然后浏览器执行js/jquery异步去后端拿数据，最后渲染出来。
在这个阶段，静态服务器里面维护的路由映射是这样的
html+css+js --> url1 页面1
html+css+js --> url2 页面2
html+css+js --> urln 页面n
第三个阶段：单页面富应用
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则。
SPA：Single Page Application
在这个阶段，静态服务器只会有一套html+css+js，当打开应用的时候会把整套html+css+js下载下来，然后在我们点击的时候生成url，生成的url会通过前端路由去到已下载好的静态资源去拿对应的组件，最后渲染出来。
前端路由（vue-router）：前端管理url和页面之间的映射关系。
前端路由的核心是：改变URL，但是页面不进行整体的刷新。
组件：url对应一个网页，一个页面一个组件