前端模拟数据方法

网友投稿 838 2022-05-30

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

本地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

前端模拟数据的方法

常用数据模拟(我也在用)

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

web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Zookeeper单机模式和集群模式环境搭建
下一篇:Java学习之Maven项目
相关文章