前后端分离架构下的前端模拟经验

在现在流行的“前后端分离”架构中，前后端的联调，是一道必不可少的工序，通常在不借助任何工具的情况下，进行前后端联调大概率会出现以下几种尴尬的局面：前后端开发速度不一致，前端页面写好之后，必需要等待服务端的接口出来，才能有足够的数据支撑UI的显示。服务端接口不能满足界面的需求时，要前端调用发现问题之后，反馈给服务端，然后服务端需要根据要求修改接口定义和业务逻辑，重新部署，前端再重新调用。

从这张图上我们可以看到，项目开发阶段一开始就要先制定接口，并利用mock工具将接口模拟出来，然后前后端分别进行开发，这时候前端是跟mock工具生成的mock数据进行交互的，而后端则开发与测试自己的接口是否正确。在前后端都开发完毕之后，后端再把真实接口部署出来，然后前端把把mock环境切到真实环境，进行联调和测试。由此可以看到，利用mock工具，我们至少能在开发阶段做到真正的前后端分离的状态了。

点击主页右下角的蓝色加号按钮，进入项目创建界面（2）填写基本信息因为我们要基于swagger来创建这个项目，所以注意要在swaggerDocsApi里面填入你项目的swaggerDocsApi的地址（如果你的项目还没有使用swagger，跳过即可）。

（3）查看接口信息点击上图的项目地址，进去之后，你会看到EasyMock将你swagger中的接口都同步过来了。

我们可以看到，上面甚至显示了POST/GET方法，以及一些描述性的文字，这些内容的显示要求写接口的同学定义的更加严谨，swagger注解要写的更加全面。

因为我们现在并没有写请求参数与返回数据之间的关系，所以不出意外的话，随便输入什么值，都可以得到一个模拟数据。

改造后的数金版EasyMock已经部署到了我们的研发测试环境，这个改造主要是为了适配本公司项目的特点，如果你在创建项目的时候不添加这部分的数据或者希望添加其他自定义数据，也完全支持。

如上图所示，我们把App客户端配置的webhost地址更改成了我们EasyMock的地址，并在服务端配置仅拦截接口请求而不拦截页面请求，通过这样的操作，我们就能利用EasyMock创建一个环境稳定的DemoApp，演示的时候再也不用担心环境问题啦。