时间戳

首页 > 解决方案 > HTML/CSS/JS 使用路径名重定向到主页

javascript - HTML/CSS/JS 使用路径名重定向到主页

问题描述

我有一个名为https://quarkedit.ga的代码编辑器（仅使用 HTML/CSS/JS ）

我正在尝试添加一个新功能，有点像https://scratchpad.io的做法。

功能是这样的：每当用户访问https://quarkedit.ga时，重定向到随机生成的代码加上域（如https://quarkedit.ga/green-panda-2066），并且下次用户访问页面重新加载该代码。

我的设计如下：

当用户访问 quarkedit.ga 时，获取路径名。如果路径名存在于数据库中（使用 Firebase 作为数据库），则显示代码，否则重定向回 quarkedit.ga 并生成一个新的随机代码并前往那里。

当用户离开 quarkedit.ga 时，获取代码并将其以路径名作为键保存在数据库中。

所以我试图实现这个，我遇到了一个问题。https://quarkedit.ga/blahblah给了我一个 404，因为那里没有 html 文件。

所以这是我需要帮助的内容：我如何使该步骤发挥作用，例如使 blahblah 返回 quarkedit.ga 但将 blahblah 保留在 URL 中以便我仍然可以访问它？

我想只使用Html、css 或 js。

标签： javascripthtmlfirebaseredirect

解决方案

基本上，你需要两件事：

  • 单入口点 Web 应用程序配置
  • 从入口点开始的 JavaScript 路由

单入口点配置看起来很像我在其他QA上发布的答案：

Options +FollowSymLinks -MultiViews 
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [NC,L,QSA]

如果用户有一个有效的 URL，它将被提供。其他所有内容都将在 index.html 中结束。无论哪种方式，浏览器中的 URL 都不会改变。

下一步取决于您的实际实施；你可以：

  • 在这些 URL 上生成物理文件，然后一切就绪。Web服务器的内置路由应该足够了。可能不需要将 URL 存储在数据库中。
  • 将代码页面的内容存储在不同的位置，则可能需要基于数据库查找的自定义重定向。一开始，一个简单的window.location.replace(codeUrl);就足够了。从长远来看，您可能想看看路由组件，例如router.js、navigo或Crossroads.js。
  • 将代码页面的内容存储在数据库中，并在需要时将其加载到编辑器中。数据库查找始终是必要的。

当请求一个不存在的 URL 时，您可以使用该 URL 作为新的空代码页的起点。

正如 Roko 所建议的，避免过早地创建和存储代码和相关的 URL。实际上，我建议要求用户通过单击按钮手动保存文件。如果不保存，一切都是暂时的，当浏览器窗口关闭时，内容就消失了。例如，这个在线正则表达式测试器就是这样工作的。

推荐阅读