将网络与 Firebase 实时数据库连接答案

【问题标题】：Connect web with firebase realtime database将网络与 Firebase 实时数据库连接
【发布时间】：2022-01-11 04:27:21
【问题描述】：

我正在尝试制作一个可以与 firebase 数据库链接的网页。当我运行我的程序时，运行我的代码时出现 2 个错误：

未捕获的 ReferenceError：未定义 getDatabase
未捕获的 SyntaxError：标识符“数据库”已被声明

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Firebase - Client Side </title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <main>
       <form>
           <label for="tokenId">Token ID</label><br>
           <input type="text" name="tokenId" id="tokenId"><br>
           <label for="name">Name</label><br>
           <input type="text" name="name" id="name"><br>
           <label for="desc">Description</label><br>
           <input type="text" name="desc" id="description"><br>
           <label for="add">Address</label><br>
           <input type="text" name="address" id="address"><br>
           <button id="addBtn" class="btn waves-effect waves-light">Add</button>
           <button id="updateBtn" class="btn waves-effect waves-light">Update</button>
           <button id="removeBtn" class="btn waves-effect red-darken-1">Remove</button>
       </form>

   </main>
   <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js"></script>
   <script>
       var firebaseConfig = {
           apiKey: "APIKEY",
           authDomain: "firebaseapp.com",
           databaseURL: "https://firebasedatabase.app",
           projected: "firebase",
           storageBucket: "firebase.appspot.com",
           messagingSenderId: "123",
           appId: "123",
           measurementId: "123"
       };

       // Initialize Firebase
       firebase.initializeApp(firebaseConfig);

       // Get a reference to the database service
       const database = getDatabase(app);
   </script>

   <script type = "text/javascript" src="functions.js"></script>
</body>
</html>

const tokenId = document.getElementById("tokenId");
const name = document.getElementById("name");
const description = document.getElementById("description");
const address = document.getElementById("address");

const addBtn = document.getElementById("addBtn");
const updateBtn = document.getElementById("updateBtn");
const removeBtn = document.getElementById("removeBtn");

const database = firebase.database();
const rootRef = database.ref('tokens');

addBtn.addEventListener('click', (e) => {
   e.preventDefault();
   rootRef.child('tokens').set({
       token_id: tokenid.value,
       Name: name.value,
       Desc: description.value,
       Address: address.value
   });
});

* {
   padding: 0;
   margin: 0;
}

main {
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

form {
   width: 400px;
   border: 1px solid #EBEBEB;
   padding: 5rem;
}

button {
   margin-top: 2rem;
}

这就是我希望我的数据集在 firebase 中的样子

{
 "tokens": {
   "0": {
     "tokenid":"E3",
     "name": "H",
     "description":"Nice Food"
     "address":"A"
   },
   "1": {
     "tokenid":"E1",
     "name": "B",
     "description":"Nice Food"
     "address":"A"
   },
   "2": {
     "tokenid":"C1",
     "name": "B",
     "description":"Nice Food."
     "address":"A"
   }
 }
}

【问题讨论】：

标签： javascript firebase firebase-realtime-database

【解决方案1】：

您正在导入 Firebase SDK 的第 7 版，因此您需要使用文档中的 namespaced 语法。你在 firebase.initializeApp(firebaseConfig) 中这样做，但不是在 const database = getDatabase(app) 中。

对于版本 8 及之前的版本，等效为：

const database = firebase.database();

另请参阅 reading and writing from/to the database 上的 Firebase 文档，其中包含 v8-and-before 和 v9-and-after 语法的示例。

更新，因为您已经在 functions.js 中声明了 const database = firebase.database();，因此在 HTML 的 JavaScript 块中重新声明它是一个语法错误。

一个简单的解决方案：

...
// ? Remove these 
// const database = firebase.database();
// const rootRef = database.ref('tokens');

addBtn.addEventListener('click', (e) => {
   e.preventDefault();
   // ? Change this
   firebase.database().ref('tokens').set({
       token_id: tokenid.value,
       Name: name.value,
       Desc: description.value,
       Address: address.value
   });
});

【讨论】：

我更改了它，但我仍然收到错误。它们是：1）未捕获的语法错误：已声明标识符“数据库”（functions.js）2）未捕获的 FirebaseError：Firebase：未创建 Firebase App '[DEFAULT]' - 调用 Firebase App.initializeApp() (app/无应用程序）。在 f (firebaseNamespaceCore.ts:114:27) 在 Object.n [作为数据库] (firebaseNamespaceCore.ts:196:31)