原因
经过仔细寻找,发现服务器上所有的数据库都没了……
然后就开始分析原因,是因为刚刚在创建表的时候失误删掉了?也不可能啊,除了手动用工具创建表之外,执行的sql语句也就个select * from 表名
啊,不可能会误删掉呢。。。
于是我将超时时间设置成30秒之后,果然没有问题,部门数据在12-13秒左右就加载出来了,但是用户体验度极差。
后来经过仔细对代码分析得出,后台查询数据库1万条是没有问题,那时间浪费在哪里呢?浪费在了将接口中返回的数据封装成树的方法上了,代码如下:
image-20211204222559860
此处是页面一进来加载时就查询所有数据,然后通过调用handleTree
,将数据组装成树状展示在表单中。
<el-form-item label="归属部门" prop="deptId">
<treeselect
v-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();
});
},
最后部署在服务器上,完美解决问题。
总结
别让困难与懒惰阻止你前进,不尝试不动手永远解决不了问题!