任务概述
不想写了,直接看图
检查项的新增功能
这是我第二个开发的功能,说实话还是有一点难度的,表格的弹出很容易就写出来了,在弹出框里展示所有的检查项信息只需要使用axios get后端的数据,具体的实现则交给controller类中的findAll函数,获取到数据后还需要将前端定义的checkitemIds和checkitemId双向绑定,以便后续获取数据。
- 遇到的第一个问题:如何将参数传入后端
前面都很顺利,直到我开始写提交的函数时,我困惑了,formData里面的数据并不包含选中的ItemIds,而是存储在checkitemIds里面,我一开始想这不简单,分别用axios传到后端不就好了,(寻找接受checkitemIds的数据类型也花了好多时间,List,Array,最后发现使用int数组就可以接受我真的是服了自己)然而事实并非如此简单,分别传开的话没有办法将数据存储在中间表,因为缺少联系,itemIds无法与groupid绑定,但是我一开始却没有发现这个问题,把重点放在了怎么在这种情况下把两个axios请求的参数共享,这里也花了非常多的时间,而且是无用功。最后再同学的提醒下,才知道在前端创建一个对象包括两个请求的参数(我甚至连代码都不知道怎么写,太菜了)最后还是创建了这样一个对象,成功传入后台,使用一个新创建的实体类接受。
var param = {
code:this.formData.code,
checkItemId:this.checkitemIds
};
- 问题二:在Mapper层写入中间表的数据时出错
报错信息为getGroupIdByCode返回值为null,那就是sql语句返回的结果是null,说明查询不到对应的groupId,最后确定导致的原因是查询时还没有添加完成,但是我的写的axios请求明明是新增Group表在前,新增中间表的请求在后面,按理说新增中间表数据时,group表的新增应该完成了。于是我分析可能的原因两种:
1.axios的请求是同时发送的
2.表的插入操作比查询操作慢许多
不论哪种原因导致的,只要使中间表的查询操作比group表的插入操作慢就行了,所以我直接在中间表插入的执行过程中加入sleep函数,就完美解决了(可能有点不正经,但总归是解决了hhh)
至此新增checkgroup的功能总算是开发完了,感觉还是对vue和js不够熟悉,很多时间都浪费了,这也导致开发这个功能花费了最多的时间。
检查项的分页功能
这个功能还是挺简单的,毕竟之前和老师一起做过检查项的分页,所以说这个和之前的大同小异,把代码拷过来,稍微改动一下就行了。
检查项的删除功能
做完新增就开始做这个删除了(此时已经是第二天了)删除功能的话参考前面检查项的删除也是可以很快就写完的,当然第一次写的还是有问题的
- 问题一: 删除group表的sql语句执行失败
报错信息如下:
annot delete or update a parent row: a foreign key constraint fails (health
.t_checkgroup_checkitem
, CONSTRAINTgroup_id
FOREIGN KEY (checkgroup_id
) REFERENCESt_checkgroup
(id
) ON DELETE RESTRICT ON UPDATE RESTRICT)
具体原因是group表和中间表有关联关系,不允许删除。既然如此,那么我先把你们两个的关系解除了,再删除group表数据,最后再把你们俩关联起来不就好了吗,然而并没有这么简单,如果仅仅删除group表,会导致中间表外键的取值范围与group表主键取值范围不同,无法重新建立关系,因此必须将两个表的对应数据都删除。
删除功能的开发过程中遇到的问题还好,看得懂报错信息,也很快解决了。
检查项的编辑功能
最后开发的是编辑功能(因为我觉得它很难,就放最后了hh),首先要实现的是点击编辑按钮后实现数据的回显,group的其他数据很容易回显,只需要向后台发送axios请求获取对应id的group信息就行。下面是开发过程中的问题:
- 问题一:检查项没有显示
将数据从后台获取之后检查组信息显示了,但是右侧的检查项check列表却没有显示,再请求的内容中也将itemIds赋给了checkitemIds,那究竟是为什么没有显示,看了看add方法突然恍然大雾,原来是没有导入完整的检查项列表,在这个axios请求之前再加一个findAll请求即可。 - 问题二:如何提交表单数据
一开始我直接提交formData,用checkgroup实体类接受,但是有一个问题是itemIds并没有被影响,还是编辑之前的数据,其他的信息都可以被修改。
通过浏览器控制台输出checkitemIds,发现这个是编辑后的数据,于是我仿照增加的方法,创建一个对象,同时包括checkitemIds和formData还是用checkgroup实体类接受。然而出现了新的问题,接收到的数据均为null。
猜测可能是接收数据的实体类有问题,要创建一个新的实体类,但是我太懒了,能不能直接用这个实体类接受呢?既然formdata里面的itemIds没更新,那我用checkitemIds代替不就行了,再创建一个对象,将fromData里面需要的数据取出来,将itemIds替换为checkitemIds,封装后传到后台。
var param = {
attention:this.formData.attention,
remark:this.formData.remark,
name:this.formData.name,
sex:this.formData.sex,
code:this.formData.code,
helpCode:this.formData.helpCode,
id:this.formData.id,
itemIds:this.checkitemIds
};
至此所有功能开发完毕,从这里回看开发过程,却感觉遇到的问题都是小问题,然而若非自己亲身经历过又怎知这其中解决问题的艰辛。还是需要多多练习,代码量上去了,解决的问题多了,实力也就慢慢提升了。
这也是我的第一篇博客,主要还是记录自己的开发过程,写的有一点随意还请不要介意。