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

前言

编辑

前后端分离

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

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

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

编辑

隐藏的问题

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

场景

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

• 第一天：前端后端一起开发
• 第二天：前端开发完，后端未开发完
• 第三天：前端没事做，后端未开发完
• 第四天：前端没事做，后端开发完了
• 第五天：前端对接接口，发现问题，修复bug
• 第六天：前后端对接完成，交付测试

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

解决问题

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

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

• 不够纯粹，还是得写一些服务端的代码
• 不够简单，使用过程还得去看Mock文档
• 不够实时，后端改字段后，前端对应mock也得进行修改

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

Apifox——API工具届的王者

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

编辑

编辑

编辑

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

云端Mock

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

• 1、够纯粹，你不需要写任何mock代码
• 2、够简单，复制链接过来就行
• 3、够实时，后端改数据，前端不需改请求代码，只需进行前端适配即可

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

• www.apifox.cn

接下来就让我简单演示一些，前后端使用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

编辑