写点什么

前后端如何并行开发,云端 mock 了解一下

作者:Liam
  • 2022 年 6 月 20 日
  • 本文字数:1603 字

    阅读完需:约 5 分钟

前言

前后端分离

回想起几年前那种前后端一体的时代,就有点抓狂,那时候如果一个项目给一人负责还好,要是多人开发,那简直是麻烦上天了(懂的都懂)


近几年开始转为前后端分离的开发模式,降低前后端耦合度,大大提高了项目开发的效率,这个模式也是当今最流行的开发模式了:


  • 前端:只负责写前端页面和逻辑

  • 后端:只负责写服务端的逻辑


隐藏的问题

前后端分离是一种非常优秀的开发模式,这毋庸置疑,但是再好的开发模式,也是有他的一些弊端,我就举个例子吧

场景

某一天,产品给个一个需求,前后端进行开发


  • 第一天:前端后端一起开发

  • 第二天:前端开发完,后端未开发完

  • 第三天:前端没事做,后端未开发完

  • 第四天:前端没事做,后端开发完了

  • 第五天:前端对接接口,发现问题,修复 bug

  • 第六天:前后端对接完成,交付测试


可以看出,整个项目开发周期是六天,中间有两天,前端是没事做的,因为他需要等待后端的所有接口全都写完了才能开始对接

解决问题

其实问题出现在中间两天这段时间里,如果这段时间里,前端能提前把后端写好的那部分接口对接了,那就不至于没事做,这也能大大缩短整个项目的开发周期了~


而想要达到这种效果,那就不得不提到 Mockjs 了,通俗点说就是:前端在通过 Mockjs 制造假数据,对后端写好的一部分接口进行调试对接,但是我经过我用了这么多 Mockjs 库,我得出了一些弊端:


  • <span style="color: red">不够纯粹,还是得写一些服务端的代码</span>

  • <span style="color: red">不够简单,使用过程还得去看 Mock 文档</span>

  • <span style="color: red">不够实时,后端改字段后,前端对应 mock 也得进行修改</span>


那有没有这样的工具,够纯粹、够简单、够实时呢?推荐一下我最近用的 Apifox 这个工具~

Apifox——API 工具届的王者

Apifox 无疑是当前最好用的 API 文档工具,API 自动化测试工具,API Mock 工具,接口文档管理工具,接口文档生成工具。是当今 API 工具领域当之无愧的王者!!!





我最近在使用它的一款功能——云端 Mock

云端 Mock

我先说说云端 Mock 功能的好处吧:


  • 1、够纯粹,你不需要写任何 mock 代码

  • 2、够简单,复制链接过来就行

  • 3、够实时,后端改数据,前端不需改请求代码,只需进行前端适配即可


对于 Apifox 的基本使用可访问帮助文档:



接下来就让我简单演示一些,前后端使用 Apifox 进行合作开发时,有多高效吧~


1、新建个人项目

首先进入 Apifox 的网页版地址(原文链接处可进入),然后新建一个项目(名字随便取的啦~)


2、新建一个接口

点击新建接口,进行接口的创建



往下滚动,你会发现返回响应这个分区,在这里可以定时此接口的返回数据结构,并可以在此处进行 Mock 规则的选择,Apifox 提供了超多 Mock 规则供你选择!!!



真的。。很多 Mock 规则供选择啊,我想到的都有了~



然后再往下滚动,你会发现响应示例这个分区,这个分区可神奇了,它能根据你刚刚定义的返回响应,生成一个示例,牛逼~




然后点击保存,我们这就算创建完一个接口啦!!!怎么样?是不是超级快?我大概算了一下,我创建这个接口只用了 2 分钟~你没听错,2 分钟哦~~

3、开启云端 Mock

最最最牛逼的环节来了!!!开启云端 Mock 这个功能!




然后我们返回接口管理,选择咱们刚刚新建的那个接口,记得把右上角的运行环境切换成远端 Mock

4、调试接口

万事俱备,只欠东风。最后咱们只需要点击发送即可马上调试接口,看着生成的数据,是不是很兴奋,我用不到 5 分钟的时间就写完并调试完一个接口!


5、前端请求

前端只需要复制此接口的链接,并进行请求即可,当后端修改某个接口信息时,前端的请求代码并不需要更改~因为地址还是那个地址,前端只需要对修改的数据进行适配即可~



const request = async () => {    const data = await axios.get(      "https://mock.apifox.cn/m1/1033520-0-default/api/v1/shop"    );    console.log(data);  };
复制代码

总结

大前端时代,想要提高效率,工具的选择是很重要的,一款简单实用的工具,使用前跟使用后,整个团队的开发效率真的提高了一个档次。👍🏻


官网地址:www.apifox.cn



用户头像

Liam

关注

没有一个bug是无辜的! 2021.12.23 加入

一个简单的程序员!

评论

发布
暂无评论
前后端如何并行开发,云端mock了解一下_前端_Liam_InfoQ写作社区