双向绑定bug,后台系统的部分代码规范

By admin in 4858.com on 2019年2月16日

前日在处理html input输入框时,发现1个难题:

在大师的启蒙下,作者对代码的书写规范也是越发有网瘾了。小编的代码若能侥幸被你看见,则简单窥见有局部规律。

用的vue+ele,从后台请求数据后,按照请求量的数码开展双向绑定时出现难题。

web端页面测试,最普遍的是着力控件的测试,唯有精晓科普的控件和其测试方法,才能左右测试中心,幸免漏测情形爆发。依据平常工作小结,将控件和科普逻辑集合在同步,统计了多少个控件类测试查场景如下。

在用户名输入框中输入admin
“‘p(中间是1个空格),点保存后台指示数据保存成功,按理应该是未修改,通过chrome调试工具发现传给后台的数码却是那样的:

*.html中代码规范

  • 富有class名称都是“aa-bb”那种格式的:
    <div class=”button-content”></div>
  • 具备id名称都以“aa_bb”那种格式:
    <div class=”flow-chart” id=”trend_line”></div>
  • 假使页面有独立样式,则在html文件最顶部加上class属性:
    --- title: 流量统计 layout: default class: flow ---
    对应的该页面样式文件便是flow.scss,且scss文件中,则以.page-flow作为最大的拔取符。那样可以确保最终的css文件中,单独样式不会争辨,也消除了前者人士对此class或id命名难的题材。

场馆再次出现

导航条

data_mark=10&user=admin%C2%A0%22'p&ip=1.2.3.4&pwd=&status=0&edit_type=edit

*.scss文件(最终为css文件)中代码规范

  • 采纳器与花括弧之间有个三个空格,属性后边紧跟冒号,空格后才出现值,格式如下:
    .page-certificate {background: #f0f5fb;}
    PS:作者虔诚的盼望,以往有人接替小编的代码,能按那一个规范平素进展下去。

对此后台系统的话,用的最多的便是询问条件(输入框样式)和查询结果(即表格样式),然后就是有些按钮等联合的体制。如果那个样式均能集合行使,则会给前端以及后台开发人员带来有利,使代码简洁有序。所以笔者在写代码时,特别注意代码复用那块,不多BB,上边直接丢出一部分模块的代码规范。

4858.com 1

导航描述了用户在三个页面内操作的办法,在不相同的用户接口控制之间,例如按钮、对话框、列表和窗口等;或在差别的总是页面之间。导航测试平常考虑如下几点。

 

按钮模块—— button 标签或 a 标签

后台系统中,用到的按钮几乎有4中大小:btn-lw、btn、btn-normal、btn-lg;5种样式:btn-fill、btn-primary、btn-primary-white、btn-gray、btn-gray-fill。上边进行每种介绍。

  1. 微小的按钮,一般用在报表的操作列中。代码及效益如下:
    4858.com ,<a href=”javascript:void(0)” class=”btn-primary-white btn-lw
    detail-btn”>查询</a>
    <a href=”#” class=”btn-fill btn-lw”>激活</a>
![](https://upload-images.jianshu.io/upload_images/331790-449e694a7065ba5b.png)
  1. 按钮,一般是“公安认证”操作。代码及成效如下:
    <a href=”#” class=”btn btn-fill
    identification”>公安认证</a>
![](https://upload-images.jianshu.io/upload_images/331790-baed5d37e1a3d37f.png)
  1. 常规按钮,一般为视频页“上传”和“录像摄像”等操作。代码及作用如下:
    <a href=”#” class=”btn-normal btn-primary”
    id=”upload_video”>上传</a>
    <a href=”#” class=”btn-normal
    btn-gray-fill”>初步摄像</a>
![](https://upload-images.jianshu.io/upload_images/331790-25d7b4503ed3c1fd.png)
  1. 大一些的按钮,一般是“查询”或“保存”操作。代码及作用如下:
    <button class=”btn-hollow btn-lg btn-gray”>保存</button>
![](https://upload-images.jianshu.io/upload_images/331790-227531360d25fe65.png)

html代码

· 导航是不是直观,不难明了,间接反应系统的关键成效。

相当于浏览器把空格转成了【%C2%A0】,数据库和前台突显都日常且有3个空格,不过拿出来比较,它们统统不相等 ,通过查找得知:

查询模块

双向绑定bug,后台系统的部分代码规范。在查询模块中,一般有输入框、下拉列表以及时光,那应该是当前最复杂的组成了。前端童鞋请注意,那块只要按照这么些样式统一便得以了,无需按ui效果图上机关随机缩放大小再自动定义。先上效果图。

4858.com 2

下一场上代码:

//ld 下边代码class名称均无需修改,架构也无需修改。

4858.com 3

询问模块.png

4858.com 4

· 导航的风骨与其余菜单,呈现等风格是还是不是一律

前端空格:&nbsp;  &#160;  &#xA0;
传到后台的是UTF-8空格:C2 A0 即ASCII 194 + 160

报表模块

这表格几乎百分之五十页面都用到了,所以不要自个儿再去定义样式。
先丢效果图

4858.com 5

接下来上代码

//ld 表格为突显数据的,代码class名称均无需修改,架构也无需修改。

4858.com 6

表格.png

全副样式

· 导航的链接跳转是还是不是科学

 

端详模块

端详模块一般是用来添加或改动的页面,分两种。一种是两列的;一种是四列的。上边介绍一下两列式的。
作用图如下:

4858.com 7

代码丢上:

4858.com 8

4858.com 9

· 导航条tab间的来往跳转,是还是不是科学。

于是在后台拿到urser数据后开展空格转换,即可不奇怪保存数据

可以一向include的模块

ld
具体请看源码中_includes文件下的component文件夹内容,就不一一列出,此处只显示多少个

  • 分页
    {% include component/pagenav.html %}
![](https://upload-images.jianshu.io/upload_images/331790-e123858b7d978768.png)
  • 日子拔取
    {% include component/search.html %}
![](https://upload-images.jianshu.io/upload_images/331790-430743758127b8e1.png)

data表值

· 链接如若带参数,跳转到差距页面,传递的参数是不是正确

$data['user'] = str_replace(chr(194).chr(160), ' ', $user); // utf-8空格

4858.com 10

·
导航条之外的国有内容,在导航条差异tab内的展现应该保持一致,且意义正确性检查。

 

后台请求的数据值

· 区其他导航条达到同等的目标,检查不一致导航条跳转过来时内容是还是不是相同。

参考:

4858.com 11

·
导航条各级之间有上下级关系时,进入下级页面,再回来,是不是能符合规律重回上级页面。

率先次输入框里无内容时的伸手得到的故事情节

导航条常见和UCR-VL跳转检查一起构成一定的法力。除了考虑导航条基本的机能外,还索要检讨:

https://www.cnblogs.com/oldphper/p/4128138.html

当输入框里填值时:

·
各种导航之间的相互影响,借使五个导航连接使用的js模块不均等,涉及到页面加载,页面呈现等的检讨。

4858.com 12

·
导航条与其他控件组合在一道时,在区其余页面上,看到的导航条是或不是一律等检查。

输入框里填内容时

输入框

4858.com 13

输入框分为文本输入框,数字输入框。一般采用在填充输入的始末上,比如名称,属性等,有新建和编辑类两种。在检查的时候须求关怀一些输入框的特征:

第②回输入框里有内容时的呼吁得到的内容

·
输入的字符长度是不是符合要求,输入最小长度,最小长度-1,最大尺寸,最大尺寸+1,以及超长的字符检查是还是不是切合预期

问题

· 输入特殊字符,尤其是&、单引号’、空格检查是或不是能保存。

双向绑定的值没有一向付出data–orderId,而是在data里新加了成分”ordersId”:”020171024160709964″

· 输入内容前后带空格的,能依然不能自行过滤处理。

解决方案

· 不输入内容,保存,是不是有错误指示

Vue升级至版本2.5以往,判定变严刻了,原因在于 v-model=”form.ordersId
,仅仅因为ordersId与引号之间多了2个“ ”(空格)

· 输入注入的字符串,比如null,js代码,html代码等,是还是不是能保存。

只想说一句 希吧哟 ,然而专业严峻点也好。。。

·
数字输入框还要检查边界值,负数,分数,非数字,0,科学计数法,字母与数字组合,16进制,8进制,货币性输入,小数点位数检查等状态等状态

除此以外,输入框在逻辑上急需关爱以下几点:

· 音讯的唯一性,比如有的称呼的自小编批评必要唯一性。

· 编辑类的输入框,要检查鼠标移出后点击,能不能从输入框移出热点。

· 有自动带入功能的输入框,要反省活动带入数据的不利。

按钮

按钮一般用户功效的认可,涉及到效果与db等的贮存意况是还是不是吻合预期。常见测试场景如下:

· 按钮是还是不是可点,有弹出框的弹出框是还是不是顺应预期。

· 自然状态、鼠标悬浮和按钮按下情形下,按钮的情事

· 按钮的效益完成是还是不是健康(存储db,与任何模块交互等是还是不是寻常)

· 按enter键操作按钮,功效是还是不是符合规律。

· 按tab键,能依旧不能在不一样的按钮或其他控件间切换。

· 一些按钮只好点击三回的事态,点击两回后,再操作,是或不是还可以点击。

·
错误音讯提示是在前者js判断,照旧后台判断,点击按钮后,指示话术突显正确。

· 打消成效的按钮,是或不是能不奇怪关闭页面,裁撤后回去的页面是不是吻合预期。

下拉框

下拉框一般七个协同现身,完结筛选作用。需求注意筛选后是还是不是及时生效,以及结合筛选的处境结果是不是吻合预期。常见测试点如下:

·
暗中认可呈现是还是不是正确,比如一些显示全部,有的默许选中某一项,有的突显“请采纳”

·
切换item,下拉框呈现项内容和排序是还是不是正确,分歧浏览器,下拉框突显是不是有变形等。

· 下拉框中拔取超出设定值的,是还是不是有滑动条,上下滑动,还是左右滑行等。

· 下拉框弹出时,鼠标点击控件外区域/选项/下拉框,下拉框能或不能收回

· 当下拉框选项很多时,是还是不是有被底层覆盖的事态,

·
下拉框数据被贮存后,其他地方显得时,传递的数码科学检查。比如下拉框选项按数字传递,而其余页面突显时应有出示相应的文字。

·
组合筛选的情状,有级联操作的,唯有拔取了前二个数据后,才能拓展下多个的挑选。比如省市之间,唯有采取了省份,才能继承选拔市,否则市不可选。

· 组合下拉框完结的筛选效率正确性检查。

下拉框,列表,筛选框等不时一起组成筛选的成效。须求关心以下几点:

  1. 拔取差其他选项,列表中浮现筛选的结果,内容,暗许排序等检查。

  2. 结合条件时,列表中内容检查。

列表

列表是列表框,主假如较多的同类型数据的显示。列表需求小心数据的周全性,条数,内容科学等,常见测试点如下:

· 列表长度,宽度是或不是合理,若是太长,太宽,有没有竖向和横向滚动条。

· 列表表头帮忙音信是或不是完好,比如title旁边是或不是有小问号资助。

· 列表每行逐个字段可兆示内容各样性检查是还是不是正确。

· 列表数据为空时,突显是否科学。

· 列表翻页功用是或不是正确。

· 列表列排序效用是或不是正规。

· 列表其余附加效能(比如:删除、新增,编辑,下载等)是不是平常。

· 是或不是有全选效率,全选作用检查

· 列表和翻页,筛选的组合检查,翻页后,再做筛选,是或不是会自行跳到第2页。

· 列表和翻页,排序的整合检查,翻页后,筛选,是不是仍是对一切数码的排序。

· 列表
和翻页的组成检查,翻页后,对页面数据做编辑,是不是能保留成功,是或不是仍滞留在当前页。

·
列表切换的效果检查,比如在列表1和列表2在同一区域展现,浮现1时不突显里2.当在列表1编纂物料后,切换成列表2,再切换回列表1,检查编辑的物料是还是不是见效。

单选框

单选框完毕八个中甄选2个的成效,常见测试点如下:

· 默许是不是有入选

· 是还是不是只好选中二个

· 选中后的效果是不是科学。

· 与接口交互传递的值不易检查

复选框

完结多选功效,常见测试点如下:

· 七个复选框贰个都不选

· 三个复选框全体中选

· 三个复选框部分被入选

· 当复选框太多时,是不是提供全选和全不选的效果

·
复选框与任何组成时,比如选中有个别复选框,就涌出某种意义,检查差距组合时的显示情况。

左右精选框

有些场景,使用左右取舍框选用数据,左侧是待采用数据,右边是一度挑选的多少,右边可去除。常见测试点如下:

· 左侧数据浮现区数据是或不是吻合预期

· 左边数据为空时是还是不是出示正确

· 左侧数据过多时是还是不是有滚动条。

· 左侧能不能进行,展开后出示数据是或不是正确。第四回进入是不是进行。

· 添加左侧数据到右手后,左边数据是还是不是暗中同意展开。

· 添加一条右侧数据到右手,左侧数据置灰检查,左侧数据正确检查

· 添加全部数据到右手,左边数据置灰检查,正确性检查。

· 左边删除一条数据,左边对应数据不再置灰,数据正确检查

· 右侧删除全体,右边数据不再置灰,正确性检查

· 两侧数据是或不是有个数提示,有的话,添加和删除后,个数提醒是或不是科学。

· 添加多量数量,确认后,检查处理的快慢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有