前端路由与后端路由的思考

tuomao 发布于2019-08-20 18:22 / 1373人阅读

摘要：由于这种通信方式不需要页面的刷新动作，因而无论与后台发生了多少次通信，浏览器的会一直保持在初始地址不变。前端路由的值通常应用在单页面应用中。

后端路由

* path（路由分发）
    针对不同的路由对应不同的回调函数处理(req, res, next)
    * req;获取请求参数
    * res：返回请求数据
    * next: 调用后续的回调函数

前端路由

* 路由是根据不同的url去请求不同的页面内容
* 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url不同返回不同的页面来实现。
* 利用H5的history.pushState 和 history.replaceState ，这两个history新增的api，为前端操控浏览器历史栈提供了可能性
* 这两个Api都会操作浏览器的历史栈，而不会引起页面的刷新。
* 不同的是，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。
应用：单页面应用
优点和缺点：
    * 优点： 用户体验好，不需要每次向服务器发送请求请求页面数据，响应快
    * 缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存，

hash值得由来

历史：
    1、基于Ajax 的 Web 应用最为明显的特征在于使用了浏览器内部原生支持的 XMLHttpRequest对象与后台服务器进行数据通。
    2、由于这种通信方式不需要页面的刷新动作，因而无论与后台发生了多少次通信，浏览器的 URL 会一直保持在初始地址不变。
    3、这随之而来的一个问题便是不断变化的页面状态信息无法记录到浏览器的历史记录堆栈中，从而使得用户无法通过浏览器的前进 / 后退按钮在不同状态页面间进行切换。

解决思路：

浏览器能够支持在用户访问过的页面间进行前进 / 后退的操作，依赖于内部维持的 history 对象。
出于安全性的考虑，浏览器并不允许 JavaScript 脚本对该对象进行增删改之类写操作，
而只是可以通过 history. back/forward() 等方法进行访问。既然在页面状态发生变化时，
无法通过脚本直接去影响浏览器的历史信息，那么只有通过 URL 的变化来触发浏览器增加一条新的历史记录。
这也就是说需要将 Ajax 应用的不同页面状态与 URL 进行一种一对一的映射，并且能够在回退或前进到某一 URL 之时，
应用本身能够在页面无刷新的情况下跳转到正确的页面状态。如何对 Ajax 应用的初始 URL 进行改变，
而同时这种变化的切换又不会引起页面的重新加载呢？答案只有一个，那就是借助用于页面内资源片段定位目的
的“片段标识符”（fragment identifier），即 URL 中“#”符号后的字符串（hash string）。当浏览器向
服务器端请求资源时，片段标识符并不会连同 base URL 一同发往服务器端，而只是在得到服务器返回的结果
之后帮助浏览器快速定位到被相应的锚点（anchor）所标识的资源片段，即使无法找个对应的锚点，浏览器也并
不会报错。正是基于浏览器的这一特性，构建片段标识符与页面状态之间的映射关系成为了解决此类问题的基础。

hash值

将任意长度的二进制字符串通过一定的算法映射成一个固定长度的较小二进制字符串，这个字符串就是对应的hash值，主要特点就是唯一的，不可逆的。

前端路由的hash值(#)----->angular

hash通常应用在spa单页面应用中。因为通过不同的hash值映射的url来是的浏览器添加一条不同的url历史记录。

通过浏览器的pushstate、replaceState来操作，请求不同的浏览器记录达到请求不同的页面的效果

H5中提供的两个操作hash值得API来操作hash值

window.location.hash读取#值

window.onhashchange = func 监听hash改变

GPU云服务器云服务器前端与后端 html前端与后端前端与后端区别 web前端与后端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84421.html

前端框架模式的变迁

摘要：现在在前端的框架都是的模式，还有像和之类的变种独特的单向数据流框架。只要将数据流进行规范，那么原来的模式还是大有可为的。我们可以来看一下，框架的图示从图中，我们可以看到形成了一条到，再到，之后是的，一条单向数据流。前言前端框架的变迁，体系架构的完善，使得我们只知道框架，却不明白它背后的道理。我们应该抱着一颗好奇心，在探索框架模式的变迁过程中，体会前人的一些理解和思考本篇将讲述的是...

ssshooter 2019-08-22 11:11 评论0 收藏0
单页应用的部署方案

摘要：所以单页应用的部署，需要将所有的页面请求都返回，浏览器下载了后会自动解析并导航到对应页面。总结单页应用与以前的常规多页面应用还是有区别的，开发过程与后端解耦了，同时会出现跨域鉴权以及应用部署的问题。本文同步发布于我的个人博客上 - 单页应用的部署方案本文主要简单讲一下单页应用的开发及部署方法，默认你懂一些服务端知识及nginx知识，如果有任何可以在下方评论留言。单页应用 SPA（...

yanbingyun1990 2019-07-25 14:45 评论0 收藏0
构建前端项目

摘要：解决思路服务器端渲染服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。分离为什么需要前后端分离、web服务器与static服务器分离: 前端与后端耦合 (需求) 自动化、工程化的构建前端的代码 (基础条件) 模块化、组件化，项目共享代码 (...

mindwind 2019-08-23 13:51 评论0 收藏0
细说 Vue 组件的服务器端渲染

摘要：所以，这次就来聊聊组件的服务器端渲染。这种模式下，后端只提供接口，传统的服务器端路由模板渲染则都有层接管。这样，前端开发人员可以自由的决定哪些组件需要在服务器端渲染，哪些组件可以放在客户端渲染，前后端完全解耦，但又保留了服务器端渲染的功能。细说 Vue 组件的服务器端渲染声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解现在，前后端分离与客户端渲染已经成为前端开发的...

reclay 2019-08-23 17:51 评论0 收藏0