使用 JavaScript 中的简单 Hello World Web 应用程序开始使用 Firebase

Created: November-22, 2018

此示例将演示如何使用 JavaScript 在 Web 应用程序中开始使用 Firebase。

我们将在 Firebase 数据库中添加一个文本子项，并在我们的 Web 应用程序中实时显示。

让我们开始吧

转到 Firebase 控制台 - ![StackOverflow 文档](https://console.firebase.google.com> 并创建一个新项目。输入项目名称，国家/地区，然后单击“ 创建项目” 。 <https://i.stack.imgur.com/R1ogK.png)

现在在你的计算机上创建一个文件 index.html 。并添加以下代码。

  <body>
      <p>Getting started with Firebase</p>
      <h1 id="bigOne"></h1>
      <script>
            // your firebase JavaScript code here
      </script>

  </body>

现在转到 Firebase 控制台上的项目，你可以看到这一点
现在点击添加 Firebase 到你的网络应用程序。你将弹出以下内容，单击复制按钮

现在转到 index.html 文件并将代码段添加到脚本部分，如下所示

  <body>

    <p>Getting started with Firebase</p>
    <h1 id="bigOne"></h1>

    <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);
    </script>
  </body>

现在你已完成添加 Firebase 初始化代码。现在我们需要从数据库中获取文本值。

为此，请在 index.html 脚本中添加以下代码（已在最后一步中添加的 Initialize Firebase。不要重新添加） ****

  <script>

      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);

      // getting the text value from the database
      var bigOne = document.getElementById('bigOne');
      var dbRef = firebase.database().ref().child('text');
      dbRef.on('value', snap => bigOne.innerText = snap.val());

  </script>

现在我们已完成 index.html 文件，现在让我们去 Firebase 控制台中的数据库。
你现在会看到它的空白和空白。让我们在数据库中添加一个文本子项并为其添加任何值。 https://i.stack.imgur.com/RHRrW.jpg
现在点击“ 添加” 按钮。
现在进入数据库中的 RULES 部分。

出于开发目的，我们现在将启用所有读写查询。

  {
    "rules": {
        ".read": "true",
        ".write": "true"
      }
  }

StackOverflow 文档

现在在浏览器中打开 index.html
你将在页面上看到文本值如下 -
现在，如果你返回到数据库并将文本子值更改为其他值，你将看到浏览器中的文本也会更改而不进行任何刷新或重新加载。这就是实时数据库在 Firebase 上的工作方式。