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

悬赏园豆：20 [已解决问题] 解决于 2021-01-25 11:04

描述

自学前端三件套到了一定程度不知道干什么，想到去年大一用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"

 }



]

web前端 javascript 后端

另一种开始 | 初学一级 | 园豆：119
提问于：2021-01-14 19:12

< >

最佳答案

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

收获园豆：20

人间春风意 | 老鸟四级 |园豆：2784 | 2021-01-15 10:03

请问大佬，我现在的这个文件结构算前后端分离吗？

另一种开始 | 园豆：119 (初学一级) | 2021-01-15 10:43

其他回答(2)

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

小小咸鱼YwY | 园豆：3312 (老鸟四级) | 2021-01-15 10:36

仔细看我的问题，你说的后端在这个例子上是指commentdata.json吗？
我现在不知道怎么用js代码动态修改它，AJAX好像也只能引用不能修改。

支持(0) 反对(0) 另一种开始 | 园豆：119 (初学一级) | 2021-01-15 10:41

@另一种开始: 一般这种留言实际开发都是入库的而不是做缓存,一般都是永久存在后端,ajax只是请求接口获得数据,如果你是vue写就重新加载留言部分组件,你是前后端不分离就直接刷新页面重新渲染

支持(0) 反对(0) 小小咸鱼YwY | 园豆：3312 (老鸟四级) | 2021-01-15 10:43

你应该看看什么是前后端分离，数据是怎么做持久化的，这是最基本的。针对你这个应用，推荐一个最快的学习路线

前端：

学习什么是 ESM
学习 Vite
学习 Axios

后端：

后端语言（直接用你熟悉的）
数据库（直接用你熟悉的）
什么是 RESTful API

你还要会部署等操作，才能让别人也访问到你的网站

guangzan | 园豆：266 (菜鸟二级) | 2021-07-18 16:18

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

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

欢迎，请先登录或者注册。