简介:这是一个后端使用ssm,前端vue+element ui,数据库mysql的crud的demo,后端分页使用了pagehelpr插件(mybatis的)

1.处理耗时的不同

大致逻辑:前端通过按钮获取用户输入表单并调取接口插入数据库随后调用查询接口返回最新数据实现页面实时刷新效果。后端两个接口分别是查询和添加，数据库两张表，其中emp的d_id列外键依赖于dept的id列
截图:
image.png
image.png
image.png
image.png
image.png
image.png

问题描述:

点击添加数据后，页面并未实时刷新，通过debug及输出信息发现方法执行顺序不正确（中间是查询接口，上下是添加数据）
0XO2F_C`3TKMOYQFEONC9XC.png

问题原因

查看网络请求发现，查询请求的确是在添加之后发送，但是由于ajax是异步请求且后端查询请求是连表查询，而添加请求因为依赖于dept表，需要先查dept校验是否合格，再向emp表插入，耗时比查询久，导致查询请求先执行结束返回，页面也就不会得到新数据
image.png

解决办法

将查询操作放入添加操作的then函数中，即收到返回之后再更新数据
image.png