时间戳

首页 > 解决方案 > 无法让 Firebase 连接到 HTML 页面

javascript - 无法让 Firebase 连接到 HTML 页面

问题描述

我正在为一个项目的前端工作，以显示从传感器收集的数据图表。我正在关注 Net Ninja 的关于连接到 Firebase 的 youtube 系列，并尝试在网上找到许多其他方法，但我没有尝试任何方法。我无法从我的 firebase 测试数据库中获取数据来显示，也无法显示其他人的示例数据。我希望对我可能错过的事情有所帮助。

const dataList = document.querySelector('#data-list');

// create element & render data
function renderData(doc) {
  let li = document.createElement('li');
  let time = document.createElement('span');
  let data = document.createElement('span');

  li.setAttribute('data-id', doc.id);
  time.textContent = doc.data().time;
  data.textContent = doc.data().data;

  li.appendChild(time);
  li.appendChild(data);

  dataList.appendChild(li);
}

// getting data
db.collection('sensorData').get().then(snapshot => {
  snapshot.docs.forEach(doc => {
    renderData(doc);
  });
});
<html>

<head>
  <script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-database.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <h1>test</h1>

  <div class="content">

    <form id="add-data-form"></form>

    <ul id="data-list"></ul>

  </div>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-database.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = { **
      FIREBASE DATA **
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const db = firebase.firestore();
    firebase.analytics();
  </script>

  <script src="app.js"></script>
</body>

</html>

当我启动索引时，我只看到“测试”标题，没有来自 firebase 的数据。我已经使用 powershell 来初始化数据库，但这并没有什么不同。任何帮助将不胜感激，谢谢

标签： javascripthtmlfirebasegoogle-cloud-firestore

解决方案

推荐阅读