vue系列 前后端渲染+前后端路由

第一个阶段：后端渲染

后端路由(映射表)

后端处理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对应一个网页，一个页面一个组件