前端如何伪造自己想要的接口数据-json数据用Mock.js语法和YApi来制作自己想要的json数据-CSDN博客

本文介绍如何在前端开发中利用Mock.js语法和YApi工具，生成并管理符合需求的模拟JSON数据，以实现对理想接口数据的伪造，方便测试和开发流程。

前端如何伪造自己想要的接口数据-json数据

场景，最近在做一个vue的大项目，但是没有数据接口啊！也没有自己想要的那个属性，想到的第一种方法居然是用node.js去爬取网页的那些数据，再传到数据库，再写接口，虽然这样可以但是脱离了自己的重心。 于是去网站搜啊搜找啊找 终于找到了一个可以自己通过设置参数就能生成自己想要的数据格式

附属上我写的demo链接：这是写的demo链接，你按F5刷新几下会发现数组对象长度不同，而且内容也不一样、
下俩链接是官网文档和使用说明
http://yapi.demo.qunar.com 就是这个链接、
http://mockjs.com/examples.html Mock.js文档、
还有一个就是怎么用它写数组对象，必须在项目配置的时候必须开启json5
这样才能用mock的@占位符
在这里插入图片描述

接下来给你们演示一个yapi写的数组对象

{"status": 0,
  "message|3-5": [
    {
      "id": "@id",
      "name": "@name",
      "img": "@image('200x150', '#@hex', '#FFF', 'png', '@name')"
    }
  ]
}
![用mockjs.js和json5写的随机产生的数据](https://img-blog.csdnimg.cn/20190916112743568.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29rYm95NTE5,size_16,color_FFFFFF,t_70)
附属上我写的demo链接：[这是写的demo链接](http://yapi.demo.qunar.com/mock/95370/slide_1568601865284)