Jquery 使用Firebase创建新闻提要应用程序

我正在尝试使用firebase创建一个新闻提要应用程序。我很抱歉，我有基本的功能工作，但有一些错误发生

错误1）当您输入名称和消息，然后单击“提交”时，该条目将成功登录firebase，然后前置到新闻提要div。如果我刷新页面，以前显示的条目将不再存在，但它仍在数据库中。即使页面刷新，如何使条目在页面上保持可见

错误2）同样，当您输入名称和消息，然后单击“提交”时，该条目成功登录firebase，然后前置到新闻提要div。如果我随后输入新名称并单击“提交”，则我发布的第一条消息和我发布的第二条消息都会在新闻提要中重复。它们在firebase中不会重复，但仍然只有一个条目。我不了解在我的代码中复制的位置

错误3）我可以通过单击角落中的x图标成功删除条目。单击时，firebase中的条目将被删除，我的代码将触发窗口刷新。就像在我的第一个错误中一样，一旦页面刷新，其余条目将不再显示，即使它们仍在firebase中显示

数据库当前有一个我在其中创建的条目

$（文档）.ready（函数（）{
//初始化Firebase
变量配置={
apiKey:“AIzaSyAd7fKr96e5ZEdVn5181Czw Feljrxouc”，
authDomain:“欺诈团队新闻提要.firebaseapp.com”，
数据库URL:“https://fraud-team-news-feed.firebaseio.com",
projectId:“欺诈团队新闻提要”，
storageBucket:“欺诈团队新闻feed.appspot.com”，
messagingSenderId：“393350782314”
};
firebase.initializeApp（配置）；
var database=firebase.database（）；
$（“#提交”）。在（“单击”，函数（）{
event.preventDefault（）；
var注释=$（“.comment”）；
var nameEntry=$（“#name”）.val（）.trim（）；
var messageEntry=$（“#message”）.val（）.trim（）；
var d=新日期（）；
风险值年=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var dd=d.getDate（）；
var mm=d.getMonth（）；
var月=年[mm]；
变量yyyy=d.getFullYear（）；
今天的风险值=月份+“”+dd+“”，“+yyyy；
database.ref（）.push({
姓名：姓名输入，
日期：今天，
Message:messageEntry，
});
$（“#名称”）.val（“”）；
$（“#消息”）.val（“”）；
函数（快照）上的database.ref（）{
var sv=snapshot.val（）；
var key=snapshot.key；
var newEntry=''+sv.Name+''+sv.Message+''+sv.Date+''；
newDiv=document.createElement（'div'）；
$（newDiv）.addClass（“comment”）.html（newEntry）.prependTo（$（.news提要”）；
});
$（“.delete icon”）。在（“单击”，函数（）{
控制台日志（“单击”）；
var id=$（this.attr（'id'）；
console.log（id）；
var-key=id；
firebase.database（）.ref（）.child（key.remove（）；
window.location.reload（）；
});
});
});
.container{
宽度：400px；
右边框：1px纯黑；
字体大小：15px；
字体系列：arial；
}
.评论{
边框底部：1px纯黑；
填充：10px；
线高：1.2；
}
.第1行{
显示器：flex；
证明内容：之间的空间；
}
.row3{
文本对齐：右对齐；
字体大小：13px；
颜色：灰色；
}
.专家姓名{
字体大小：粗体；
}
.删除图标{
高度：12px；
}
.新意见第p节{
边缘底部：5px；
字体大小：粗体；
颜色：青绿色；
}
名称
.留言{
边框：1px实心青色；
边界半径：5px；
字体大小：13px；
填充：7px；
宽度：350px；
}

新闻提要
姓名：

信息：



您所有的错误都源于您在按钮触发的代码段内查询数据库

因此：

错误1/仅刷新页面时，不会查询数据库（除非单击按钮），因此不会看到任何记录。当页面加载时，您应该查询数据库，请参阅下面的代码，该代码提供了一个可能的解决方案

错误2/此错误源于以下事实：每次单击按钮时，您都会查询整个数据库，因为添加了
child\u
，“事件（首先）会为每个现有子项触发一次”请参阅

错误3/请参见错误1。由于您没有单击按钮，因此不会从数据库中提取任何内容

因此，一种可能是从按钮的代码中删除数据库侦听器，并在
文档
处于“就绪”（即
$（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();
            });

        });

    });

$（文档）.ready（函数（）{
//初始化Firebase
变量配置={
apiKey:“AIzaSyAd7fKr96e5ZEdVn5181Czw Feljrxouc”，
authDomain:“欺诈团队新闻提要.firebaseapp.com”，
数据库URL:“https://fraud-team-news-feed.firebaseio.com",
projectId:“欺诈团队新闻提要”，
storageBucket:“欺诈团队新闻feed.appspot.com”，
messagingSenderId：“393350782314”
};
firebase.initializeApp（配置）；
var database=firebase.database（）；
函数（快照）上的database.ref（）{
var sv=snapshot.val（）；
console.log（snapshot.val（））；
var key=snapshot.key；
var newEntry=''+sv.Name+''+sv.Message+''+sv.Date+''；
newDiv=document.createElement（'div'）；
$（newDiv）.addClass（“comment”）.html（newEntry）.prependTo（$（.news提要”）；
});
$（“#提交”）。在（“单击”上，函数（）{
event.preventDefault（）；
var注释=$（“.comment”）；
var nameEntry=$（“#name”）.val（）.trim（）；
var messageEntry=$（“#message”）.val（）.trim（）；
变量d=