前端开发没拿到接口该如何模拟数据呢?
作者:互联网
在日常开发过程中后端有时接口还没出来,这个时候我们需要用到数据,那么就需要模拟数据了。
本地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
可以模拟接口,线上,简答,操作方便
标签:没拿到,mlcdn,接口,webp,750x300,https,v1c0.81,com,前端开发 来源: https://blog.csdn.net/qq_56126374/article/details/120867767