如何仅使用JS、HTML和CSS从Firebase检索和显示数据

<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-database.js"></script>

// 初始化Firebase
firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
});

// 获取数据库引用
const database = firebase.database();

// 获取"users"节点的引用
const usersRef = database.ref("users");

// 监听数据变化
usersRef.on("value", (snapshot) => {
  // 获取数据
  const users = snapshot.val();

  // 遍历数据并显示
  for (const userId in users) {
    const user = users[userId];
    console.log(user.name);
    console.log(user.email);
  }
});

<div id="usersContainer"></div>

// 获取"usersContainer"元素
const usersContainer = document.getElementById("usersContainer");

// 监听数据变化
usersRef.on("value", (snapshot) => {
  // 清空容器
  usersContainer.innerHTML = "";

  // 获取数据
  const users = snapshot.val();

  // 遍历数据并显示
  for (const userId in users) {
    const user = users[userId];

    // 创建一个用于显示用户信息的元素
    const userElement = document.createElement("div");
    userElement.innerHTML = `
      <h3>${user.name}</h3>
      <p>${user.email}</p>
    `;

    // 将元素添加到容器中
    usersContainer.appendChild(userElement);
  }
});