Question

我写了一个相当简单的表格发送到Firebase数据库，但是我的数据库似乎没有用submit.html页面上的新数据进行更新。我刚接触Firebase，已经参考了文档，但是我确定自己已经忽略了一些东西。出于测试目的，此阶段的Web应用程序仅用于将名字和姓氏发送到我的数据库中，列在名为graduate的集合下。

我还想为其分配一个唯一的documentID / Auto-ID。根据{{3}}：

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

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

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

{
  /* 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;
}

Answer 1

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

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

Answer 2

您已更改数据库中的授权，默认情况下，它仅允许在用户登录时进行写操作。

Answer 3

我能够使我的程序正常运行。对于this site，我需要将.js文件移到头部之外。我将它们移到了结束标签之前。

<!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>

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

3 个答案: