【javascript】实现类后端增删改功能（附源码）

经海路大白狗

已于 2022-11-14 00:47:10 修改

阅读量1.3k

点赞数 3

分类专栏：大学毕业解疑文章标签： javascript 开发语言 python java 前端

于 2022-11-12 08:00:00 首次发布

本文链接：https://blog.csdn.net/xingyu_qie/article/details/127813158

版权

大学毕业解疑专栏收录该内容

50 篇文章 26 订阅

订阅专栏

☆ 在学习javascript之初会有很多练手的例子，当还没有接触到后端（java ptython）这些的时候，老师会让我们自己模拟实现一个纯javascript的类后端的增删改效果。

☆ 本文将通过后端的思路，抛弃那些复杂的逻辑，纯前端实现一套增删改查的效果。如果明白了这一套逻辑，那么以后学到ajax的时候再和服务端联调，就会容易理解的多。

☆ 本文通过逻辑讲述，还有完整的源码，源码并且添加了详细的注释与打印输出逻辑，希望你可以学会

1、html布局

顶部布局input输入框做为输入内容区域，

按钮添加addContent事件。

底部预备了id为contentList的div区域用于展示评论列表

<body>
   <div class="box">
     <div class="comment-box">
         <input type="text" id="inputContent" />
         <button onclick="addContent()">添加</button>
      </div>
      <p>评论区</p>
      <div class="content-list" id="contentList">

      </div>
   </div>
</body>

2、添加的实现

描述：当输入框输入内容后，点击添加按钮，需要在评论的区域添加一条子div区域，子区域内追加填充评论文字的span元素，后面再追加用于删除的子按钮，再追加用于修改的子按钮。

便于后续模拟在数据库里添加数据，提前定义一个变量 list = [] 定义一个初始化 id = 0 。因为我们每添加的一条评论文案都会填充到这个数组里。而每次删除，修改操作，怎么知道操作的是当前这一行数据呢，当然是要准备一个id，每一行的id都是唯一的。

当添加完成后，再把输入框的内容清空。

3、删除的实现

第2步在添加的时候，我们给每一条数据添加了id，

唯一的id值。删除的时候用得到。

意思就是要删除，得知道删除的是哪条数据。

所以再删除的时候调用一个deleteOne的方法，通过当前元素id，去list数组里进行匹配，

然后将这一条id所属的list元素删除。

再根据当前元素，获取父DOM元素，进行删除。这样，一条评论就删除了。

4、修改的实现

跟第3步类似，点击修改的时候，因为我们给每一条数据添加了id属性，唯一的id值。

修改的时候，利用这个id值操作对应的DOM与数据。

但与删除略有不同。修改操作需要通过当前id值，获取到当前所属的评论文本内容，

然后将其给输入框赋值。当再次点添加按钮的时候，还要通过当前id替换掉之前添加的值。

5、完整源码附详细注释

CSS部分

<style>
    html, body, * {
      margin: 0;
      padding: 0;
    }
    .box {
       margin: 100px;
       border: 1px dashed red;
       width: 400px;
       min-height: 300px;
     }
     .comment-box {
        padding: 10px;
        border-bottom: 1px solid red;
      }
      input {
        margin-right: 20px;
        width: 280px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
      }
      p {
        margin: 10px;
      }
      .content-list {
        margin: 10px;
       }
</style>

HTML部分

<div class="box">
    <div class="comment-box">
       <input type="text" id="inputContent" />
       <button onclick="addContent()">添加</button>
    </div>
    <p>评论区</p>
    <div class="content-list" id="contentList"></div>
</div>

javascript部分

<script>
    // 定义模拟数据库的数组
    var list = [];
    // 定义每天数据的id
    var id = 0;
    // 获取input输入框的dom元素
    var inputDom = document.getElementById("inputContent");
    // 提前预设修改的数据id变量
    var updateId = 0;
    function addContent(){
        // 获取评论区大的DOM元素 
        var contentList = document.getElementById('contentList');
        // 获取输入框的值
        var val = inputDom.value;
        // 如果updateId有值表示要修改
        if (updateId) {
           var update2Index = 0;
           for (var i=0;i<list.length;i++) {
             if (list[i]['id'] === update2Index) {
                list[i]['val'] = val;
                break;
             }
            }
            var updateContentNode = document.querySelector("#content_"+updateId);
            updateContentNode.innerText = val;

            // 输入框清空
            inputDom.value = '';
            // 修改id清空
            updateId = 0;
            console.log('修改后的数据库', list);
            // 如果是修改逻辑，及时return掉，不走添加逻辑
            return;
         }

         // 开始添加的逻辑
         // 每天数据id自加1
         id++;
         // 创建单条评论的区域
         var oneDiv = document.createElement('div');
         contentList.appendChild(oneDiv);
         oneDiv.style.margin = '10px 0';
         // 创建单挑评论的文案区域
         var oneSpan = document.createElement('span');
         oneDiv.appendChild(oneSpan);
         oneSpan.innerText = val;
         oneSpan.setAttribute('id', 'content_' + id);
         // 创建单条评论的删除按钮
         var oneADelete = document.createElement('a');
         oneDiv.appendChild(oneADelete);
         oneADelete.setAttribute('href', 'javascript:void(0);');
         oneADelete.style.marginLeft = '20px';
         oneADelete.innerText = '删除'
         oneADelete.setAttribute('delete_id', id);
         oneADelete.onclick = deleteOne;
         // 创建单挑评论的修改按钮
         var oneAUpdate = document.createElement('a');
         oneDiv.appendChild(oneAUpdate);
         oneAUpdate.setAttribute('href', 'javascript:void(0);');
         oneAUpdate.style.marginLeft = '20px';
         oneAUpdate.innerText = '修改'
         oneAUpdate.onclick = updateOne;
         oneAUpdate.setAttribute('update_id', id);
         // 添加完后清空输入框的值
         inputDom.value = '';
         // 将单条添加的数据存入数据库
         list.push({
            id,
            val
         })
         console.log('添加后的数据库', list);
    }
    function deleteOne(event) {
         var obj = event.target || event.srcElement;
         // 获取要删除数据的id
         var deleteId = Number(obj.getAttribute('delete_id'));
         var deleteIndex = 0;
         console.log('要删除的数据id', deleteId);

         for (var i=0;i<list.length;i++) {
             if (list[i]['id'] === deleteId) {
               deleteIndex = i;
               break;
             }
         }
         console.log('要删除的数据索引', deleteIndex);
         list.splice(deleteIndex, 1);
                    
         var fatherNode = obj.parentNode;
         var superParentNode = fatherNode.parentNode;
         superParentNode.removeChild(fatherNode);

         console.log('删除后的数据库', list);
    }
    function updateOne(event) {
         var obj = event.target || event.srcElement;
         // 获取要修改数据的id，并存入全局updateId
         updateId = Number(obj.getAttribute('update_id'));
         var updateContent = '';
         console.log('要修改的数据id', updateId);

         for (var i=0;i<list.length;i++) {
            if (list[i]['id'] === updateId) {
              updateContent = list[i]['val'];
              break;
            }
         }
         inputDom.value = updateContent;
    }
</script>

经海路大白狗

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
7
评论
【javascript】实现类后端增删改功能（附源码）

javascript之初会有很多练手的例子，当还没有接触到后端（java ptython）这些的时候，老师会让我们自己模拟实现一个纯javascript的类后端的增删改查效果。通过后端的思路，抛弃那些复杂的逻辑，纯前端实现一套增删改查的效果。如果明白了这一套逻辑，那么以后学到ajax的时候再和服务端联调，就会容易理解的多。☆ 希望你可以学会。
复制链接

扫一扫