Question

我对此并不陌生，所以请表示怜悯。我正在努力。

我有一个已部署的Firebase网站。用户类型：domain.com/1

它将打开名为index.html的文件夹中的文件1。效果很好。

现在，我想与我的朋友分享同一页面上与DB不同的内容。

此内容的名称为ID，为456`。在Firebase数据库中，我有一行将该ID与内容匹配。

我想在 URL 上与我的朋友domain.com/1 + the ID 456分享，因此，当他加载页面时，他将获得与456相匹配的内容。

此URL路径应如何包含文件夹1和ID 456？只有一种方法吗？
架构如何？用户使用此参数456加载此页面的html（无内容），客户端上的JS返回Firebase获取内容并加载到页面中？（我已经做到了，该方法（使用函数）有效，但是非常慢。）
用户可以问类似domain.com/1?456之类的内容，并重定向到 {strong> Firebase上的功能 ，数据（456）并返回*包含数据的页面*？（一个呼叫服务器）如何？

如何完成？ 2还是3？

Answer 1

有多种方法可以满足您的需求...一种“经典”架构是要有一个固定页面（在您的情况下为index.html），该页面在Firebase实时数据库打开时会对其进行查询。 / p>

传递要查询的数据库节点的值的一种方法是使用URL查询字符串，如下所示：domain.com/1?id=456（请参见How can I get query string values in JavaScript?）

以下HTML代码可以解决问题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://www.gstatic.com/firebasejs/5.9.3/firebase.js"></script>

    <script>
      // Initialize Firebase
      var config = {
        apiKey: 'xxxxxxx',
        authDomain: 'xxxxxxx',
        databaseURL: 'xxxxxxx',
        projectId: 'xxxxxxx'
      };
      firebase.initializeApp(config);

      var rootRef = firebase
        .database()
        .ref()
        .child('data');

      var urlParams = new URLSearchParams(window.location.search);
      var dbNodeID = urlParams.get('id');

      rootRef
        .child(dbNodeID)
        .once('value')
        .then(function(snapshot) {
          var dataItem1 = snapshot.val().dataItem1;
          document.getElementById('content').innerHTML = dataItem1;
        });
    </script>
  </head>

  <body>
    <div id="content"></div>
  </body>
</html>

具有如下数据库模型：

DBRoot
   - data
     - 456
       - dataItem1: "value-of-456"
     - 789
       - dataItem1: "value-of-789"

这可以通过许多方式加以改进，但是对于一个SO问答来说，它太宽泛了！只是一个例子：由于数据库查询是异步的，因此可能需要花费一些时间才能在网页中显示值。默认情况下，您可以显示微调框，并在获得查询结果时将其隐藏（例如，在then()方法中）。其他改进的例子是使用库或框架，例如JQuery或更好的Vue.js，Angular或React。

具有Firebase的基本动态页面

1 个答案: