【发布时间】：2023-03-10 17:38:01
【问题描述】：
我正在尝试使用 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>【问题讨论】：
标签： jquery html firebase firebase-realtime-database