我正在嘗試制作一個可以與 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" >Add</button>
<button id="updateBtn" >Update</button>
<button id="removeBtn" >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"
}
}
}
uj5u.com熱心網友回復：
您正在匯入 Firebase SDK 的第 7 版，因此您需要使用namespaced檔案中的語法。你在做firebase.initializeApp(firebaseConfig)，但不是在const database = getDatabase(app)。
對于版本 8 及之前的版本，等效為：
const database = firebase.database();
另請參閱有關從/向資料庫讀取和寫入的 Firebase 檔案，其中包含 v8-and-before 和 v9-and-after 語法的示例。
更新，因為您已經const database = firebase.database();在 functions.js 中宣告，在 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
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/408744.html
標籤：