记一次博客评论回复实现遇到的bug

1. vue的坑:

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

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

记一次博客评论回复实现遇到的bug

 

百度了一下,有人说用以下的代码解决:

<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结构,发现了一个问题,抛出这个异常的就一个节点没渲染出来,其他都没问题。然后我再看了一下我的代码,发现了问题的所在:

记一次博客评论回复实现遇到的bug

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,找到需要的当前页子列表,取出来后把子列表和总列表的大小给前端完事了。
 

上一篇:MyBatis分页插件PageHelper


下一篇:SpringBoot整合分页PageHelper