我正在尝试使用Firebase创建新闻订阅源应用程序。我正在使用基本功能，但是发生了一些错误。
错误1）当您输入名称和消息，然后单击“提交”时，该条目成功登录到Firebase，然后添加到新闻提要div中。如果刷新页面，以前显示的条目将不再存在，但是仍在数据库中。即使刷新页面，如何使条目在页面上保持可见？
错误2）同样，当您输入名称和消息时，单击“提交”，该条目成功登录到Firebase，然后添加到新闻提要div中。如果然后输入带有新消息的新名称并单击提交，则我发布的第一条消息和我发布的第二条消息在新闻源中均重复。它们不会在Firebase中重复，每个仍然只有一个条目。我不明白我的代码在哪里创建了重复项。
错误3）我可以通过单击角落的x图标来成功删除条目。单击后，该条目将在firebase中删除，并且我的代码触发窗口刷新。就像我的第一个错误一样，页面刷新后，即使其余条目仍在firebase中显示，它们也不再显示。
该数据库当前有一个我在其中创建的条目。
$(document).ready(function() {
// Initialize Firebase
var config = {
apiKey: "AIzaSyAd7fKr96e5ZEdVn5181Czw-FElJRXUouc",
authDomain: "fraud-team-news-feed.firebaseapp.com",
databaseURL: "https://fraud-team-news-feed.firebaseio.com",
projectId: "fraud-team-news-feed",
storageBucket: "fraud-team-news-feed.appspot.com",
messagingSenderId: "393350782314"
};
firebase.initializeApp(config);
var database = firebase.database();
$("#submit").on("click", function() {
event.preventDefault();
var comment = $(".comment");
var nameEntry = $("#name").val().trim();
var messageEntry = $("#message").val().trim();
var d = new Date();
var year = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dd = d.getDate();
var mm = d.getMonth();
var month = year[mm];
var yyyy = d.getFullYear();
var today = month + " " + dd + ", " + yyyy;
database.ref().push({
Name: nameEntry,
Date: today,
Message: messageEntry,
});
$("#name").val("");
$("#message").val("");
database.ref().on("child_added", function(snapshot) {
var sv = snapshot.val();
var key = snapshot.key;
var newEntry = '<div class="row1"><div class="specialist-name">' + sv.Name + '</div><img src="https://connectme.apple.com/servlet/JiveServlet/previewBody/1508898-102-1-10580249/cross.png" class="delete-icon" id="' + key + '"></div><div class="row2"><div class="message-text">' + sv.Message + '</div></div><div class="row3"><div class="date">' + sv.Date + '</div></div>';
newDiv = document.createElement('div');
$(newDiv).addClass("comment").html(newEntry).prependTo($(".news-feed"));
});
$(".delete-icon").on("click", function() {
console.log("clicked");
var id = $(this).attr('id');
console.log(id);
var key = id;
firebase.database().ref().child(key).remove();
window.location.reload();
});
});
});.container {
width: 400px;
border-right: 1px solid black;
font-size: 15px;
font-family: arial;
}
.comment {
border-bottom: 1px solid black;
padding: 10px;
line-height: 1.2;
}
.row1 {
display: flex;
justify-content: space-between;
}
.row3 {
text-align: right;
font-size: 13px;
color: gray;
}
.specialist-name {
font-weight: bold;
}
.delete-icon {
height: 12px;
}
.new-comment-section p {
margin-bottom: 5px;
font-weight: bold;
color: teal;
}
.name,
.message {
border: 1px solid teal;
border-radius: 5px;
font-size: 13px;
padding: 7px;
width: 350px;
}<!DOCTYPE html>
<html>
<head>
<title>News Feed</title>
<link rel="stylesheet" type="text/css" href="./news-feed.css">
</head>
<body>
<div class="container">
<div class="news-feed"></div>
<div class="new-comment-section">
<p>Name:</p>
<input type="text" placeholder="Name" class="name" id="name">
<p>Message:</p>
<textarea type="text" placeholder="Message" class="message" id="message" rows="5"></textarea>
<br>
<input type="submit" value="submit" class="submit" id="submit">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.4/firebase.js"></script>
<script type="text/javascript" src="./news-feed.js"></script>
</body>
</html>
答案 0 :(得分：0)
所有错误均来自以下事实：您在数据库内内部查询了按钮触发的代码段。
所以：
错误1 / ，当您仅刷新页面时，您不会查询数据库（除非您单击按钮），因此您看不到任何记录。页面加载时，您应该查询数据库，请参见下面的代码，提出可能的解决方案。
错误2 / 该错误源于以下事实：每次单击按钮查询整个数据库，因为使用child_added，“（首先）触发该事件一次对于每个现有的孩子”，请参见https://firebase.google.com/docs/database/web/lists-of-data#listen_for_child_events
错误3 / ：看到错误1。由于您没有单击按钮，因此数据库中没有任何内容。
因此，一种可能性是从按钮的代码中删除数据库侦听器，并在document为“就绪”（即$(document).ready(function () {})之内）时触发它，如下所示：
$(document).ready(function () {
// Initialize Firebase
var config = {
apiKey: "AIzaSyAd7fKr96e5ZEdVn5181Czw-FElJRXUouc",
authDomain: "fraud-team-news-feed.firebaseapp.com",
databaseURL: "https://fraud-team-news-feed.firebaseio.com",
projectId: "fraud-team-news-feed",
storageBucket: "fraud-team-news-feed.appspot.com",
messagingSenderId: "393350782314"
};
firebase.initializeApp(config);
var database = firebase.database();
database.ref().on("child_added", function (snapshot) {
var sv = snapshot.val();
console.log(snapshot.val());
var key = snapshot.key;
var newEntry = '<div class="row1"><div class="specialist-name">' + sv.Name + '</div><img src="https://connectme.apple.com/servlet/JiveServlet/previewBody/1508898-102-1-10580249/cross.png" class="delete-icon" id="' + key + '"></div><div class="row2"><div class="message-text">' + sv.Message + '</div></div><div class="row3"><div class="date">' + sv.Date + '</div></div>';
newDiv = document.createElement('div');
$(newDiv).addClass("comment").html(newEntry).prependTo($(".news-feed"));
});
$("#submit").on("click", function () {
event.preventDefault();
var comment = $(".comment");
var nameEntry = $("#name").val().trim();
var messageEntry = $("#message").val().trim();
var d = new Date();
var year = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dd = d.getDate();
var mm = d.getMonth();
var month = year[mm];
var yyyy = d.getFullYear();
var today = month + " " + dd + ", " + yyyy;
database.ref().push({
Name: nameEntry,
Date: today,
Message: messageEntry,
});
$("#name").val("");
$("#message").val("");
$(".delete-icon").on("click", function () {
console.log("clicked");
var id = $(this).attr('id');
console.log(id);
var key = id;
firebase.database().ref().child(key).remove();
window.location.reload();
});
});
});