做一个留言板，求动态修改数据文件的思路？

2021-01-25 11:20发布

站内文章 / JavaScript
451 0 0

问题:

 

描述

自学前端三件套到了一定程度不知道干什么，想到去年大一用C语言实现学生管理系统的经历，便想到能不能自己所学的知识做一个CRUD完备的留言板，而且能通过网络去访问，于是便开始动手起来，由于JS实现代码太过繁琐，便采用Jquery实现，大致设想是这样：

我要将这个留言板的界面和基本功能用html+css+js实现一遍，然后把相关文件全部扔到服务器上去，这样如果我在A电脑上对服务器上的留言板发了一条评论，到B电脑上也能看到，总之，我想尝试利用自己手边的知识做一个真正的网络应用。

 

评论的数据都保存在commondata.json中，需要用js动态引用json，效果大概如下：

添加评论操作

 

数据文件,提前评论前

 

 

界面,点"提交"按钮提交评论

 

 

数据文件,提交评论后

 

删除评论操作

数据文件,删除评论前

 

 

界面,点击要删除的评论，图中为("Hello C")

 

 

数据文件,删除评论后

 

目前功能就添加和删除评论，但是都涉及用编程语言（即js文件上的代码）去动态引用并修改外部json的文件，结果就卡在这里了。

 

我设想的思路是，所有数据驱动都基于commentdata.json，首先把commentdata.json引进来，然后在msgboard.js中设置一个变量data将commentdata.json的值拷贝(只知道拷贝，js似乎没有文件指针这玩意)，在msgboard.js中处理完毕后将处理好的data覆写回commentdata.json

 

把commentdata.json引进来有三种方法：

1.Jquery的getJSON

2.NodeJS的require方法

3.ES6原生的import...from

 

但是到了拷贝变量阶段，全部卡住了

1.才发现data其实是指向result而已，一出函数result被销毁data的值也没了，带不出去

var data = [];
loadAll();
function loadAll() {
  msglist[0].innerHTML = '';
​
  $(document).ready(function () {                    //初始化载入
​
•    $.getJSON('commentdata.json', function (result) {
​
•      $.each(result, function (index, arr) {
​
•        data = result;
​
•        loadOne(result[index], index);
​
•      })
​
•      return result
​
•    })
​
•    console.log(data); //[]
​
  })
​
}
​
 console.log(data);//[]

2.NodeJS不支持浏览器环境，带了Node语法的js文件一引入html中展示就报错;

3.es6的引入语法要求在script标签前加type="module"，且只能是js文件，于是我把commentdata.json改成了js文件，作为json变量引入到msgboard.js

export var json = [
  {
    "content": "Export:Hello World!",
    "date": "2020-1-10"
  },
  {
    "content": "Export:Hello Python",
    "date": "2020-12-30"
  },
  {
    "content": "Export:Hello C",
    "date": "2020-1-10"
  }
  
  
]
​

 

但是加入了type="module"后，发现原来好好的del（）函数莫名不能用了，显示del is not defined；添加评论的代码部分倒是功能正常;

更毁灭性的打击是，在msgboard.js内不管是把引入的json赋给data,还是直接对json操作，改动都不会影响到commentdata文件；

import {json} from './commentdata.js'
​
var data = json;

 

submit.click(function () {
    if ($("textarea").val()) {
        var newRecord = {
            "content": $("textarea").val(),
            "date": new Date().toLocaleString()
        };
​
        var newRecordStr = JSON.stringify(newRecord);   //将新纪录转化为字符串打印
        console.log(`新记录:${newRecordStr}`);
        data.push(newRecord);
        json = data;                           //将处理好的data覆写回数据源
​
        $("textarea").val("");
        loadAll();
     
    }
    else {
        alert("你还没输入任何评论！");
    }
​
})

前者我还打算用一个json = data，试图实现将处理好的data覆写回数据源，结果报错：

 

到如今实在是束手无措了，不知道各位博友的思路如何，亦或说我要老老实实地找一个后端的培训视频看一遍？

 

相关文件如下：

msgboard.html

<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>留言板</title>
    <link rel="stylesheet" href="msgboard.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
​
<body>
    <!-- 留言板部分 -->
    <div class="msgboard">
        <textarea name="" id="" cols="40" rows="5" placeholder="在这里输入你的想法"></textarea>
        <button class="submit btn-default">提交</button>
        <ul class="msglist">
            评论列表
        </ul>
    </div>
​
​
    <!-- 评论部分 -->
    <!-- <li class='msgItem-prototype'>
        <div class='msgItem-user'>Anonymous</div>
        <div class='msgItem-content'>
            <p>示例</p>
        </div>
        <div class='msgItem-date'></div>
        <button class='msgItem-del btn-default'>删除</button>
    </li> -->
​
</body>
<script src = "msgboard.js">
​
</script>
​
</html>

msgboard.css

.msgboard textarea {
​
  /* width: 85vw; */
​
  height: 15rem;
​
  margin: 2rem 0;
​
}
​
​
​
.msgboard button {
​
  margin-right: auto;
​
}
​
​
​
.msgItem-prototype{
​
  display: none;
​
}
​
​
​
.msgItem-prototype,.msgItem {
​
  width: 21rem;
​
  padding: 0 1rem;
​
  border-bottom: 1px solid #767676;
​
  background-color: pink;
​
}
​
​
​
.msgItem-user {}
​
​
​
.msgItem-content {
​
  border: 1px solid #767676;
​
  height: 7rem;
​
}
​
​
​
.msgItem-del {
​
  display: inline-block;
​
  margin-left: 89%;
​
  color: blue;
​
  cursor: pointer;
​
}
​
​
​
.msgItem-content>p {
​
  height: 20vh;
​
  margin: 0;
​
}
​
​
​
hr {
​
  width: 100%;
​
}
​
​
​
.msgboard {
​
}

msgboard.js

//Power by Jquery
var date = new Date();
var submit = $(".submit");
var msgItem;
var msglist = $(".msglist");
​
// import {json}  from './commentdata.js'   //failed
// var data = json;
​
var data = [
    {
      "content": "Export:Hello World!",
      "date": "2020-1-10"
    },
    {
      "content": "Export:Hello Python",
      "date": "2020-12-30"
    },
    {
      "content": "Export:Hello C",
      "date": "2020-1-10"
    }
    
    
];
  
console.log(data);
​
loadAll();
​
function loadAll() {
    msglist[0].innerHTML = '';
    $(document).ready(function () {                                        //初始化载入
            $.each(data, function (index, arr) {
                loadOne(data[index], index);
            })
​
       
    })
}
​
function loadOne(newComment, index) //函数功能:接受一条对象，为该对象包装出新的评论DOM并显示
{
    msgItem = $("<li class='msgItem'></li>");                                   //评论DOM的创建和相关选取
    msgItem.append("<div class='msgItem-order'></div>");
    msgItem.append("<div class='msgItem-user'>Anonymous</div> ");
    msgItem.append("<div class='msgItem-content'><p></p></div>");
    msgItem.append(" <div class='msgItem-date'></div>");
    msgItem.append(`<button class='msgItem-del' onclick = 'del(${index})'>删除</button>`);
​
    var msg_order = msgItem.children('.msgItem-order');
    var msg_content = msgItem.children('.msgItem-content');
    var msg_date = msgItem.children('.msgItem-date');
​
​
    $(msg_order).text(`#${index}`);
    $(msg_content).text(newComment['content']);   //加载json中的数据到评论的DOM上
    $(msg_date).text(newComment['date']);
​
    msglist.append(msgItem)
}
​
submit.click(function () {
    if ($("textarea").val()) {
        var newRecord = {
            "content": $("textarea").val(),
            "date": new Date().toLocaleString()
        };
​
        var newRecordStr = JSON.stringify(newRecord);   //将新纪录转化为字符串打印
        console.log(`新记录:${newRecordStr}`);
        data.push(newRecord);
​
        // json = data;            //企图将改动覆写回数据源，失败
​
        $("textarea").val("");
        loadAll();
     
    }
    else {
        alert("你还没输入任何评论！");
    }
​
})
​
function del(e) {
    msgItem = $('.msgItem');
    var deleted = {
        "content": $(msgItem[e]).children('.msgItem-content').text(),
        "date": $(msgItem[e]).children('.msgItem-date').text()
    };
​
    var deletedStr = JSON.stringify(deleted);
    console.log(`要删除的记录:${deletedStr}`);
    data.splice(e, 1);
    loadAll();
}
​

 

commentdata.js（on）

export var json = [
​
 {
​
  "content": "Export:Hello World!",
​
  "date": "2020-1-10"
​
 },
​
 {
​
  "content": "Export:Hello Python",
​
  "date": "2020-12-30"
​
 },
​
 {
​
  "content": "Export:Hello C",
​
  "date": "2020-1-10"
​
 }
​

​
]

 

回答1:

前后端分离还是什么？ 前后端分离的话， 前端用vue就行，后端用springboot就行， 你这页面.....， 前端可以用一些UI框架 比如 vant 、 element ui 之类的， 如果要看教程的话， 网上有很多资源，



回答2:

逻辑上呢,提交留言后,向后端发送请求,后端入库,为了让前端显示,我们提交留言或同时还在重新加载一下查询留言后端接口,为了 让用户有更好体验加载的过程中我们一般使用ajax提交,思路是这样的,后面实现就简单了



标签： web前端 javascript 后端
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~