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