Firebase - 无法将数据写入 Web 应用程序的实时数据库

问题描述 投票：0回答：1

我创建了一个简单的表单，用于将电子邮件地址存储到在 Firebase 控制台上创建的实时数据库（测试模式）中。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <form style="border:1px solid #ccc">
    <div class="container">
      <h1>Sign Up</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>

      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required id="email">

      <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-analytics.js";
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js";

        // Your Firebase configuration...

        const firebaseConfig = {
          apiKey: "data",
          authDomain: "data",
          databaseURL: "data",
          projectId: "data",
          storageBucket: "data",
          messagingSenderId: "data",
          appId: "data",
          measurementId: "data"
        };

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

        const analytics = getAnalytics(app);

        function storeData() {
          const email = document.getElementById("email").value;
          const reference = ref(database, "signup/")
          set(reference, {
            email: email
          });
        }
      </script>


      <button class="signupbtn" onclick="storeData()">Sign Up</button>
    </div>
    <!--</div>-->
  </form>






</body>

</html>

根据教程，我使用 npm 在 Windows 操作系统上安装了 firebase（版本 13.7.2）。但是，我创建的数据库中没有写入任何数据。我想知道可能是什么问题以及如何解决它？

javascript firebase firebase-realtime-database
1个回答
0
投票

您可以尝试以下代码并给我一些反馈吗？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Firebase Example</title>

  <link rel="stylesheet" href="style.css">

  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js';
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-analytics.js';
    import { getDatabase, ref, set } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js';

    // Your Firebase configuration
    const firebaseConfig = {
          apiKey: "data",
          authDomain: "data",
          databaseURL: "data",
          projectId: "data",
          storageBucket: "data",
          messagingSenderId: "data",
          appId: "data",
          measurementId: "data"
    };

    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const database = getDatabase(app);

    function storeData() {
      const email = document.getElementById("email").value;
      const reference = ref(database, "signup/");
      set(reference, {
        email: email
      }).then(() => {
        console.log("Data stored successfully!");
      }).catch((error) => {
        console.error("Error storing data: ", error);
      });
    }
    document.getElementById('sign-btn').addEventListener('click', storeData);
  </script>
</head>


<body>
  <form style="border:1px solid #ccc">
    <div class="container">
      <h1>Sign Up</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>

      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required id="email">

      <button type="button" id="sign-btn" class="signupbtn">Sign Up</button>
    </div>
  </form>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.