前端开发没拿到接口该如何模拟数据呢？

在日常开发过程中后端有时接口还没出来，这个时候我们需要用到数据，那么就需要模拟数据了。

本地json文件：

这种方法很简单，就是新建一个json文件作为数据请求

mock数据

线下

需要下载mockjs

yarn add mockjs -d

根目录下建立mock文件夹，mock下建立index.js

官方文档: http://mockjs.com/

index.js代码

var Mock = require('mockjs')
var fs = require( 'fs' )
var path = require( 'path' )
var data = Mock.mock({"banner|4": [{"id|+1": [ 1, 2, 3, 4],"img|+1": ["https://s18.mogucdn.com/mlcdn/c45406/190509_55i5fi9lgkbdajd68j8gaji32jkjh_750x300.png_999x999.v1c0.81.webp","https://s2.mogucdn.com/mlcdn/c45406/190225_533fe4d24h6ckfj918j78302dbc98_750x300.jpg_999x999.v1c0.81.webp","https://s2.mogucdn.com/mlcdn/c45406/190509_5b77ajb40141cdf18h0gd2g22k3lg_750x300.jpg_999x999.v1c0.81.webp","https://s11.mogucdn.com/mlcdn/c45406/190411_7i3ic1k8k7hl4hgak2982i3bl18kl_750x300.jpg_999x999.v1c0.81.webp"]}]
})
// 输出结果
var result = JSON.stringify(data["banner"], null, 4)//同过对文件的操作生成数据文件到指定的目录
fs.writeFile( path.join( __dirname, '../public/banner.json' ),result, function( error ) {if( error ) throw error console.log( '数据生成成功' )
})

然后node index.js

接着就public目录下就会生成一个banner.json文件

[{"id": 1,"img": "https://s18.mogucdn.com/mlcdn/c45406/190509_55i5fi9lgkbdajd68j8gaji32jkjh_750x300.png_999x999.v1c0.81.webp"},{"id": 2,"img": "https://s2.mogucdn.com/mlcdn/c45406/190225_533fe4d24h6ckfj918j78302dbc98_750x300.jpg_999x999.v1c0.81.webp"},{"id": 3,"img": "https://s2.mogucdn.com/mlcdn/c45406/190509_5b77ajb40141cdf18h0gd2g22k3lg_750x300.jpg_999x999.v1c0.81.webp"},{"id": 4,"img": "https://s11.mogucdn.com/mlcdn/c45406/190411_7i3ic1k8k7hl4hgak2982i3bl18kl_750x300.jpg_999x999.v1c0.81.webp"}
]

然后就可以做请求了

线上

mock除了可以本地使用,还可以线上做数据接口,即远程模拟

网站入口: https://wemock.cn

常用数据模拟（我也在用）

easy-mock

可以模拟接口，线上，简答，操作方便

前端开发没拿到接口该如何模拟数据呢？相关推荐

Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页.查询.排序.Datatables是一款符合上 ...
绝对精品推荐做前端的看下：Web前端开发体会十日谈
20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈一直想写这篇"十日谈&q ...
前端开发常用技巧（update...）
前端开发常用技巧 JS 1.JavaScript删除子节点的方法 2.JS 动态生成div并添加点击事件 CSS 1.文本溢出处理 2.使用伪类添加下划线 3.使用伪类添加下划线下划线居中 4. ...
@拔赤：Web前端开发十日谈
为什么80%的码农都做不了架构师?>>> 一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想, ...
前端开发 ------------------- 十日谈
原文地址 :http://hi.baidu.com/lijing00333/item/1c28309d8b46c7d41e427118 好文一篇对于彷徨的人才说(比如说我)有拨云见日的感觉.. ...
Web前端开发体会十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
前端003_模拟数据接口_easymock
为了不影响大家的学习,如果后端的api数据还没有生成,可以先使用mock.js来模拟数据接口,提供对外服务的api接口. 第三章 1.Mock.js 解决什么问题 2.设么是Mock.js 3.使用E ...
html调后台接口_前后端分离之让前端开发脱离接口束缚（mock）
来源 | https://www.cnblogs.com/milo-wjh/p/6424246.html前后端分重构完成,再书写交互时遇到后台接口尚未完成,无法得到接口返回的测试数据,但是我们又需要一 ...
99%学习前端开发都会遇到的问题，百分之百都没绝对意识
刚刚入行前端的同学都会遇见的几个问题: 学的比较浅,什么都会点,但都不深入. 不会利用搜索引擎. 都2019年了,投简历还上赶集网和58同城不懂得输出个人项目. 培训还是自学,有点纠结学习路线不清 ...