问题是怎么个情况?
网页中的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 的应用如何组织代码?
分享到:
相关推荐
后端不可能短时间把所有的接口都写完,也不会为了前端测试而制造假的数据和接口,不仅耗费时间而且到了开发阶段返回的数据结构、接口名称也可能会有许多改动。那么后端 一边写接口一边给前端,这看起来不错。但在...
在这个例子中,我们将使用Django编写饿了么高校外卖商家查询API接口,并且使用AJAX技术来实现API接口的使用,包括使用ajax get方法加载更多数据,使用ajax方法来更新、修改、新增、删除数据。利用API可以做到前后端...
前端使用 H5+CSS3+JavaScript 及其 Jquery,BootStrap 框架来构建页面和利用 AjAx 调用后端接口 项目文件架构: -- db 数据库脚本文件 -- static 所用静态资源 (css,js,image等,其中 uploads 为文件上传后保存地址...
cordova-plugin-...本插件基于后端的两个ajax接口进行最新版本号以及更新URl的查询,所以使用此插件的同时,请不要忘记开发相应的后端接口,并修改插件源码中的 接口URL地址。调用后端接口时使用AFNetWorking库。
Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新。 Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信。 vue-resource是一个通过XMLHttpRequrest或JSONP...
Umi组件库:ant-design开发语言:TypeScript Ajax库:Axios样式:少项目目录├── config # 项目相关配置│ ├── config.js # umi相关配置│ └── router.config.js #├── mock # 后端接口模拟│ ├── logi
为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,需要搭建一个本地服务环境(mock server)。 功能 实现请求接口代理到本地动态mock数据 依赖MOCK.JS Note: mock.js用于生成随机数据,拦截 Ajax 请求
它依赖于提供 ajax 接口和错误处理的 xi-bundle-ajax。 由于 xi-bundle-ajax,Dialogbundle 对话框可以优雅地处理后端错误。依赖关系xi-bundle-ajax安装作曲家.json "require" : { ... "xi/dialog-bundle" : "2.3.x...
本项目需要对应的后端接口、信令环境才能正常运行,本文章只涉及前端内容。 项目依赖模块: NodeJs readline:命令行输入 ws:与服务端建立websocket连接 superagent:与服务端建立请求连接,效果类似ajax请求 ...
后端技术:采用SSM框架进行后端开发,其中Spring负责依赖注入和事务管理,SpringMVC负责请求分发和响应处理,MyBatis负责数据库操作和映射。 数据库技术:使用MySQL数据库存储用户信息、旅游产品信息等数据,通过...
该项目都是测试过了的,真实可靠,请放心使用...Spring Boot 提供了 spring-boot-starter-websocket 来快速实现消息推送,同时也可以整合流行的 RPC 框架,提供 RPC 服务接口(只要简单加入对应的 starter 组件即可)。
axios:调用后端接口的ajax工具 vuex:全局状态管理工具 vue-router:路由工具 等等 个人说明 一.网址说明: 后台管理系统: 功能版:101ycy.com:6001,此版本菜单和权限在"系统管理"页可配置 精简版:101ycy.com:6002,此...
项目特色 1. 本项目使用现行主流技术与架构模式(控制层、服务层、数据层) 2. 代码结构清晰,严格遵循模块化、组件化、接口化...2. IDEA 导入后端 Maven 项目,环境配好后会自动依赖 3. 启动后台,看到后台日志打印:
业务逻辑层为了增加程序的可扩展和可维护性,每一个业务模块都有自己的接口以及实现类;数据访问层为了将SQL语句从程序代码中彻底分离,降低耦合度,使用了Mybatis持久层框架,并利用spring的IOC容器管理三层结构的...
安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器(Sass,Less等) 添加图像,字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导...
纯前端项目,所有ajax接口保留,采用模拟数据,实际开发过程中稍作修改即可对接后端。预览预览方式: 下载该项目代码,用webstorm打开即可预览(或用其他内置http服务器的IDE打开)实现功能拓扑图的加载工具栏、...
百度云盘分享 简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对...
该项目是通过引导的。... 使用AJAX请求获取数据与API后端集成节点Ruby on Rails 在开发中代理API请求配置代理后出现“无效的主机头”错误手动配置代理配置WebSocket代理在开发中使用HTTPS 在服务器上生成动态<met
安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器(Sass,Less等) 添加图像,字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导...