大的功能全部实现后,进入的测试组反馈,我进行改进的阶段。在收到测试组的测试反馈文档后,我开展了此项工作。
依据测试文档,一共七条问题:
1. 上传饮食成功后,结果识别按钮逻辑冗余。
解决:
对接成功后的识别界面,有着页面按键—确认识别弹窗—识别结果的按键逻辑,确实冗余。
之前为了去掉前两步骤,想将识别的HTML揉合入我的主HTML,因规模太庞大而失败了。
后来转化思路,研读了识别的HTML界面与功能的关系,发现真正涉及图片识别出结果的是一个按键调用的一个函数。于是直接将前两步骤的窗口隐藏掉,将初始隐藏的识别结果弹窗改为显示出来,并加个“确认进行识别”的按钮调用那个关键函数。这样,去除了冗余,极大地缩小了对接的缝隙。
2、3. 上传为空的限制。此问题涉及form表单的提交判断,网上攻略比较难找,找了几份移植入自己的HTML却无任何效果,多次尝试后选择了放弃。有关上传可为空的问题,目前还是靠用户自觉上传规范内容得以避免吧。
4. 当发布的饮食名称较长时,会出现页面内容失调的情况,以及识别界面图片大小出界。
解决:
之前首页的菜料部分考虑到太长影响排版,并未想到菜的名字也可以长达两行。发现问题后同样在CSS部分加以限制得以解决:
.limit_line{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*详情页面限制各三行*/
.limit_line3{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
识别界面的图片确实没限制长宽,样式加入长宽限定也得以解决。
5. 当上传饮食输入的菜名均为数字和特殊字符时,不能正常换行显示。
解决:
网上找攻略后,CSS加以定义,成功解决:
h3 {
word-break: break-all;
word-wrap: break-word;
}
6. 自适应问题。放缩窗口,会使弹窗排版变乱。
解决:
之前的制作均以统一固定的窗口大小进行的,并为尝试窗口缩放的情况。在测试组提出后,我把问题锁定为:弹窗的长宽是以%为单位的,而内部元素是px,导致了窗口缩放后失调。统一改为px为单位,再手动调整,得以解决:
/*上传页面弹窗*/
.window_appear{
position: relative;
top: 75px;
background: ghostwhite;
width: 460px;
height: 500px;
border-radius: 5px;
margin: 5% auto;
}
/*结果页面弹窗*/
.window_appear_r{
position: relative;
top: 130px;
background: ghostwhite;
width: 300px;
height: 340px;
border-radius: 5px;
margin: 5% auto;
}
/*详情页面弹窗*/
.window_appear_inform{
position: relative;
padding-top: 30px;
background: ghostwhite;
width: 460px;
height: 500px;
border-radius: 5px;
margin: 10% auto;
}
7. 翻页图标的居中对齐,上传时间记录的时分秒可能冗余。
翻页图标会随着页数变多而变长,且不是以中心拓长的,由此此问题难以解决,只能将位置设位absolute后进行手动调整为一个差不多的位置:
/*翻页按钮的样式*/
.page{
position:absolute;
top:662px;
right:550px;
padding: 0;
margin: 0.2rem auto;
border-radius: 2rem;
counter-reset: pagination;
text-align: center;
z-index: 0;
}
上传时间忽略时分秒直接导致展示辨识度降低,不做修改。
以上记录,基本解决了测试组提出的所有问题。余下的上传限制的问题只能再做努力了,若能实现便再加以修改,否则只好保持原样了。