Firebase - 从 Web 应用程序表单将新数据写入数据库答案

【问题标题】：Firebase - write new data to database from web application formFirebase - 从 Web 应用程序表单将新数据写入数据库
【发布时间】：2018-10-14 22:24:49
【问题描述】：

我编写了一个相当简单的表单以发送到我的 Firebase 数据库，但我的数据库似乎没有使用来自我的 submit.html 页面的新数据进行更新。我对 Firebase 很陌生，我参考了文档，但我确信我忽略了一些东西。出于测试目的，此阶段的 Web 应用程序旨在简单地将名字和姓氏发送到我的数据库，列在名为 graduate 的集合下。

我还想为它分配一个唯一的 documentID/Auto-ID。根据Firebase documentation：

[...] Firebase JavaScript 客户端提供了一个 push() 函数为每个新孩子生成一个唯一的 ID 或密钥。通过使用独特的子键，多个客户端可以将子键添加到同一位置同时不用担心写冲突。

这似乎正是我正在寻找的，因此我在下面的函数中包含了推送调用。

我还应该提到我已经为我的数据库编写了以下规则：

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": true,
    ".write": true
  }
}

无论如何，这是我的代码：

我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Student Tracking</title>
        <script src="authentication.js"></script>
        <link rel="stylesheet" href="animate.css">
        <link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="app.js"></script>
    </head>
    <body>
    <div id="container">
            <header>
                <img src="logo.png" class="logo">
                <h1 class="englogo">Department of English</h1>
                <div class="nav">
                    <ul>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="submit.html">Submit</a></li>
                        <li><a href="query.asp">Query</a></li>
                    </ul>
                </div>
                <div id="contentform">
                    <form id="newUserForm">
                        <h3>Complete the following form to add your student information
                            to the database.
                        </h3>
                        <label for="Field1">First Name:</label><br>
                        <input id="userfName" name="Field1" type="text" value=""><br><br>
                        <label for="Field2">Last Name:</label><br>
                        <input id="userlName" name="Field2" type="text" value=""><br><br>
                        <label for="Field3"></label><br>
                        <input id="saveForm" name="saveForm" type="button" value="Submit Form">
                    </form>
                </div>
            </header>
        </div>
    </body>
</html>

我的app.js：

var config = {
    apiKey: "apiKey",
    authDomain: "authDomain",
    databaseURL: "url",
    projectId: "proID",
    storageBucket: "SB",
    messagingSenderId: "sendID"
    };
firebase.initializeApp(config);

var rootRef = firebase.database().ref().child('graduate');

$('#saveForm').click(function(){
    rootRef.push().set({

        firstName:$('#userfName').val(),
        lastName:$('#userlName').val()
    });
})

我的 CSS：

.logo {
    display: inline-block;
    margin: auto 0;
}

.google {
    color: #0099CC; 
    background: transparent;
    border: 1px solid #0099CC;
    border-radius: 6px;
}

.nav {
    position: relative;
    float: right;
    padding: 60px 20px 15px 10px;
    text-align: right;
    z-index: 1;
    background: white;
    margin: 0 auto;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav ul li {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1.3em;
}

.nav li a {
    text-decoration: none;
    color: black;
    margin: 4px;
}

h1.englogo {
    display: inline-block;
    padding-left: 1%;
    font-family: 'Cormorant', serif;
    position: relative;
    bottom: 15px;
}

header {
    height: 100px;
    width: 100%;
    z-index: 10;
    position: fixed;
    border-bottom: solid thin;
    background-color: white;
}

#content {
    width: 100%;
    text-align: center;
    position: relative;
    top: 200px;
    height: 1500px;
    font-family: 'Roboto', sans-serif;
}

#contentForm {
    widows: 100%;
    position: relative;
    top: 150px;
    height: 1500px;
}

form {
    width: 100%;
    position: relative;
    top: 90px;
    height: 1500px;
    font-family: 'Roboto', sans-serif;
    border: none;
}

【问题讨论】：

这里有几个问题。 1）您的规则要求用户登录，但您不在任何地方使用 Firebase 身份验证。请参阅here 以开始使用 2) 您正在使用实时数据库，但正在显示 Cloud Firestore 的安全规则。虽然这两个数据库都是 Firebase 的一部分，但它们是完全独立的，一个的安全规则对另一个没有影响。要设置正确的安全规则，请参阅stackoverflow.com/questions/52126720/…
Firebase 身份验证发生在index.html 页面上，该页面重定向到home.html。此外，不幸的是，切换到实时并更改规则并没有解决我的问题。
您可能仍然有问题，但是更改错误的规则肯定也会确保它不起作用。如果您展示您的新规则，我可以检查并（它们确实看起来正确）投票重新提出问题。
我的规则已经在原帖中更新了。
有了这些规则，他们就无法拒绝写操作。如果您在rootRef.push().set({ 上设置断点，它真的会命中该代码吗？另外：如果将当前写入替换为rootRef.push(true);，写入是否会进入数据库？

标签： javascript firebase firebase-realtime-database

【解决方案1】：

我怀疑您的根引用可能已关闭。也许试试这个：

var ref = firbase.database().ref(<ROOT_REF>)
var rootRef = ref.child('graduate')

【讨论】：

【解决方案2】：

您在数据库中更改了授权，默认情况下只有在用户登录时才允许写入。

【讨论】：

【解决方案3】：

我能够使我的程序正常工作。根据this site，我需要将我的.js 文件移出头部。我将它们移到了结束 body 标记之前。

<!DOCTYPE html>
<html>
    <head>
        <title>Department of English | Student Tracking</title>
        <script src="https://www.gstatic.com/firebasejs/5.5.3/firebase.js"></script>
        <link rel="stylesheet" href="animate.css">
        <link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
       <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
            <header>
                <img src="olemiss.png" class="logo">
                <h1 class="englogo">Department of English</h1>
                <div class="nav">
                    <ul>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="submit.html">Submit</a></li>
                        <li><a href="query.asp">Query</a></li>
                    </ul>
                </div>
                    <form id="newUserForm">
                        <h3>Complete the following form to add your student information
                            to the database.
                        </h3>
                        <label for="Field1">First Name:</label><br>
                        <input id="userfName" name="Field1" type="text" value=""><br><br>
                        <label for="Field2">Last Name:</label><br>
                        <input id="userlName" name="Field2" type="text" value=""><br><br>
                        <fieldset>
                                <legend>Program</legend>
                                <ul>
                                    <li>
                                      <label for="title_1">
                                        <input type="radio" id="undergraduate" name="title" value="Undergraduate" >
                                        Undergraduate
                                      </label>
                                    </li>
                                    <li>
                                      <label for="title_2">
                                        <input type="radio" id="graduate" name="title" value="Graduate">
                                        Graduate
                                      </label>
                                    </li>
                                </ul>
                        </fieldset><br>
                        <label for="Field3">Graduate Year (XXXX):</label><br>
                        <input id="gradDate" name="Field3" type="text" value=""><br><br>

                        <input id="saveForm" name="saveForm" type="submit" value="Submit Form">
                    </form>
            </header>
        </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="app.js"></script>
    <script src="authentication.js"></script>
    </body>
</html>

【讨论】：