前言

大家好,我是林三心

前后端拆散

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

近几年开始转为前后端拆散的开发模式,升高前后端耦合度,大大提高了我的项目开发的效率,这个模式也是当今最风行的开发模式了:

  • 前端:只负责写前端页面和逻辑
  • 后端:只负责写服务端的逻辑

暗藏的问题

前后端拆散是一种十分优良的开发模式,这毋庸置疑,然而再好的开发模式,也是有他的一些弊病,我就举个例子吧

场景

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

  • 第一天:前端后端一起开发
  • 第二天:前端开发完,后端未开发完
  • 第三天:前端没事做,后端未开发完
  • 第四天:前端没事做,后端开发完了
  • 第五天:前端对接接口,发现问题,修复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的根本应用可拜访帮忙文档:

  • https://www.apifox.cn/help/

接下来就让我简略演示一些,前后端应用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);  };

总结

大前端时代,想要提高效率,工具的抉择是很重要的,感激Apifox研发团队,能做出这么一款简略实用的工具,应用前跟应用后,整个团队的开发效率真的进步了一个品位。

这是官网:官网