在单页应用程序中创建临时 URL

2024-01-09

在我的基于反应的单页面应用程序中,我的页面分为两个窗格。

左窗格:过滤器面板。

右窗格:网格(包含通过应用过滤器的数据的表)

总之,我有一个看起来与 amazon.com 非常相似的应用程序。默认情况下,当用户在浏览器中点击应用程序的根端点 (/) 时,我会从服务器获取最近 7 天的数据并将其显示在网格内。

过滤器面板有几个过滤器(例如,时间过滤器用于获取指定时间间隔内的数据,ID 用于搜索具有特定 ID 的数据等)以及附加在过滤器面板标题中的搜索按钮。点击搜索按钮通过在帖子表单主体内提供选定的过滤器来对服务器进行帖子调用,服务器返回与传递的过滤器匹配的数据,我的前端应用程序显示从网格内的服务器返回的数据。

现在,当有人点击过滤器面板中的搜索按钮时,我想在 URL 的查询参数中反映所选的过滤器,因为这将帮助我与网站的其他用户共享这些 URL,以便他们可以看到我应用的过滤器和仅查看与这些过滤器匹配的网格内的数据。

这里的问题是,如果在单击搜索按钮时,我使用带查询参数的 http get,由于不同浏览器对 URL 长度施加的限制,我最终会破坏应用程序。

请建议我正确的解决方案来创建此类 URL,这将帮助我在过滤器面板中设置选定的过滤器,而不会在我的应用程序中造成任何副作用。

可能的解决方案:考虑到由于不同浏览器的 URL 长度限制,我们无法直接在查询参数中添加纯字符串(注意:规范不限制 HTTP Get 请求的长度,但不同的浏览器实现自己的限制),我们可以使用类似 message摘要或散列(将任意长度的输入转换为固定长度的输出)并将其保存在数据库中,以便服务器理解请求并返回内容。这只是一个想法,我不确定这是否是解决这个问题的理想方法。

其他频繁使用的网站的行为:

  • amazon.com、newegg.com ->使用哈希 url。
  • 皮划艇网站 ->因为他们有非常明确的关键字,所以他们使用 缩写形式,例如 IN 代表印度,BLR 代表班加罗尔等,然后组合起来 这与否定逻辑进一步优化最大 url 长度。不是 检查过,但理想情况下,在选择大量过滤器后,这会中断。
  • Flipkart.com ->将字符串直接附加到查询参数并中断 突破限制后。验证了这一点。

作为回应@cauchy的回答 https://stackoverflow.com/a/48125831/2479481,我们需要区分hashing and 加密.

Hashing

哈希必然是不可逆的。为了将哈希映射到特定的过滤器组合,您需要

  1. 对每个请求对服务器上的过滤器的每个排列进行哈希,以尝试匹配请求的哈希(计算密集型)或
  2. 在服务器上存储哈希到过滤器组合的映射(内存密集型)。

对于绝大多数情况,选项 1 会太慢。根据过滤器和选项的数量,选项 B 可能需要相当大的地图,但它仍然是您的最佳选择。

加密

在此方案中,服务器将其公钥发送给客户端,然后客户端可以使用它来加密其过滤器选项。然后,服务器将使用其私钥解密加密数据。这很好,但是您的加密数据将不是固定长度的。因此,随着选择更多选项,您会遇到相同的参数长度不确定的问题。

因此,为了确保您的 URL 对于任意数量的过滤器和选项来说都是简短的,您需要在服务器上维护 hash->selection 的映射。

我们应该如何处理永久链接和临时链接?

你提到的你上面的评论 https://stackoverflow.com/questions/46629900/creating-temp-urls-in-single-page-applications/48157489#comment83228591_48125831

如果我们使用一些持久性存储来保存此哈希值与实际过滤器之间的映射,那么理想情况下,我们希望将长期“永久链接”与短期临时 URL 分开,并使用这种理解来有效地使短期哈希值过期。

您可能在服务器上有一个服务来处理您的应用程序中支持的所有过滤器。这里的技巧是让该服务也管理哈希图。随着添加/删除更多过滤器和选项,服务将需要重新散列过滤器选择的每个排列。

如果您需要对永久链接的强大支持,那么每当您删除过滤器或选项时,您都需要维护“过期”哈希值并更改其映射以指向合理的替代哈希值。

我们什么时候更新数据库中的哈希值?

有很多选择,但我通常更喜欢构建时间。如果您使用的是 Jenkins、Travis、AWS CodePipeline 等 CI 解决方案,那么您可以添加构建步骤来更新数据库。基本上,你会...

  1. 保留所有现有支持的过滤器的持久记录。
  2. On build, check to see if there are any new filters. If so...
    1. 将这些过滤器添加到步骤 1 中的记录中。
    2. 散列所有新的过滤器排列(仅包含新过滤器的排列)并将其存储在散列数据库中
  3. Check to see if any filters have been removed. If so...
    1. 从步骤 1 的记录中删除这些过滤器。
    2. Find all the hashes for permutations that include those filters and either...
      • 从数据库中删除这些哈希值(弱永久链接),或者
      • 将该哈希指向数据库中合理的替代哈希(强永久链接)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在单页应用程序中创建临时 URL 的相关文章

  • 不和谐机器人 |不和谐.js |类型错误:无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map
  • TypeError: props.render 不是一个函数(React hook 形式)

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 检测并缩短字符串中的所有网址

    假设我有一条字符串消息 您应该将 file zip 上传到http google com extremelylonglink zip http google com extremelylonglink zip not https stack
  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • 问题:为什么React Native Video不能全屏播放视频?

    我正在react native 0 57 7 中为android和ios创建一个应用程序并使用反应本机视频 https github com react native community react native video播放上传到的视频
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

随机推荐