使用 JavaScript 中的简单 Hello World Web 应用程序开始使用 Firebase
此示例将演示如何使用 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" } }
-
现在在浏览器中打开 index.html
-
你将在页面上看到文本值如下 -
-
现在,如果你返回到数据库并将文本子值更改为其他值,你将看到浏览器中的文本也会更改而不进行任何刷新或重新加载。这就是实时数据库在 Firebase 上的工作方式。