使用 firebase 实时数据库连接网络

Question

我正在尝试制作一个可以 link 使用 firebase 数据库的网页。当我运行我的程序时，当我运行我的代码时有 2 个错误：

未捕获的 ReferenceError：未定义 getDatabase
未捕获的语法错误：标识符 'database' 已被声明

<!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"
   }
 }
}

Answer 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 及之前和 v9 及之后语法的示例。

更新，因为您已经在 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
   });
});

使用 firebase 实时数据库连接网络

Connect web with firebase realtime database

javascript

firebase

firebase-realtime-database