前端的date类型后台接收_前端mock数据(超级详细)

在实际的项目研发过程中，我们经常会遇到如下的尴尬场景：
前端开发依赖于后端接口数据，但是后台人员不足或者无法立即到位，前端迟迟不能开工，或者前端小伙子自己参照ui设计图，完成对应的静态页面（没有数据交互），待后台人员到位，再进行二次开发，协助完成接口对接。

1.什么是mock数据？

前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发；

2.mock数据的优势？

A 团队可以并行工作

有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决；测试过程中如果遇到依赖接口没有准备好，同样可以借助Mock；不会出现一个团队等待另一个团队的情况。这样的话，开发自测阶段就可以及早开展，从而发现缺陷的时机也提前了，有利于整个产品质量以及进度的保证。

B 开启TDD模式，即测试驱动开发

单元测试是TDD实现的基石，而TDD经常会碰到协同模块尚未开发完成的情况，但是有了mock，这些一切都不是问题。当接口定义好后，测试人员就可以创建一个Mock，把接口添加到自动化测试环境，提前创建测试。
可以模拟那些无法访问的资源
比如说，你需要调用一个“墙”外的资源来方便自己调试，就可以自己Mock一个。

C 隔离系统

假如我们需要调用一个post请求，为了获得某个响应，来看当前系统是否能正确处理返回的“响应”，但是这个post请求会造成数据库中数据的污染，那么就可以充分利用Mock，构造一个虚拟的post请求，我们给他指定返回就好了

D 可以用来演示

假如我们需要创建一个演示程序，并且做了简单的UI，那么在完全没有开发后端服务的情况下，也可以进行演示。说到演示了，假如你已经做好了一个系统，并且需要给客户进行演示，但是里面有些真实数据并不想让用户看到，那么同样，你可以用Mock接口把这些敏感信息接口全部替换。

E 测试覆盖度

假如有一个接口，有100个不同类型的返回，我们需要测试它在不同返回下，系统是否能够正常响应，但是有些返回在正常情况下基本不会发生，难道你要千方百计地给系统做各种手脚让他返回以便测试吗？比如，我们需要测试在当接口发生500错误的时候，app是否崩溃，别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock，这一切就都好办了，想要什么返回就模拟什么返回，妈妈再也不用担心我的测试覆盖度了

3.mock数据的几种方式？

写在最前面哈，如果你们公司都是后端在做这一块，额，前端就可以省很多事，比如后端给你写好了假数据，写好了假接口，额，你直接拿来用就可以了；但是这样的公司还是少数，而且这样的后端给我来一打，哈哈哈

第一种

直接在页面写死数据，后期等接口来了，再改成动态的; 哈哈哈这是最简单的，也是最笨的，所以小型的项目，不出5个页面的可以解决，或是每个页面的数据很少的可以解决，但是不推荐，后期太麻烦

第二种

在js里直接声明变量，并给变量赋值，在逻辑脚本中使用，并渲染到dom;

第三种

将模拟数据编辑成json数据或者是零碎的js脚本中，通过请求，取回数据，并进行业务逻辑处理，渲染到dom

第四种 最理想的

- 前后台在需求分解之后，一起定义好接口api，包含：请求url（项目前缀+具体的接口名称）、请求方式、请求参数、数据响应；

- 前端研发人员根据接口约定，模拟请求返回对应的数据，完成对应的交互；

- 后台人员根据接口约定，完成对应的api，并完成对应的自测；

- 待后台人员交付接口api后，前端人员直接修改接口项目前缀，切换到对应的环境，即可进入项目提测。

---

教学开始了哦，搬好小板凳

如果你习惯可视化的接口api，可使用 rap2，如果比较喜欢编程式的，可使用 easy mock。

easy mock

更简单高效的伪造数据​easy-mock.com

1.先注册，注册完有一个演示项目

2.点击右下方蓝色按钮，添加项目