钌子_rawbin

2017-08-01 09:15

前后端联调实践总结

本文作者:IMWeb 钌子_rawbin 原文出处:IMWeb社区 未经同意,禁止转载

联调的认知和感触

认知(讨论)

  • 为什么要联调?
  • 联调都干些什么?

联调的问题

联调就是后端不好好写单元测试与集成测试,让前端发请求调用以达到测试的目的;前端不好好写Mock和测试,让后端输出数据以达到测试的目的。

更正确地认识

  • 联调是前后端一起见证靠谱的测试结果
  • 给需求方提供一个正确的需求验证环境
  • 尽早暴露前后端实现的问题

联调必备技能

DNS与HOSTS

  • DNS(Domain Name System)的认识
  • DNS提供将域名解析为IP
  • 域名只是便于记忆,真正起作用的还是IP
  • GFW作用,HOST翻墙
  • 域名解析顺序
  • 浏览器缓存>浏览器代理>HOST文件>系统DNS缓存
  • 本地DNS服务器>上级DNS>...>顶级DNS

HOST配置的姿势

更改HOST不即时生效问题

原因

  • 浏览器有HOST缓存
  • 浏览器复用了原有HOST的Socket连接

解决办法

  • 重启浏览器或者打开新的浏览器
  • 使用Charles/Fiddler等代理,避免此问题
  • 使用Chrome工具,强行重置Socket连接

代理服务配置

代理服务HTTPS抓包问题

  • 打不开页面? 需要根据Charles Help菜单中规则添加Charles根证书
  • 某些包解不开?需要在Charles代理设置里面配置具体的解包域名
  • 线上证书不安全?解包后再封的包跟原来的有些区别,需要单独打开对应页面进行信任

特定场景的调试姿势

PC/Touch页面

  • 配置前后端环境
  • 配置HOST
  • 直接使用浏览器及浏览器模拟器调试
  • 如果只是前端更改,在不影响数据的情况下,可以使用线上页面调试

App页面

真机调试

  • 手机上安装Beta包,使用数据线连上电脑
  • 允许调试或者开启Inspect
  • 通过chrome://inspect 或者Safari的开发者工具进行调试

模拟器调试

  • Xcode模拟器
  • 搞一个可以在模拟器里面跑的App
  • 将App拖入模拟器,然后打开,用Safari开发者工具调试

微信调试

如何更有效地联调

明确前后端的约定

  • 根据需求一起约定交互的内容
  • 包括但不限于如下内容
  • 接口名称、请求路径、请求方式
    • 返回字段结构、对应字段名和字段类型以及字段边界值
    • 异常情况数据约定
  • 一份逼真的样例数据
  • 前端可以根据这个数据造出各种数据

后端对约定的履行

  • 根据约定实现相应的需求
  • 使用Postman 进行接口测试
  • 使用浏览器进行接口jsonp功能测试

前端对约定的履行

  • 根据约定实现相应的需求
  • Mock数据
    • 使用FEKit Mock数据
    • 使用YKit Mock数据
    • 使用Charles/Fiddler 代理接口响应
    • 任意其他Mock,代理,转发工具获取Mock数据
  • 通过变换Mock数据,进行功能测试

真正的联调

  • 前端完成自测
  • 后端完成自测
  • 一起验证需求的实现

友情建议

  • 远离关键路径,合理调配时间——别拖后腿
  • 把握全局进度,提高整体效率——别浪费时间
  • 积极沟通交流,主动推进联调——别甩锅
0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。