第一个阶段:后端渲染
后端路由(映射表)
后端处理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对应一个网页,一个页面一个组件