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

Question

我有一个名为 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。

Answer 1

基本上，您需要两件事:

• 单一入口点网络应用配置
• 从入口点开始的 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在线正则表达式测试器的工作原理就是这样。