问题是怎么个情况?
网页中的ajax请求越来越多,或者应用开始就一直使用ajax与后端进行数据交换。(目前我在公司参与的项目就是如此)N多接口前后端来回调试是个麻烦事。
后端不可能短时间把所有的接口都写完,也不会为了前端测试而制造假的数据和接口,不仅耗费时间而且到了开发阶段返回的数据结构、接口名称也可能会有许多改动。那么后端
一边写接口一边给前端,这看起来不错。但在具体实施过程中,后端未完成的接口可能有错误,你需要不停的和后端沟通不停的找原因,有可能中途还会停滞等待后端返回数据正
确才能继续。
为什么会这样?
1:前端在开发初期就依赖了未成形的接口。
2:后端不完全知道前端需要的数据项及数据格式。
如何解决?
1:需求确认会议中前后端充分讨论功能和接口。(需求明确的backlog,这个工作非常简单)
在有完善的backlog文档前提下,用户的每个操作都被记录成明确的功能。只要在最后的确认中开发人员一致认同这些条目,就很容易总结出需要的接口。
2:前端写接口文档(后端辅助)。
为什么是前端?
1:前端完全了解页面需要展示的数据。2:前端完全了解需要的数据格式(如何处理错误码等等)
前端的接口文档可能是这样:(示例登录接口)
1:用户登录
url: ? (留给后端补充)
请求方式:POST
请求参数:email:String
pwd:String
checkCode:String
返回数据:
{
code:int
,//
错误编码,登录成功为0 其他错误返回错误编码,没有result项
result:{
id:int
//
用户ID
name:string //
用户名
...
}
}
后端如何辅助?
1:补充请求url。2:修正返回数据的字段。如果返回数据项很多文档中的字段不符合后端的开发字段,那么后端需要修改过来。
修改文档是一个前后端讨论的过程,有任何疑问都可以沟通。文档完成以后各自一份。(文档中任何修改都可以使用其他颜色标注,提醒其他人员注意)
后端补充完整以后可能是这样:
1:用户登录
url: user/login.php (补充)
请求方式:POST
请求参数:email:String
pwd:String
checkCode:String
返回数据:
{
code:int
,//
错误编码,登录成功为0 其他错误返回错误编码,没有result项
result:{
id:int
//
用户ID
user:string //
用户名(修改)
...
}
}
3:开发过程完全依照文档
文档完成以后,大家心里都很清楚我只要这样做,返回、使用这样的数据就一定没错。
后端开始写代码,完全不用理会前端,他根本不会来找你的麻烦。
前端如何依照文档开始工作?
接口都有了,返回数据也有了。那么接下来的工作就是构建一套可以使用模拟数据测试的框架。
如果使用jquery,一个简单的结构可能是这样。
用户点击登录按钮,前端模拟了文档中描述的数据,直接调用了回调函数。这跟真实情况一样。
View Code
如何更好的工作?
全部功能接口都采用这样的方式工作,会发现整个应用不需要后端支持,完全用模拟数据就可以验收测试,是不是酷了一点呢!
一旦你准备链接正式数据,注释掉测试代码以后(这可能分布在代码的各个角落,10处或者更多)。你不能在测试环境、链接数据库的环境中快速切换!
这样的测试代码价值太有限。
我们可以把测试数据独立出来作为一个文件,使用方法覆盖的方式把最底层的AJAX请求方法覆盖。
View Code
上面的代码很容易理解,想要模拟数据测试的时候就把最底层的ajax请求方法覆盖掉。
当然这只是其中的一种,你可能有更好的方法或者通过一个全局变量就可以切换两个环境,就好象 debug = false, debug = true 这样!
最后
方法说透了其实也非常简单,重要的是scrum中backlog的分解和理解。
我所在的团队现在采用这种方式工作非常顺利。
最后我一直在考虑一个合并混淆压缩有500K JS 的应用如何组织代码?
分享到:
相关推荐
【让AJAX不依赖后端接口实现方案】 在现代网页应用中,AJAX(Asynchronous JavaScript and XML)已经成为实现页面动态交互和数据交换的关键技术。然而,在开发过程中,前端和后端之间的接口协同往往成为效率瓶颈。...
在描述中提到的`AjaxJson.java`文件,就是这样一个实体类,它的设计目的是为了简化后端接口的返回数据封装,使得前端可以直接理解并处理这些数据。 `AjaxJson.java`的可能实现会如下所示: ```java public class ...
url: 'your_server_endpoint', // 后端接口URL type: 'POST', // 请求类型,通常是GET或POST data: {key1: 'value1', key2: 'value2'}, // 要发送的数据,键值对形式 dataType: 'json', // 预期的响应数据类型 ...
### JSON Server 模拟后端接口教程 #### 一、前言 对于前端开发者而言,掌握Ajax技术至关重要。然而,在实际开发过程中,由于缺乏后端支持或接口未完成,经常面临无法进行有效测试的问题。本教程旨在通过使用`json...
url: 'submitForm', // 后端接口URL type: 'POST', data: formData, dataType: 'json', success: function(response) { console.log('提交成功:', response); // 处理成功后的逻辑,如提示用户、跳转等 }, ...
由于Ajax请求不像传统的表单提交那样可以使用Spring Security的默认配置,因此我们需要特殊处理Ajax登录请求问题。 知识点3:解决方案 为了解决Ajax登录请求问题,我们可以使用Spring Security的 Ajax 登录请求...
1. **避免过度依赖**:mock服务是为了加速开发,但不能替代实际的后端接口测试,确保在项目后期与真实接口进行对接和测试。 2. **版本管理**:随着项目的迭代,mock数据也需要同步更新,保持与后端接口的一致性。 3....
Ajax的核心是XMLHttpRequest对象,它提供了一个在后台与服务器通信的接口。通过Ajax,开发者可以实现异步数据请求,提高用户体验,比如页面无刷新更新、局部刷新等效果。虽然名称中有XML,但实际应用中,传输的数据...
本案例重点讲解如何利用前端的JavaScript(特别是AJAX)和后端的PHP来实现这样的功能,同时依赖HTML5的新特性。下面我们将详细探讨涉及的技术点。 1. **HTML5 File API** HTML5引入了File API,允许在浏览器中对...
- **依赖关系**:分析接口间的依赖关系,如登录后才能执行其他操作。 - **版本控制**:记录接口的更新历史,方便追踪和回溯。 5. **接口安全** - **数据加密**:敏感信息如密码应进行加密传输。 - **权限控制**...
总结来说,这个H5 Web录音并上传后端的demo是学习和实践现代Web技术的好例子,涵盖了H5的Web Audio API、JavaScript事件处理、Ajax通信以及用户权限管理等多个关键知识点。理解并实现这样的功能,对于提升Web开发者...
在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术极大地提升了用户体验,它允许网页在不刷新整个页面的情况下与服务器进行交互。Struts作为Java EE领域的一款经典MVC框架,常用于构建企业级应用。而...
这门教程深入浅出地讲解了Java在构建微信小程序后端服务中的应用,让开发者能够掌握从服务器端处理数据、响应小程序请求到实现页面动态化的一系列技能。 首先,我们要理解Java在后端开发中的角色。Java是一种广泛...
由于是静态页面,意味着它不依赖服务器端动态渲染,可以直接通过浏览器进行浏览和运行,极大地简化了部署流程。 HTML5是现代网页开发的基石,它在HTML4的基础上增加了许多新特性,如离线存储(localStorage和...
但这并不意味着后端完全不参与,而是说Ajax技术让前端具备了与服务器进行异步通信的能力,减少了对后端接口的依赖。后端依然需要提供相应的API,用于处理前端发送的请求和返回必要的数据。 Ajax的核心是...
在SpringBoot和Vue.js结合的项目中,通常使用Axios或Vue-resource等库作为HTTP客户端,通过发送Ajax请求与后端API进行通信。例如,Vue组件可能会发送GET请求获取课程列表,或者POST请求提交用户注册信息。 六、网课...
这种无缝对接的效果主要依赖于AJAX(Asynchronous JavaScript and XML)技术,配合后台数据处理来实现。下面我们将详细讲解如何利用AJAX、JSP和Java来构建这样的功能。 首先,我们需要理解AJAX的核心原理。AJAX允许...
在前后端分离的项目中,前端开发者通常需要依赖后端提供的接口来获取数据。然而,在早期开发阶段,后端可能还没准备好这些接口,或者在持续集成和测试环境中,后端服务可能不可用。这时,xe-ajax-mock就可以派上用场...
6. **交互优化**:为了让用户体验更好,可以使用Ajax的异步特性,在用户输入时实时验证,而不是等用户提交表单后再反馈结果。这样可以即时反馈,减少用户的等待时间。 总的来说,这个案例帮助学习者理解如何在SSM...