项目实训(十四) —— 据测试结果改进

大的功能全部实现后，进入的测试组反馈，我进行改进的阶段。在收到测试组的测试反馈文档后，我开展了此项工作。

依据测试文档，一共七条问题：

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;
}

上传时间忽略时分秒直接导致展示辨识度降低，不做修改。

以上记录，基本解决了测试组提出的所有问题。余下的上传限制的问题只能再做努力了，若能实现便再加以修改，否则只好保持原样了。