连接web与firebase实时数据库

Question

I am trying to make a webpage that can link with firebase database.我正在尝试制作一个可以与 firebase 数据库链接的网页。 When i run my program, there are 2 errors when i run my code:当我运行我的程序时，运行我的代码时出现 2 个错误：

Uncaught ReferenceError: getDatabase is not defined未捕获的 ReferenceError：未定义 getDatabase
Uncaught SyntaxError: Identifier 'database' has already been declared未捕获的 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;
}

This is how I want my dataset to look like in firebase这就是我希望我的数据集在 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

You're importing version 7 of the Firebase SDK, so you need to use namespaced syntax from the documentation.您正在导入 Firebase SDK 的版本 7，因此您需要使用文档中的命名空间语法。 You're doing that in firebase.initializeApp(firebaseConfig) , but not in const database = getDatabase(app) .您在firebase.initializeApp(firebaseConfig)中这样做，但不是在const database = getDatabase(app)中。

For version 8 and before, the equivalent is:对于版本 8 及之前的版本，等效为：

const database = firebase.database();

Also see the Firebase documentation on reading and writing from/to the database , which has examples in both the v8-and-before and the v9-and-after syntax.另请参阅 Firebase 关于从/向数据库读取和写入的文档，其中包含 v8-and-before 和 v9-and-after 语法的示例。

Update since you already declare const database = firebase.database();更新，因为您已经声明const database = firebase.database(); in functions.js, redeclaring it in the JavaScript block in your HTML is a syntax error.在 functions.js 中，在 HTML 的 JavaScript 块中重新声明它是一个语法错误。

A simple solution to fix that:一个简单的解决方案来解决这个问题：

...
// 👇 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
   });
});

连接web与firebase实时数据库

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-01-11 04:30:57

连接web与firebase实时数据库

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-01-11 04:30:57

解决方案1
0 已采纳 2022-01-11 04:30:57