我正在尝试使用 Firebase 创建一个新闻提要应用程序。我的基本功能在工作，但是发生了一些错误。
错误 1(当您输入名称和消息，然后点击提交时，该条目将成功登录 Firebase，然后附加到动态消息div 中。如果我刷新页面，以前显示的条目将不再存在，但它仍在数据库中。如何使条目在页面上保持可见，即使页面已刷新？
错误 2(同样，当您输入名称和消息，然后点击提交时，该条目将成功登录 Firebase，然后附加到新闻提要div 中。如果我随后输入带有新消息的新名称并单击提交，则我发布的第一条消息和我发布的第二条消息都会在新闻提要中重复。它们在火力基地中不会重复，每个仍然只有一个条目。我不明白在我的代码中创建副本的位置。
错误 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>所有错误都来自这样一个事实，即在由按钮触发的代码段中查询数据库。
所以：
错误 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();
});
});
});