项目环境:react生态圈

界面功能基本和:增(新增一条数据)、删(删除一条数据)、查(展示列表)、改(修改数据)挂钩。

一、展示数据列表相关[判空,控制显示距离,分页是否有效,搜索是否有效]

1.渲染数据的时候要做非空判断,有数据展示列表,没有数据展示一个空的div

2.需要展示哪些字段,最好能提前订好,然后就是排列顺序,如果有特殊要求,提前提出来,当然还有就是比如:内容字段很长,是否需要做截取展示也需要考虑进去

3.列表需要展示大量数据,是否对接了分页接口,分页组件功能是否正常

4.一般会提供关键字的搜索功能,搜索功能是否有效,多条件是否有效,需要自我验证一次

二、删除功能

1.一般系统里面功点对应的是:启用和禁用,组件是switch开关,虽然功能很简单,不过需要对接后台接口,做完功能后,测试一遍,然后F5刷新一下界面,看看更改是否生效

三、新增功能

1.新增一条数据,两种模式:一弹出模态框做,这个针对数据少的情况;二跳转到一个新的界面做,针对数据量较多的情况。新增数据需要注意:是否有字段需要定义验证规则,是否非空,是否必填,是否有字段自己的规则,是否需要做异步校验,

2.保存成功后一般是跳转回到列表展示界面,如果保存失败,需要提示用户哪里有问题(这里指后台也做了对应的规则验证,数据提交到后台没有通过的情况下保错)。

四、修改功能

1.是否有不可更改字段,如果有,则此字段不可被客户修改

2.修改时,如果有时间的地方,需要注意时间的逻辑关系,开始时间是小于等于结束时间

3.修改时,和新增一样,需要注意字段是否有自己的验证规则,如果有,请保持和新增的规则一致

4.保存成功返回到列表展示界面,如果保存失败,需要提示用户哪里有问题(这里指后台也做了对应的规则验证,数据提交到后台没有通过的情况下保错)。

  1. 前端开发是可以看到的。这个看到是指页面的不正常,要么是dom不正常,要么是js报错,要么是数据有问题,基本上就在这三个方面之内。
  2. 如果有问题,
    1,先在脑子里把工作任务的业务流程在脑子里过一遍,看看是不是开发的顺序有问题;
  3. 2,在脑子里,把开发流程分成一段一段的来考虑,看看它是在哪个阶段发生的问题。是加载?还是进入?还是生成?
  4. 3,看看这个bug,是js引起的,还是data引起的?这是在确定问题是谁的责任。
  5. 4,如果是js引起的,那么要在bug出现的前后不同位置,分别打上console.log来查看打印信息进行调试。
  6. 这四个流程走完,基本可以确定问题是在哪出现?如何引发的?

前端如何避免bug的产生?的更多相关文章

  1. 前端和后台BUG区分方法

    测试工程师不只是负责发现问题,除了发现问题这种基本功外,定位问题,提出解决方案,提出预防方案也是要掌握的技能.这里先说定位问题的要求,定位问题要向深入,前提当然是对功能.产品的流程.开发方案.开发人员 ...

  2. android下前端开发诡异bug记录&解决方法

    1.border-radius有bug,围不住background 描述:设置了border-radius后,背景色依然会从圆角里冒出来 解决方法:在设置了border-radius的容器加上back ...

  3. 前端开发——移动bug整理

    1.ios下jquery的delegate失效问题? 解决方案: $("body").delegate(...) 改为 $(".item").delegate( ...

  4. (转)测试如何区别是前端的问题还是后台的bug

    常常说到的一个IT项目,包括前端开发,后台开发,软件测试,架构,项目经理,产品需求.那么对于一位优秀的软件测试工程师来说,需要区分前端和后台的工作就显得尤为重要. - 什么是前端和后台 简而言之,前端 ...

  5. 前端Bug解决方案

    没错!我正在写bug呢!不管你是小白还是大牛,写bug无可避免,遇到bug怎么办?别慌!毛主席教导我们"战略上藐视BUG,战术上重视BUG"!前端遇到的bug无非就三个方面结构层( ...

  6. 如何区分前端BUG和后台BUG?

    测试工程师不只是负责发现问题,除了发现问题这种基本功外,定位问题,提出解决方案,提出预防方案也是要掌握的技能.这里先说定位问题的要求,定位问题要向深入,前提当然是对功能.产品的流程.开发方案.开发人员 ...

  7. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  8. 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  9. 5大JavaScript前端框架简介

    译者按: 简要介绍五大前端框架特性 原文: Top 5 JavaScript Frameworks 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用 ...

随机推荐

  1. 查看postgresql的日志show queries log in PostgreSQL?

    原文:https://tableplus.io/blog/2018/10/how-to-show-queries-log-in-postgresql.html -------------------- ...

  2. P1004 方格取数[棋盘dp]

    题目来源:洛谷 题目描述 设有N×N的方格图(N≤9),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 ...

  3. Spring-HelloSpring-IOC创建对象的方式

    3.HelloSpring 思考 Hello 对象是谁创建的 ? [ hello 对象是由Spring创建的 ] Hello 对象的属性是怎么设置的 ? [hello 对象的属性是由Spring容器设 ...

  4. Object类实现的方法

    ---恢复内容开始--- 1.Clone 对象浅复制,实现Clonable接口可调用,否则CloneNotSupportedException异常 2.getClass final方法,获得方法运行的 ...

  5. linux实操_权限管理

    rwx权限详解 作用到文件: [r]代表可读(read):可以读取,查看 [w]代表可写(write):可以修改,但是不代表可以删除文件,删除一个文件的前提条件时对该文件所在的目录有写权限,才能删除该 ...

  6. uni-app之tabBar的自己配置

    1.因为产品相关的的权限,需要配置不同的导航,这时候需要自定义导航.分离出来的就是一个小的组件.(tabBar.vue) 此处暂时用的html插入的代码,能粘贴到vue文件即可. <templa ...

  7. sqlserver常用运维sql

    1. sqlserver 检测sql SELECT top 10 (total_elapsed_time / execution_count)/1000 N'平均时间ms' ,total_elapse ...

  8. stm32中阻塞模式和非阻塞模式 in blocking mode 与 in non-blocking mode区别

    阻塞模式和非阻塞模式...... 我的理解是:阻塞模式就像是一个延时函数,当这个函数没处理完那么,所有的按照流程需要执行的代码都不会被执行,要等到这个延时完成,类似 平时看书上写的LED灯闪烁,用的d ...

  9. Codeforces Round #554 (Div. 2) E Neko and Flashback (欧拉路径 邻接表实现(当前弧优化..))

    就是一欧拉路径 贴出邻接表欧拉路径 CODE #include <bits/stdc++.h> using namespace std; const int MAXN = 100005; ...

  10. OSI七层协议模型

    OSI七层模型详解 TCP/IP协议 链接:https://www.nowcoder.com/questionTerminal/b2ccf60bbb13483b94b4bffe200b4f3c 来源: ...