vue 前端,java+spring 后端
大页面嵌套了收款人页面,vue 实现
收款人页面和外层大页面有三个数据,a ,b 和 c , a = b+ c
a 和 b 可以手动输入和 从大页面点击计算带入。
c 只读,会根据带入或输出的 a-b 得出 c
大页面提交会校验大页面上的 a 和收款人里面的 a 是否相等,大页面上的 b 和收款人页面的 b 是否相等
当大页面 a 和收款人 a 不一样会提示,然后点击计算会把大页面的 a 重新赋值给收款人的 a
收款人页面,小数点精度
大页面提交按钮校验 a 和收款人 a 相等,b 和收款人 b 相等。
由于收款人页面 c 为只读,就没有做大页面提交按钮的 a=b+c 测试覆盖,并且提交会校验大页面 a 和收款人 a 相等,大页面 b 和收款人 b 相等
由于大页面 a 和收款人 a 不等时,必须重新点击计算按钮,让两个 a 相等,但是 收款人页面没有监控到鼠标移动,所以没有做 a-b=c 的操作。
提交按钮,也没有做 a-b=c 的校验,所以,当 a 第一次带入或修改 数据为:2000, b 的数据为 300 时计算出的 c = 1700,由于大页面做了改动,a 的数据从 2000 变为 1000, 提交按钮校验了:你的 a 和收款人里面的 a 不一样,你需要计算一下。 好,点击计算, a=1000,收款人页面的 a 被自动赋值为 1000 了,但是,收款人页面没有收到鼠标移动的操作,所以他没有做 a-b=c,对于 c 的重新赋值,提交也没做这个校验,所以提交之后的数据为:a = 1000,b = 300,c = 1700。
一次,不该漏测的问题,一次经验。这种组件化模块化的操作,需要在总提交按钮做一切必要的校验。