帝国小说网站模板,爱凡客,军事网报名入口,网站建设服务合同交印花税“大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;雄雄的小课堂。”前言项目中#xff0c;部门数超万#xff0c;导致页面加载价卡顿怎么办#xff1f;使用若依自带解析树的方法在本地运行没有任何问题#xff0c;但是一发布到服务器上就显示加载超… “大家好我是雄雄欢迎关注微信公众号雄雄的小课堂。”前言项目中部门数超万导致页面加载价卡顿怎么办使用若依自带解析树的方法在本地运行没有任何问题但是一发布到服务器上就显示加载超时。image-20211204221839327仔细一看原来是加载时间超过了10秒所以就超时了于是我们就想了个笨办法让客户多等会儿把最大超时时间设置成30秒哈哈哈哈~但是这肯定不是个万全之策得另想其法。原因经过仔细寻找发现服务器上所有的数据库都没了……然后就开始分析原因是因为刚刚在创建表的时候失误删掉了也不可能啊除了手动用工具创建表之外执行的sql语句也就个select * from 表名啊不可能会误删掉呢。。。于是我将超时时间设置成30秒之后果然没有问题部门数据在12-13秒左右就加载出来了但是用户体验度极差。后来经过仔细对代码分析得出后台查询数据库1万条是没有问题那时间浪费在哪里呢浪费在了将接口中返回的数据封装成树的方法上了代码如下image-20211204222519670image-20211204222559860此处是页面一进来加载时就查询所有数据然后通过调用handleTree将数据组装成树状展示在表单中。image-20211204222724100所以才导致的卡顿。解决方法思路就是先查询最外面的父节点也就是全国所有省目前库中有38个然后在点击前面的展开箭头时再去查询该节点中的子节点也就是通过懒加载的方式减轻服务器压力从而提升系统的性能。使用到的vue组件treeselect,html中的代码如下el-form-item label归属部门 propdeptIdtreeselectv-modelform.deptId:optionsdeptOption:load-optionsloadOptionsplaceholder请选择归属部门//el-form-item当然需要提前在data中声明deptOption变量然后在methods中编写查询父节点的方法以及懒加载的方法loadOptions//所属部门的树状getDeptByAddUser(){listDeptAll(this.paramDeptQuery).then((response) {let list [];let data response.data;data.forEach(element {element[id] element.deptId;element[label] element.deptName;element[children] null; //要设置为空才能触发:load-optionsloadOptions动用});this.deptOption data;});},//懒加载(点击小箭头时显示的值)loadOptions({ action, parentNode, callback }) {this.paramDeptQuery.parentId parentNode.id;listDeptAll(this.paramDeptQuery).then((response) {let data response.data;data.forEach(element {element[id] element.deptId;element[label] element.deptName;element[children] null; //要设置为空才能触发:load-optionsloadOptions动用});parentNode.children data;callback();});},最后部署在服务器上完美解决问题。总结别让困难与懒惰阻止你前进不尝试不动手永远解决不了问题
