Provide Best Programming Tutorials

什么是前端路由

前端路由的概念相对于后断路由而言的,好了问题来了,什么是前端路由?什么又是后断路由?他们之间有什么关系? 后端路由阶段 路由这个概念,是后端先出现的,所以,要想彻底了解前端路由,就需要理解后端路由。 在Web发展的早期,我们的一个url请求长这样 http://hometown.xxx.edu.cn/bbs/forum.php 有时还会有带`.asp`或`.html`或`.jsp`的路径,这就是所谓的SSR(Server Side Render),通过服务端渲染,直接返回页面。典型的工作流程式这样: 浏览器发出请求服务器通过端口(通常是80)监听到发送的请求,解析url路径服务器根据服务端路由的配置,返回相应的资源,这些资源可以是json数据,图片等浏览器根据数据包的Content-Type来决定如何解析数据 可以看到,前端并不负责任何渲染或者路由方面的工作,这些事情都由后端完成了。这样做的好处就是前端省事,不过缺点就是后端会很忙,另外,后端开发工程师也必须要处理前端的代码,在前端的代码里面嵌入后端逻辑。 请求的流程看起来是这个样子的 前端路由阶段 前端的发展经过了几个阶段,在前端的早期,采用的是纯后端路由,但是这种方案每次请求都要重新刷新页面言重的影响着交互体验而且对于开发人员并不友好。随着网络的发展,迫切需要一种方案来改善这种情况。Ajax,全程Asnchronous JavaScript And XML,就是这样一种技术解决方案。 1998年,微软的技术团队提出Ajax的解决方案,并在IE5通过ActiveX来实现了这项技术,在微软之后,其他的浏览器也相继通过XMLHttpRequest来实现了Ajax。 有了Ajax技术,用户交互就不用每次都刷新页面,体验带来了极大的提升。但是真正让这项技术发扬光大的,还是后来Google。Google借助该技术开发了一系列大名鼎鼎的应用,比如Gmail,Google Map等,这些应用的出现向人们展示了Ajax技术的强大和魅力,真正释放了众多开发人员的想象力,让其不仅仅局限于简单的数据交互和页面展示,为后来的异步交互式体验方式的繁荣发展带来了根基。 前后端分离阶段 有了Ajax技术,前端渲染就变成可能了,后端只需要提供API即可,格式随意,目前流行的是Restful API。 我们来看下图,这是典型的前端渲染架构图。 每次请求涉及到的数据,会使用Ajax从通过API的形式从后端请求过来。 每次请求涉及到的静态资源都会从静态资源服务器获取,这些资源包括HTML+CSS+JS,然后在前端对这些请求回来的资源进行渲染。这就是所谓的前端渲染。需要注意的是,客户端的每一次请求,都会从静态资源服务器请求文件。同时可以看到,和之前的后断路由不同,这时后端只是负责提供API了。 后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中. p这样做最大的优点就是前后端责任的清晰, 后端专注于数据上,…

Continue Reading
Close Menu