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对应一个网页,一个页面一个组件

posted @ 2022-04-05 19:07  我是一言  阅读(285)  评论(0编辑  收藏  举报