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

Question

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

我正在尝试添加一个新功能，有点像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。

Answer 1

基本上，你需要两件事：

• 单入口点 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。实际上，我建议要求用户通过单击按钮手动保存文件。如果不保存，一切都是暂时的，当浏览器窗口关闭时，内容就消失了。例如，this 在线正则表达式测试器就是这样工作的。