JavaScript 的 FIrebase 实时数据库

Question

我正在尝试使用 JavaScript 和 firebase 实时数据库创建一个项目。现在我想在页面上列出数据库中的数据。但我无法尝试我的代码，因为出现此错误：

Uncaught TypeError: firebase.database is not a function at index.html:69

我在第 69 行的代码：

const issuesRef = firebase.database().ref('student/');

这是我的全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <title>Project</title>
</head>
<body>

    <button id="Insbtn">List items</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.2.2/firebase-app.js"> 
    </script>


    <script type="module">
    
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    const firebaseConfig = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "..."
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    import { getDatabase, ref, set, child, update, remove, onValue } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";


    const db = getDatabase();
    const issuesRef = firebase.database().ref('student/');

    function readIssues() {
        issuesRef.on("value", function(snapshot) {
            snapshot.forEach(snap => {
                const issue = snap.val();
                console.log(issue.NameOfStd);
            })
        }
    )}
    
    var insBtn = document.getElementById("Insbtn");
    insBtn.addEventListener('click', readIssues);


    </script>
</body>

</html>

Answer 1

您正在使用新的 Modular SDK 但使用旧的命名空间语法来创建 DatabaseReference 并监听它。尝试重构代码，如下所示：

import { getDatabase, ref, set, child, update, remove, onValue } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";

const db = getDatabase();
const issuesRef = ref(db, 'student');

function readIssues() {
  onValue(issuesRef, (snapshot) => {
    snapshot.forEach(snap => {
      const issue = snap.val();
      console.log(issue.NameOfStd);
    })
});

documentation 包含名称空间语法和函数语法的示例。

JavaScript 的 FIrebase 实时数据库

FIrebase realtime database with JavaScript

html

javascript

database

firebase

firebase-realtime-database