树层级处理上万条数据优化!

c05df4b2ad1189f39cb226082e7791de.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。

前言

项目中,部门数超万,导致页面加载价卡顿怎么办?使用若依自带解析树的方法在本地运行没有任何问题,但是一发布到服务器上就显示加载超时。

7096af516892210f142aac254e192c8f.png
image-20211204221839327

仔细一看,原来是加载时间超过了10秒,所以就超时了,于是,我们就想了个笨办法,让客户多等会儿,把最大超时时间设置成30秒,哈哈哈哈~

但是,这肯定不是个万全之策,得另想其法。

原因

经过仔细寻找,发现服务器上所有的数据库都没了……

然后就开始分析原因,是因为刚刚在创建表的时候失误删掉了?也不可能啊,除了手动用工具创建表之外,执行的sql语句也就个select * from 表名啊,不可能会误删掉呢。。。

于是我将超时时间设置成30秒之后,果然没有问题,部门数据在12-13秒左右就加载出来了,但是用户体验度极差。

后来经过仔细对代码分析得出,后台查询数据库1万条是没有问题,那时间浪费在哪里呢?浪费在了将接口中返回的数据封装成树的方法上了,代码如下:

5078e3206fb5811bcfcf3bddef706fdf.png
image-20211204222519670
e9c243af2065a7e632c13f175600c22f.png
image-20211204222559860

此处是页面一进来加载时就查询所有数据,然后通过调用handleTree,将数据组装成树状展示在表单中。

d0cbac35170c5fe25416de071a8ad536.png
image-20211204222724100

所以才导致的卡顿。

解决方法

思路就是,先查询最外面的父节点,也就是全国所有省,目前库中有38个,然后在点击前面的展开箭头时,再去查询该节点中的子节点,也就是通过懒加载的方式,减轻服务器压力,从而提升系统的性能。

使用到的vue组件:<treeselect>,html中的代码如下:

<el-form-item label="归属部门" prop="deptId"><treeselectv-model="form.deptId":options="deptOption":load-options="loadOptions"placeholder="请选择归属部门"/></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-options="loadOptions"动用});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-options="loadOptions"动用});parentNode.children = data;callback();});},

最后部署在服务器上,完美解决问题。

总结

别让困难与懒惰阻止你前进,不尝试不动手永远解决不了问题!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/323781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Idea Tomcat启动报异常CannotLoadBeanClassException

一、现象展现 Idea配置占用了C磁盘的所有空间&#xff0c;删除Idea配置目录后&#xff0c;改为D磁盘存储Idea配置。 由于idea的Artifact&#xff08;war explode包&#xff09;在没有整个项目重新构建情况下没有执行热发布&#xff0c;从而删除Artifact的war和war explode包&…

P3435-[POI2006]OKR-Periods of Words【KMP】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP3435 大意 一个字符串&#xff0c;对于每个前缀&#xff0c;求复制一份放在末尾可以覆盖整个前缀的前缀&#xff0c;求所有的长度和。 解题思路 这道题如果暴力的话很简单&#xff0c;对于每个前缀每…

Orleans解决并发之痛(三):集群

Orleans本身的设计是一个分布式的框架&#xff0c;多个Silo构成集群&#xff0c;Grains分布在多个Silo中。一旦一个Silo挂了&#xff0c;原来归属这个Silo的Grains会自动在其他Silo中激活。生产环境下还是需要以集群方式来部署。 cluster 在Orleans解决并发之痛&#xff08;二…

avue中实现消息的实时展示

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”前言一个功能写了大半天&#xff0c;主要是数据表设计的有点复杂&#xff0c;且这个项目是10月份就写的放那的&#xff0c;里面有些东西都忘记了……先看数据库结构&#xff0c;然后理…

org.apache.ibatis.builder.BuilderException: Could not find value method on SQL annotation

转载自 mybatis 注解引发的bug&#xff0c;org.apache.ibatis.builder.BuilderException: Could not find value method on SQL anno Mybatis用注解开发且还用script标签 这种bug&#xff0c;网上一搜一大堆&#xff0c;但是都xml方式开发&#xff0c;大部分说的是返回类型或…

P2375-[NOI2014]动物园【KMP,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2375 题目大意 对于kmp操作&#xff0c;我们多求一个numnum数组&#xff0c;表示对于字符串SS的前i" role="presentation">ii个字符构成的子串&#xff0c;既是它的后缀同时又是它…

发达国家与发展中国家编程语言技术的分布差异性

近日&#xff0c;Stack Overflow在官方博客上发布了一组统计数据&#xff0c;表明发达国家与发展中国家在编程语言技术的采用上存在较大的差异。Stack Overflow对2017年1月至8月期间的访问数据进行了分析&#xff0c;选取了64个技术标签&#xff0c;每个标签所包含问题的访问次…

两个map中的数据,按照相同键,将所对应的值相加方法

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言最近写代码的时候遇到了个需求&#xff0c;刚开始想的时候&#xff0c;感觉不难&#xff0c;挺简单的&#xff0c;结果写的时候&#xff0c;各种思考、各种费脑&#xff0c;耗费了点…

mybatis example处理and、or关系的方法

转载自 mybatis example处理and、or关系的方法 1.( xx and xx) or ( xx and xx) 实例代码&#xff1a; BaUserExample baUserExample new BaUserExample();Criteria criteria1 baUserExample.createCriteria(); criteria1.andOrgIdEqualTo("1"); criteria1.an…

P2580-于是他错误的点名开始了【Trie,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2580 题目大意 给n个字符串&#xff0c;用m个字符串和他们匹配&#xff0c;分为错误匹配,重复匹配,正确匹配。 解题思路 裸的TrieTrie(字典树) code #include<cstdio> #include<cstring&g…

publiccms中将推荐页的内容显示在页面片段中

遍历的代码如下&#xff1a; <#list page.list><ul><#items as a><li><figure><!-- ${a.itemType!} : ${a.itemId!} ,place/redirect:count and 301 jump to a.url,place/click:count and 302 jump to a.url--><a href"${site.dyn…

ASP.NET Core 运行原理解剖[3]:Middleware-请求管道的构成

在 ASP.NET 中&#xff0c;我们知道&#xff0c;它有一个面向切面的请求管道&#xff0c;有19个主要的事件构成&#xff0c;能够让我们进行灵活的扩展。通常是在 web.config 中通过注册 HttpModule 来实现对请求管道事件监听&#xff0c;并通过 HttpHandler 进入到我们的应用程…

【ajax】readyState=4并且status=200时,还进error方法

转载自 【ajax】readyState4并且status200时&#xff0c;还进error方法 今天在使用jquery.ajax方法去调用后台方法时&#xff0c;ajax中得参数data类型是"JSON",后台DEBUG调试&#xff0c;运行正常&#xff0c;返回正常的结果集,但是前端一直都进到ajax的error方法…

publiccms实现首页菜单栏下拉的方法

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 今天接到了个需求&#xff0c;使用publiccms实现首页导航栏下拉的效果&#xff0c;效果如下&#xff1a; 目前我的思路如下&#xff1a; 采用分类的方法实现将左侧的项作为二级分类右边…

P2922-[USACO08DEC]秘密消息Secret Message【Trie,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2922 题目大意 给n个01串&#xff0c;用m个01串匹配&#xff0c;如果n是m的前缀或者m是n的前缀那么就算匹配成功&#xff0c;求每个串有多少个匹配成功。 解题思路 我们可以用Trie树&#xff0c;分为…

2017(深圳) .NET技术分享交流会(第二期)网络直播活动

.NET Core 2.0 已于2017年8月14日正式发布&#xff0c;2017(深圳) .NET技术分享交流会在公众号中发出2个小时后就被抢光了&#xff0c;受限于场地无法增加人数&#xff0c;这次如鹏网杨中科老师提供VIP级的网络直播支持&#xff0c;为了保证网络直播效果&#xff0c;另外开启网…

publiccms中,怎么修改默认的端口8080以及默认上下文名称

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 我用的部署方式是springboot的方式,所以修改端口和项目名的方法和tomcat的方法不一样&#xff0c;tomcat的话去改一下conf目录下面的serve.xml文件。 springboot的方式不需要&#xff0c…

JQuery AJAX请求结果的null为key时无法进入success方法

一、问题复现 后台&#xff1a; import java.util.*; Controller public class Test{RequestMapping("/get/loadInfo.do")ResponseBodypublic Result getLoadInfo(){Result resnew Result();Map map new HashMap();map.put(null,"one");map.put("a&…

洛谷UVA1328,POJ1961-Period【KMP,字符串】

正题 洛谷评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidUVA1328 POJ链接:http://poj.org/problem?id1961 题目大意 求一个字符串每个前缀的最短循环循环次数。 解题思路 计算next数组&#xff0c;然后直接计算循环节&#xff1a; 详见:POJ2752-Seek…

publiccms实现多层级选项卡效果

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 距离上次更新已经好久了~最近心有余而力不足。。 最近在学习freammarker标签&#xff0c;算是比较老的技术了&#xff0c;白天写&#xff0c;晚上做梦都在写&#xff0c;不吐槽了&am…