首页 > 其他 > 详细

前后端bug

时间:2019-12-09 20:37:14      阅读:110      评论:0      收藏:0      [点我收藏+]

1.请求与相应

如果点击按钮,发送请求:get/post...,出现bug

1.前端没有带数据或者请求url错误,就是前端的问题(url错误或者为空,参数错误或者参数为空)

2.后端没有返回数据则是后端问题,

3.后台已经传回来了数据,但是到前端没有显示出来。这个也是前端问题。

 

 

get请求的参数放在url中,即在请求头中可见。不能携带大量参数。

向特定的路径资源发出请求,请求页面,并返回页面内容,get是从服务器上获取数据。

post请求的参数在请求正文中。可以携带大量参数。

向指定路径资源提交数据进行处理请求(一般用于上传表单或者文件),数据包含在请求体中,大多用于提交表单或者上传文件

 

 

前后端分离并没有网上说的那么复杂。

1.首先要知道所有的程序都是一数据为基础的,没有数据的程序没有实际意义,程序的本质就是对程序的增删改查。

2.前后端分离就是把数据操作和显示分离出来。前端专注做数据显示,通过文字,图片或者图标等方式让数据形象直观的显示出来。后端专注做数据的操作。前端把数据发给后端,有后端对数据进行修改。

3.后端一般用java,c#等语言,现在的node属于JavaScript也能进行后端操作,此处不意义裂解语言。后端来进行数据库的链接,并对数据进行操作。

4.后端提供接口给前端调用,来触发后端对数据的操作。

基本原理就是这样,可能语言上不准确,思想是没有问题的。

 

2、发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。接口数据出错,数据没有提交成功,应答超时等问题,全部由后端工程师来解决。双方互不干扰,前端与后端是相亲相爱的一家人。
对于既可以前端做也可以后端做的逻辑,我建议是放到前端,为什么?因为你的逻辑需要计算资源进行计算,如果放到后端去run逻辑,则会消耗带宽&内存&cpu等等计算资源,你要记住一点就是服务端的计算资源是有限的,而如果放到前端,使用的是客户端的计算资源,这样你的服务端负载就会下降(高并发场景)。类似于数据校验这种,前后端都需要做!
一、什么是前后端接口联调

之前开发写代码的时候,所有的ajax数据都不是后端返回的真实数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完毕,后端的接口也已经写好之后,我们就需要把mock数据干掉,尝试使用后端提供的数据,进行前后端的一个调试,这个过程我们就把它称之为前后端的接口联调。

为什么要联调 本地的mock数据是JC同事自己写的,肯定符合前端需求,但是后端接口首先需要测试通不通,还需要测试数据格式对不对,还有后端有没有填写足够的数据,比如写列表页,前端想分页,如果后端就写了两条测试数据,你咋整? 所以,Jack需要根据后端对接口的调整,不断地来回切换url,这样岂不是还在受后端的影响,还谈什么毛线的前后端分离,名存实亡嘛!

 


1.前端请求一个地址 url
2.后端接收到这个请求,然后把相应的 html 文件直接返回给前端
3.前端解析 js 后,然后通过 ajax 向后台获取相应的数据
4.然后由 js 将这些数据渲染成页面

 

2.

页面元素之类的错误:

1)图片尺寸、图片分辨率(需要产品经理确认)不符合高保图,前端切图

网页上的某个图片的分辨率不对,如果我们了解实现过程,可以想到一般情况下,是根据某个地址去服务器取图片的,数据库一般只保存地址,那么图片能正确显示,就说明后端的基本功能是满足需求的。如果具体图片分辨率有误,最可能的原因是前端显示过程出了差错。

2)光标的几种形态 (输入框or可选择的_工字形光标、链接or按钮_食指竖起的白手套、白色箭头), 参考文档:HTML光标样式

3)按钮点击没反应、下拉框层级关系没有动态变化、输入框校验(长度、非法字符)不严格

合理的表单验证模式应该是:双边验证

前端在用户输入的过程中就需要实时地检查,是否带有特殊符号、值是否是在允许的范围内、是不是符合相应的规范等等。而不是等用户填写完内容并提交后,再由服务端来告诉用户说,“你的用户名不符合规范”。

服务在收到前端收到的数据后,不管前端有没有进行验证,都应该按后台的逻辑进行验证。

于是乎在这个时候,这些逻辑就被无可避免地放到前台里了。

 

4)面包屑导航条:不准确、不能跳转、跳转404错误

5)图片加载不出来:如果是静态图片就是打包的时候少了文件、如果是动态图片就是后台返回的数据有问题

 

6) 提示语:不友好,不符合用户场景,前端写提示语

7)前端写死了数据,没有动态读取后台返回的数据,

8)后台接口应答异常码,前端要有合理提示语

9)后台接口无应答or应答超时,前端要有超时提示语

10)同一个接口,用户正常操作的时候有没有必要同时发送N个?网络异常的时候,多次刷新页面,接口顺序怎么控制?是否应该灰掉按钮,让用户不能多次点击按钮?

11)多个接口(例如:A接口必须在B接口前面),导致网络延迟的时候,顺序有点乱了,有偶现BUG

12)

点击按钮无反应

先点击F12,再点击按钮
观察你的Network,看看请求有没有发出去
如果请求没有发出去,一定是该方法中有js代码写错语法了,排查语法,可以使用简单的alert弹框去做标记
如果请求发出去了,再继续排查

 

 

3.web排查bug

【问题】前端加载不出页面
【排查】
1. 排查页面接口是否有返回数据

F12 -- Network -- XHR
排查结果如图:后端有返回数据

2. 排查前端是否报异常

F12 -- Consol
排查结果如图:前端报错,说明是前端问题

 

往往UI设计师会设计一个网页的概念图出来,一般一个网页是一整张图,客户看了图之后觉得满意了,就可以把这张图丢给前端去切割开来,例如:把页头、导航栏、侧边栏、banner、页脚、按钮样式等等都切割开。在正真做网页的时候再一点点拼起来。

 

 

 

前后端bug

原文:https://www.cnblogs.com/yzwdcjs/p/12012886.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!