前后端bug

1.请求与响应

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

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

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

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

一般点击按钮交互分为超链接跳转、表单提交、或者异步的获取数据

前后端不分离，一般情况下前端只需要根据设计完成页面就可以，数据可以暂时使用静态数据，包括图片、文字等。页面写完就可以交给后端同事了，他们引入你写的样式，将页面和数据进行渲染再返回到浏览器！ 

一般来说，图片在后端的存储方式分为两种：

其一：可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;
其二：将图片转换成二进制流，直接存储到数据库的 Image 类型字段中.

 数据库存储图片存放路径，这样不占空间

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

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

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

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

2、发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，应答超时等问题，全部由后端工程师来解决。双方互不干扰，前端与后端是相亲相爱的一家人。

对于既可以前端做也可以后端做的逻辑，我建议是放到前端，为什么？因为你的逻辑需要计算资源进行计算，如果放到后端去run逻辑，则会消耗带宽&内存&cpu等等计算资源，你要记住一点就是服务端的计算资源是有限的，而如果放到前端，使用的是客户端的计算资源，这样你的服务端负载就会下降（高并发场景）。类似于数据校验这种，前后端都需要做！

 

 

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、页脚、按钮样式等等都切割开。在正真做网页的时候再一点点拼起来。