前端后端的爱恨情仇

简介: 还记得以前在干后端的时候,经验要跟前端妹子对接,虽然妹子很好看但是在联调的过程中还是忍不住争得面红耳赤。那么如何化解这段孽缘呢

请添加图片描述


一、API爆炸的时代

请添加图片描述

随着最近行业的移动化、物联网化、数字化转型、微服务等多种概念的提出,对应的API数量已经呈现出爆炸式增长,由此带来的问题就是前后端的接口对接问题越来越来突出,我们能很难找到一个合适的技术工具提高我们的效率。由此带来的问题就是接口对接的繁琐,前端后端日常吵架。

1.背景介绍

现在我们其实有很多的API工具,在API文档设计有大名鼎
鼎的Swagger,API开发调试我们有Postman、前端开发用的比较多的式Mock.js、自动化测试我们拥有JMeter,但是由于是多个软件,我们需要多次的输入相同的重叠数据到不同的系统才能实现我们需要的功能,而且在项目发生变更的时候我们就不得不进行多个地方的修改,一不留神忘记修改就是boom。

2.问题引出

所以为了应对上面的需求,我们需要的就是将这几个常用软件可以融合到一起,如果能够做到数据完全互通,当我们修改一个地方的时候所有地方都进行修改那就太完美了。

3.解决方案

请添加图片描述

今天在网上冲浪的时候发现了Apifox这款神器,官方宣传就是将多种行业的巨头软件进行了整合为一个统一的程序,通过一套系统、一份数据,解决多个系统之间的数据同步问题。只要定义好接口文档,接口调试、数据 Mock、接口测试就可以直接使用,无需再次定义;接口文档和接口开发调试使用同一个工具,接口调试完成后即可保证和接口文档定义完全一致。高效、及时、准确!官网地址
软件现在已经支持web版了,所以整体的体验都是在web上进行的。


二、核心功能

1.API文档

在这里插入图片描述
在API文档部分,不在是往日冷冰冰的文档,而是完全可视化、这无疑降低了我们的学习成本、并且文档是遵循 OpenAPI 规范的,也能提高我们文档的规范性。

2.API调试

在这里插入图片描述
在接口调试部分,我们一个接口可以创建多个用力并且自动跟随接口进行变更,并且Postman用的功能,Apifox都拥有,可以进行环境变量、全局变量、前后置脚本、全局共享等等功能,可谓是全面。并且支持运行任何语言代码:js、java、py、php等。

3.Mock 数据

在这里插入图片描述
在这里插入图片描述
Apifox完全支持 Mock.js 语法、并且扩展身份证、国内手机号等常用规则,可以根据接口定义里的数据结构、数据类型,自动生成 mock 规则。并且内置智能 mock 规则库,根据字段名、字段数据类型,智能优化自动生成的 mock 规则。可自动识别出图片、头像、用户名、手机号、网址、日期、时间、时间戳、邮箱、省份、城市、地址、IP 等字段,从而 Mock 出非常人性化的数据。支持自定义规则库,满足各种个性化需求。支持使用 正则表达式、通配符 来匹配字段名自定义 mock 规则。

4.自动化测试

在这里插入图片描述
请添加图片描述
支持对相关的测试用例步骤和对应的数据配置完成后进行自动化测试、我们可以很方便的对代码进行自动化测试。

5. 在线调试

这个文档是用 Apifox 做的,我之前有试用过这个工具,没想到最近又有这么多厉害的新功能出来了。
点击文档右上角的运行按钮,就会出现“在线运行”的模块

https://mmbiz.qpic.cn/mmbiz_png/Y2mibLibqKzHnibFKic9DVpphVmfO6Uk3BYyswSVMFGl00voibSWOD6sDUUHo1lmxTZOmBMSe7Ln2eRjajgTWSCCiaNQ/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

这个界面上就能直接调试接口了!直接 1. 填参数,2. 选环境,3. 点发送,接口请求就发出去了!下面就有返回结果!根本用不着 Postman!更不用把 API 照着抄一遍!

https://mmbiz.qpic.cn/mmbiz_png/Y2mibLibqKzHnibFKic9DVpphVmfO6Uk3BYyg5v3t05gCkoAAkZkXojECZgp9ib9SBG7wIkYG1ibd0oF28m1csfibqayA/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

我心想,如果当时上线之前,用的是 Apifox 的话,那简直是不会出现事故:

  1. 参数不存在?我在线调试后获得数据了,通过比对我知道哪个参数不存在
  2. 参数类型错误?同样的,在线调试之后,通过比对,我知道哪个参数的类型是错的
  3. 接口不存在(是因为接口写错了)?调试的时候就报接口不存在了,第一时间找后端~

三、其他功能

1.代码生成

这个就很离谱,可以直接生成对应的业务代码,解放双手从此成为ctrl + c ctrl + v程序员,可以根据接口/模型定义,自动生成各种语言/框架的业务、模型代码。并且支持 TypeScript、Java、Go、Swift、ObjectiveC、Kotlin、Dart、C++、C#、Rust 等 130 种语言及框架。有点科幻。
在这里插入图片描述

2.数据导入/导出

支持导出 OpenAPI (Swagger)、Markdown、Html 等数据格式。
支持导入 OpenAPI (Swagger)、Postman、HAR、RAP2、JMeter、YApi、Eolinker、RAML、DOClever 、Apizza 、DOCWAY、ShowDoc、I/O Docs、WADL、Google Discovery 等数据格式。
这样就可以方便我们进行数据的迁移。而且我们也可以即时备份存档,从此不为写文档而头秃。
在这里插入图片描述


四、惊喜功能

在这里插入图片描述
作为一个coder,最终的就是进行分享,Apifox官网的API Hub可以让我们方便的查看别人的项目进行学习,同时如果我们做了一份自认为完美的文档也可以进行分享,分享才能使我们更加的强大。可以增强我们的输出能力。


五、总结

整体体验下来,只能说Apifox想的非常全面,可以让我们从文档书写和接口对接工作中解脱出来,更加专注于代码的书写和业务逻辑的梳理,被接口对接烦透了的你不妨尝试一下,你会发现它像一个保姆一样为你做了所有该做的事情。

下载体验一下吧:www.apifox.cn

相关文章
|
5月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
142 2
|
28天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
283 1
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
2月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
167 3
|
4月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
212 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
4月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
49 1
|
4月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
561 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
4月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
365 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
4月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
1533 0
|
4月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    智能编码在前端研发的创新应用
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73