新手求助：如何从Firebase实时数据库取数据并在网页表格展示

别担心，刚接触Firebase确实会有点摸不着头脑，我来一步步教你把实时数据库的数据拿到并展示到表格里～

第一步：准备Firebase配置与引入SDK #

首先确保你已经在Firebase控制台创建了项目，并且为Web应用生成了配置代码。接下来把这些内容添加到你的HTML中，放在</body>标签之前：

<!-- 引入Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>

<script>
  // 你的Firebase配置（从控制台复制过来的）
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    databaseURL: "你的DATABASE_URL",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的SENDER_ID",
    appId: "你的APP_ID"
  };

  // 初始化Firebase
  firebase.initializeApp(firebaseConfig);

  // 获取数据库引用（这里假设你的数据存在`inventory`节点下，根据实际情况修改）
  const dbRef = firebase.database().ref('inventory');
</script>

第二步：动态生成表格数据 #

接下来我们监听数据库节点的变化，把数据渲染到你的ex-table表格里。在刚才的<script>里继续添加：

// 获取表格对象
const table = document.getElementById('ex-table');

// 监听数据变化（实时更新）
dbRef.on('value', (snapshot) => {
  // 先清空现有数据（避免重复渲染，保留表头行）
  while (table.rows.length > 1) {
    table.deleteRow(1);
  }

  // 遍历数据库里的每一条数据
  snapshot.forEach((childSnapshot) => {
    const data = childSnapshot.val();
    // 创建新的表格行
    const row = table.insertRow();
    
    // 根据你的表头，创建对应的单元格并填充数据
    // 假设你的表头是Category、Name，对应数据里的字段
    const categoryCell = row.insertCell(0);
    const nameCell = row.insertCell(1);
    // 如果有更多字段，继续添加单元格
    
    categoryCell.textContent = data.category;
    nameCell.textContent = data.name;
    // 填充其他字段...
  });
}, (error) => {
  // 处理错误
  console.error('获取数据失败:', error);
});

重要提醒：数据库权限设置 #

默认情况下Firebase实时数据库是禁止读写的，所以你需要暂时调整规则来测试：

1. 打开Firebase控制台的实时数据库页面
2. 切换到规则标签
3. 把规则改成：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

⚠️ 注意：生产环境一定要把规则改回更严格的权限设置，避免数据泄露！

完整的HTML示例片段 #

把这些整合到你的现有代码里，大概是这样：

<body>
  <div id="bg">
    <img src="images/inventory.jpg" alt="">
  </div>
  <a href="#">
    <img id="logo" src="images/sitelogo.jpg" alt="Skype Logo">
  </a>
  <table style="width:100%" id="ex-table">
    <tr id="tr">
      <th>Category</th>
      <th>Name</th>
      <!-- 其他表头字段 -->
    </tr>
    <!-- 数据行会在这里动态生成 -->
  </table>

  <!-- Firebase SDK和脚本 -->
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>
  <script>
    const firebaseConfig = {
      // 你的配置信息
    };
    firebase.initializeApp(firebaseConfig);
    const dbRef = firebase.database().ref('inventory');
    const table = document.getElementById('ex-table');

    dbRef.on('value', (snapshot) => {
      while (table.rows.length > 1) {
        table.deleteRow(1);
      }
      snapshot.forEach((childSnapshot) => {
        const data = childSnapshot.val();
        const row = table.insertRow();
        const categoryCell = row.insertCell(0);
        const nameCell = row.insertCell(1);
        categoryCell.textContent = data.category;
        nameCell.textContent = data.name;
      });
    }, (error) => {
      console.error('获取数据失败:', error);
    });
  </script>
</body>

这样应该就能把数据库里的数据实时展示到表格里了，如果你的数据结构不一样，只需要调整data.XXX的字段名，还有表格单元格的数量就行～

内容的提问来源于stack exchange，提问作者Abhishek Kumar