Я написал довольно простую форму для отправки в мою базу данных Firebase, но, похоже, моя база данных не обновляется новыми данными со страницы submit.html.Я довольно новичок в Firebase, и я ссылался на документацию, но я уверен, что что-то упустил.В целях тестирования веб-приложение на этом этапе предназначено просто для отправки имени и фамилии в мою базу данных, указанную в коллекции с именем graduate.
Я также хочу назначить ему уникальный идентификатор документа / Auto-ID.Согласно документации Firebase :
[...] клиенты Firebase JavaScript предоставляют функцию push (), которая генерирует уникальный идентификатор или ключ для каждого нового дочернего элемента.Используя уникальные дочерние ключи, несколько клиентов могут одновременно добавлять дочерние объекты в одно и то же место, не беспокоясь о конфликтах при записи.
Кажется, это именно то, что я ищу, и поэтому я 'мы включили 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;
}