前后端分离前端mock数据-fastmock

1,927 阅读2分钟

简介

目前的前后端开发中比较常采用前后端分离的做法,而前后端分离在沟通和联调方面又时长会有障碍,比如前后端进度不一、前后端联调时间较短、前后端沟通麻烦(跨地区、跨时区等等)。针对这些问题,我们一般都有以下几种解决方案:

  • 本地手写数据模拟,在前端代码中产生一大堆的mock代码。
  • 利用mockjs或者canjs的can-fixture实现ajax拦截,本地配置必要的json规则。
  • 后端在Controller层造假数据返回给前端。

上面的方式中,不管哪一种方式,都会要求开发人员写一些跟项目本无任何关联的代码,第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。比如下面的mock数据

本次作者推荐使用的是fastmock,非常便捷的一个线上moke数据网站,网址(www.fastmock.site)适合

fastmock将mock层独立出来,通过中间服务的形式在前端和后端服务之前建立一道围栏,使用fastmock,前端只需要修改自己的XHR请求地址,后端只需要在开发前和前端约定好接口文档即可。等到后端服务开发完成,前端再将XHR请求地址替换回来进行联调测试即可。

步骤:

fastmock使用起来特别简单

创建项目

创建接口

接口预览

是不是so easy,so 便捷!

结尾彩蛋

欢迎关注我的公众号-前端之阶,关注更多前端知识,加入前端大群,与知名互联网前端大佬做朋友,前端技术更新太快,开启共同学习新篇章!

image