记一次博客评论回复实现遇到的bug_document.body.removechild

1. vue的坑：

我在vue对象的data里面存有一个数组对象，然后我用axios更新这个数组的时候，爆了个错：

Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node

 

百度了一下，有人说用以下的代码解决：

<script>
  export default {
    name: 'xxx',
    data(){
      return {
        title: '',
        content: '',
        isShowMessageBox: false,
        resolve: '',
        reject: '',
        promise: '' // 保存promise对象
      }
    },
    methods: {
    remove: function () {
      setTimeout(() => {
        this.destroy();
      }, 300);
    },
    destroy: function () {
      this.$destroy();
      if (document.body.contains(this.$el)) {
        document.body.removeChild(this.$el);
      }
    }
  }
  }
</script>

但是加了还是报错，也有人说是说是vue的DOM渲染的时候,删除之后DOM里面的还没有反应过来,在v-for的上一级添加一个v-if的状态,删除的时候隐藏,数组更新完成时候显示，然后我加了v-if还是不行，最后我再看了一下我整个html结构，发现了一个问题，抛出这个异常的就一个节点没渲染出来，其他都没问题。然后我再看了一下我的代码，发现了问题的所在：

v-if的坑，我突然想起v-if其实是个虚拟的dom，也就是说你移除一个虚拟的dom操作那肯定报错，此时dom节点不存在，所以操作不了而报错，然后我把它换成了v-show，v-else只能在写多一个v-show，然后来个相反判断。最后能跑通了。

但是，两个v-show不是两倍的节点吗，只不过不满足条件的隐藏了，写多了java让我对多new对象这种行为非常不适应，感觉非常消耗内存，于是，我把v-show去掉了，直接让它显示，然后，嘿嘿嘿，原生js操作dom直接改，没错，就是等dom渲染完后直接用js代码直接操作dom改，是很笨，但是有效，直接加了下面的代码

new Vue({
    el: "#pjax",
    data: {
        commentAndUserList: []
    },
    watch:{
            commentAndUserList:function(){
                this.$nextTick(function(){
            });
        },
    }
})

等commentAndUserList绑定的dom节点渲染完再让js操作dom来实现v-if的效果。感觉很笨，但是实现了我的需求，管他的。

2.PageHelper的坑：

这次不知道为什么PageHelper分页不起作用了，在之前我改动了一个地方，就是把数据库查出来的评论列表扔到了redis里，如果查询命中了redis，就从redis获取数据，负责从数据库里获取数据然后再把数据缓存到redis了，但是发现拿到的列表用PageHelper.startPage()不起作用了，后来看到了这篇博主的文章 https://segmentfault.com/a/1190000020986481?utm_source=tag-newest 才知道才发现原因是PageHelper.startPage所放在程序的位置的原因，教程中写到：“在你需要进行分页的 MyBatis 查询方法前调用 PageHelper.startPage 静态方法即可，紧跟在这个方法后的第一个MyBatis 查询方法会被进行分页。”因为PageHelper方法使用了静态的ThreadLocal参数，分页参数和线程是绑定的。只要你可以保证在PageHelper方法调用后紧跟 MyBatis 查询方法，这就是安全的。因为PageHelper在finally代码段中自动清除了ThreadLocal存储的对象。如果代码在进入Executor前发生异常，就会导致线程不可用，这属于人为的 Bug（例如接口方法和 XML 中的不匹配，导致找不到MappedStatement时）， 这种情况由于线程不可用，也不会导致ThreadLocal参数被错误的使用。所以，紧跟在这个方法后的第一个MyBatis 查询方法才会被进行分页，从redis里查就没办法了，那就干脆自己写个方法实现分页：

public <T>List<T> pageList(List<T> list, int currPage, int pageSize) {
        /*从第几条数据开始*/
        int firstIndex = (currPage - 1) * pageSize;
        /*到第几条数据结束*/
        int lastIndex = currPage * pageSize;
        int size = list.size();
        if (lastIndex > size) {
            lastIndex = size;
        }
        return list.subList(firstIndex, lastIndex);
    }

直接把总列表subList，找到需要的当前页子列表，取出来后把子列表和总列表的大小给前端完事了。