`
tangyuan1314
  • 浏览: 39810 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

【分享】让AJAX不依赖后端接口

    博客分类:
  • java
阅读更多

问题是怎么个情况?

  网页中的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不依赖后端接口实现方案】 在现代网页应用中,AJAX(Asynchronous JavaScript and XML)已经成为实现页面动态交互和数据交换的关键技术。然而,在开发过程中,前端和后端之间的接口协同往往成为效率瓶颈。...

    AjaxJson实体类与依赖包

    在描述中提到的`AjaxJson.java`文件,就是这样一个实体类,它的设计目的是为了简化后端接口的返回数据封装,使得前端可以直接理解并处理这些数据。 `AjaxJson.java`的可能实现会如下所示: ```java public class ...

    HTML使用极简的方式通过ajax请求实现前后端交互代码实现

    url: 'your_server_endpoint', // 后端接口URL type: 'POST', // 请求类型,通常是GET或POST data: {key1: 'value1', key2: 'value2'}, // 要发送的数据,键值对形式 dataType: 'json', // 预期的响应数据类型 ...

    json-server模拟后端接口(教程).pdf

    ### JSON Server 模拟后端接口教程 #### 一、前言 对于前端开发者而言,掌握Ajax技术至关重要。然而,在实际开发过程中,由于缺乏后端支持或接口未完成,经常面临无法进行有效测试的问题。本教程旨在通过使用`json...

    ajax提交表单到后台

    url: 'submitForm', // 后端接口URL type: 'POST', data: formData, dataType: 'json', success: function(response) { console.log('提交成功:', response); // 处理成功后的逻辑,如提示用户、跳转等 }, ...

    SpringBoot+SpringSecurity处理Ajax登录请求问题(推荐)

    由于Ajax请求不像传统的表单提交那样可以使用Spring Security的默认配置,因此我们需要特殊处理Ajax登录请求问题。 知识点3:解决方案 为了解决Ajax登录请求问题,我们可以使用Spring Security的 Ajax 登录请求...

    xe-ajax-mock1.4.5.js

    1. **避免过度依赖**:mock服务是为了加速开发,但不能替代实际的后端接口测试,确保在项目后期与真实接口进行对接和测试。 2. **版本管理**:随着项目的迭代,mock数据也需要同步更新,保持与后端接口的一致性。 3....

    maven+ajax+json

    Ajax的核心是XMLHttpRequest对象,它提供了一个在后台与服务器通信的接口。通过Ajax,开发者可以实现异步数据请求,提高用户体验,比如页面无刷新更新、局部刷新等效果。虽然名称中有XML,但实际应用中,传输的数据...

    简单的前端加PHP通过AJAX异步多文件上传(依赖HTML5)【案例】

    本案例重点讲解如何利用前端的JavaScript(特别是AJAX)和后端的PHP来实现这样的功能,同时依赖HTML5的新特性。下面我们将详细探讨涉及的技术点。 1. **HTML5 File API** HTML5引入了File API,允许在浏览器中对...

    接口文档模板.docx

    - **依赖关系**:分析接口间的依赖关系,如登录后才能执行其他操作。 - **版本控制**:记录接口的更新历史,方便追踪和回溯。 5. **接口安全** - **数据加密**:敏感信息如密码应进行加密传输。 - **权限控制**...

    h5 web录音并上传后端

    总结来说,这个H5 Web录音并上传后端的demo是学习和实践现代Web技术的好例子,涵盖了H5的Web Audio API、JavaScript事件处理、Ajax通信以及用户权限管理等多个关键知识点。理解并实现这样的功能,对于提升Web开发者...

    Ajax + struts 与 ajax 的 dwr 框架的使用

    在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术极大地提升了用户体验,它允许网页在不刷新整个页面的情况下与服务器进行交互。Struts作为Java EE领域的一款经典MVC框架,常用于构建企业级应用。而...

    Java后端微信小程序视频教程

    这门教程深入浅出地讲解了Java在构建微信小程序后端服务中的应用,让开发者能够掌握从服务器端处理数据、响应小程序请求到实现页面动态化的一系列技能。 首先,我们要理解Java在后端开发中的角色。Java是一种广泛...

    超强后端管理静态页面源码

    由于是静态页面,意味着它不依赖服务器端动态渲染,可以直接通过浏览器进行浏览和运行,极大地简化了部署流程。 HTML5是现代网页开发的基石,它在HTML4的基础上增加了许多新特性,如离线存储(localStorage和...

    Ajax商品滚动无刷新自动更新

    但这并不意味着后端完全不参与,而是说Ajax技术让前端具备了与服务器进行异步通信的能力,减少了对后端接口的依赖。后端依然需要提供相应的API,用于处理前端发送的请求和返回必要的数据。 Ajax的核心是...

    springboot+vue 网课管理系统后端代码

    在SpringBoot和Vue.js结合的项目中,通常使用Axios或Vue-resource等库作为HTTP客户端,通过发送Ajax请求与后端API进行通信。例如,Vue组件可能会发送GET请求获取课程列表,或者POST请求提交用户注册信息。 六、网课...

    ajax实现简单城市三级联动菜单

    这种无缝对接的效果主要依赖于AJAX(Asynchronous JavaScript and XML)技术,配合后台数据处理来实现。下面我们将详细讲解如何利用AJAX、JSP和Java来构建这样的功能。 首先,我们需要理解AJAX的核心原理。AJAX允许...

    xe-ajax-mock1.5.7.js

    在前后端分离的项目中,前端开发者通常需要依赖后端提供的接口来获取数据。然而,在早期开发阶段,后端可能还没准备好这些接口,或者在持续集成和测试环境中,后端服务可能不可用。这时,xe-ajax-mock就可以派上用场...

    ssm+ajax使用于学习ajax的新手案例

    6. **交互优化**:为了让用户体验更好,可以使用Ajax的异步特性,在用户输入时实时验证,而不是等用户提交表单后再反馈结果。这样可以即时反馈,减少用户的等待时间。 总的来说,这个案例帮助学习者理解如何在SSM...

Global site tag (gtag.js) - Google Analytics