草庐IT

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

coder 2025-03-21 原文

在我基于 React 的单页应用程序中，我的页面分为两个 Pane 。

左 Pane :过滤器面板。

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

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

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

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

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

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

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

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

  • amazon.com、newegg.com -> 使用哈希 url。
  • kayak.com -> 因为他们有非常明确的关键词，他们使用 INDIA 的缩写形式，Bangalore 的 BLR 等缩写形式，并结合使用 这与否定逻辑进一步优化最大 url 长度。不是 已检查，但理想情况下这会在选择大量过滤器后中断。
  • flipkart.com -> 将字符串直接附加到查询参数并中断 突破限制后。验证了这一点。

最佳答案

回应@cauchy's answer ，我们需要区分哈希和加密。

散列

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

  1. 为每个请求散列服务器上过滤器的每个排列，以尝试匹配请求的散列(计算密集型)或
  2. 在服务器上存储 HashMap 到过滤器组合(内存密集型)。

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

加密

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

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

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

您在 your comment above 中提到

If we use some persistent store to save the mapping between this hash to actual filters, we would ideally want to segregate long-lived "permalinks" from short-lived ephemeral URLs, and use that understanding to efficiently expire the short-lived hashes.

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

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

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

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

  1. 保留所有现有受支持过滤器的持久记录。
  2. 在构建时，检查是否有任何新过滤器。如果是这样的话...
    1. 将这些过滤器添加到第 1 步的记录中。
    2. 散列所有新的过滤器排列(仅包含您的新过滤器的排列)并将它们存储在散列数据库中
  3. 检查是否删除了任何过滤器。如果是这样的话...
    1. 从第 1 步的记录中删除这些过滤器。
    2. 找到包含这些过滤器的排列的所有散列，或者...
      • 从数据库中删除这些散列(弱永久链接)，或者
      • 将该散列指向数据库中的合理替代散列(强永久链接)

关于javascript - 在单页应用程序中创建临时 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46629900/

中创javascript的stronglireactjsurlreduxreact-router

有关javascript - 在单页应用程序中创建临时 URL的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  3. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  4. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  5. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  6. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  7. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  8. ruby-on-rails - rails : save file from URL and save it to Amazon S3 - 2

    从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中，例如名称、大小等)？现在，我既不使用Paperclip，也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex

  9. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  10. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

随机推荐