Javascript 带Firebase的基本动态页面_Javascript_Firebase

Javascript 带Firebase的基本动态页面

javascript firebase

Javascript 带Firebase的基本动态页面,javascript,firebase,Javascript,Firebase,我是新手，所以请发发发慈悲吧。我正在努力我有一个部署的Firebase网站。用户类型：domain.com/1 它将在名为1的文件夹中打开文件index.html。效果很好现在，我想与我的朋友分享一个不同的内容，从数据库为同一页此内容有一个ID，它是456`。在Firebase数据库中，我有一行将此ID与内容匹配我想与我的朋友domain.com/1+在URL上共享ID 456，因此当他加载页面时，他将获得与456匹配的内容。（摘自DB）此URL路径应如何包含文件夹1和id 456？

我是新手，所以请发发发慈悲吧。我正在努力

我有一个部署的

Firebase

网站。用户类型：

domain.com/1

它将在名为

的文件夹中打开文件

index.html

。效果很好

现在，我想与我的朋友分享一个不同的内容，从数据库为同一页

此内容有一个

ID

，它是456`。在Firebase数据库中，我有一行将此ID与内容匹配

我想与我的朋友

domain.com/1+在URL上共享ID 456，因此当他加载页面时，他将获得与456匹配的内容。（摘自DB）
此URL路径应如何包含文件夹1和id 456？只有一条路吗
架构将是什么样子？用户使用此参数456加载此页面的html
（无内容），客户端的JS返回Firebase获取内容并加载到页面中？
（我已经这样做了，它可以工作（使用函数），但速度非常慢。）
用户是否可以询问类似于domain.com/1？456
的问题，并重定向到Firebase
上的函数，该函数将已经获取数据（456）并返回包含数据的页面*？（给服务器打一个电话）如果是，怎么做

怎么做的？2或3？
有不同的方法来实现您的需求。。。“经典”体系结构之一是有一个固定页面（index.html
），在Firebase实时数据库打开时查询它
传递要查询的数据库节点的值的一种方法是使用URL查询字符串，如下所示：domain.com/1？id=456
（请参阅）
以下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>


这可以在很多方面得到改进，但它太宽泛了，无法回答一个问题！举个例子：因为数据库查询是异步的，所以在网页中显示值可能需要一些时间。默认情况下，您可以在获得查询结果时显示微调器并将其隐藏（即在then（）
方法中）。另一个改进的例子是使用库或框架，如JQuery或更好的Vue.js、Angular或React。
有不同的方法来实现您的需求。。。“经典”体系结构之一是有一个固定页面（index.html
），在Firebase实时数据库打开时查询它
传递要查询的数据库节点的值的一种方法是使用URL查询字符串，如下所示：domain.com/1？id=456
（请参阅）
以下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>


这可以在很多方面得到改进，但它太宽泛了，无法回答一个问题！举个例子：因为数据库查询是异步的，所以在网页中显示值可能需要一些时间。默认情况下，您可以在获得查询结果时显示微调器并将其隐藏（即在then（）
方法中）。另一个改进示例是使用库或框架，如JQuery或更好的Vue.js、Angular或React。
谢谢！这就是我所做的，但在我看来有点愚蠢，不能从服务器请求url，它将返回已经加载了数据的html。为什么这种方式不是2019年的唯一方式？（一个服务器调用不是2个）。另一件事，我可以让用户问一些类似domain.com/1/345的问题，让URL变得更干净吗？然后一个函数会返回您显示的URL（1？id=345），这样共享链接会更干净吗？您的第一点是关于所谓单页应用程序（SPA）的优缺点，特别是相对于“三层”应用程序发送回包含标记和数据的HTML页面。例如，你会在web上找到大量“文献”。可以肯定的是，使用Firebase，你将无法实现第二种方法（或者可能通过使用一些云功能“调整”系统，但那将是疯狂的！）)。许多著名的网站都在遵循SPA模式，例如Gmail（只来回发送数据）。你很可能有一个类似于domain.com/1/345
的url，解析它（请参阅）然后提取最后一部分。谢谢你，你帮了很多忙。我找不到这两种方法的正确术语。关于干净的url，当我尝试访问domain.com/1/345时，他会在folder1中查找名为345的html文件，不会找到并返回错误。如果我编写了一个重定向到的服务器函数，并提取345它也不起作用（他仍然坚持搜索文件345）谢谢！我就是这么做的，但在我看来，有点愚蠢，不能从服务器上查询url，它将返回已经加载了数据的html。为什么这种方式不是2019年的唯一方式？（一个服务器呼叫不是2）。另一件事，我可以让用户问一些类似domain.com/1/345的问题，让URL更干净吗？然后一个函数将返回您显示的URL（1？id=345），这样共享链接将更干净？您的第一点是关于所谓的单页应用程序（SPA）的优缺点，特别是与“三层“应用程序”可以发回包含标记和数据的HTML页面。例如，你会在web上找到很多“文献”。可以肯定的是，使用Firebase，你将无法实现第二种方法（或者可能通过使用一些云功能“调整”系统，但那将是疯狂的！）)。许多著名的网站都在遵循SPA模式，例如Gmail（只来回发送数据）。你很可能有一个类似于domain.com/1/345
的url，解析它（请参阅）然后提取最后一部分。谢谢你，你帮了很多忙。我找不到这两种方法的正确术语。关于干净的url，当我尝试访问domain.com/1/345时，他会查看名为345-ins的html文件