使用mockjs 随机生成模拟接口数据

上一篇 我们用json-server做了假数据

json-server模拟后端接口 https://cloud.tencent.com/developer/article/1541622

json-server对数据进行增删改查操作 https://cloud.tencent.com/developer/article/1541621

但是发现了有一个不方便的地方就是,那些数据需要自己手动生成 ,自己来定义一些数据结构,在json文件里面复制或者粘贴,当数据量很多的时候,岂不是很累了~

于是今天打算使用mockjs 随机生成模拟接口数据,要多少就有多少哦,准备工作,还是先要安装最新版本的node和npm哦

mockjs官网: http://mockjs.com/

1:在D盘新建一个文件夹Mockjs

打开cmd,右键管理员身份运行 进入Mockjs的根目录

2:在根目录下安装mockjs依赖
cnpm install mockjs

3:在根目录底下新建文件夹mock,里面写db.js

写代码db.js

let Mock=require('mockjs');//引入mockjs模块
let Random = Mock.Random;

module.exports = function() {
    var data = {//定义等下要返回的json数据
        news: []
    };

    var images = [1,2,3].map(x=>Random.image('200x100', Random.color(), Random.word(2,6))); //随机成长3个图片信息 尺寸 颜色 和随机字母的数组

    for (var i = 0; i < 100; i++) {

        var content = Random.cparagraph(0,10);//随机生成0到10段句子

        data.news.push({
            id: i,//固有id
            title: Random.cword(8,20),//随机长度为在8到20内的汉字字符串
            desc: content,
            tag: Random.cword(2,6),//随机长度为2 到 6 的汉字
            views: Random.integer(100,5000),//100到5000的随机整数
            images: images.slice(0,Random.integer(1,3)),//截取随机一到三个图片
            time:Random.date()
        })
    }
    return data //返回json数据
}
3:运行
json-server mock/db.js
或者指定端口运行
json-server mock/db.js --port  3003
4:在浏览器里面打开

这个时候可以看到,已经生成了接口啦. http://localhost:3000/news

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏禅林阆苑

前端自动化测试实践05—cypress-e2e入门

在 jest 单元测试中使用快照、API-mock 和 DOM 样式状态断言已经能够实现基础的 UI 测试,但是单元测试属于白盒测试,更关注数据的流动,而端到端...

19830
来自专栏京程一灯

在现代 JavaScript 中编写异步任务[每日前端夜话0xDD]

在本文中,我们将探讨过去异步执行的 JavaScript 的演变,以及它是怎样改变我们编写代码的方式的。我们将从最早的 Web 开发开始,一直到现代异步模式。

6330
来自专栏AndroidTv

扩展 Object.assign 实现深拷贝

但深拷贝,它是基于一个原对象,完完整整拷贝一份新对象出来,假如我们的需求是要将原对象上的属性完完整整拷贝到另外一个已存在的对象上,这时候深拷贝就有点无能为力了。

11520
来自专栏京程一灯

共享可变状态中出现的问题以及如何避免[每日前端夜话0xDB]

这里有两个独立的部分:函数logElements()和函数main()。后者想要在对数组进行排序的前后都打印其内容。但是它到用了 logElements() ,...

9440
来自专栏健程之道

log4j日志不输出的问题

今天服务器上报错,想先去看一下日志进行排查,结果发现日志很久都没有输出过了。从上午排查到下午,刚刚解决,因此记录一下,但现在也只是知其然,并不知其所以然,所以如...

12320
来自专栏京程一灯

在 Node.js 上运行 Flutter Web 应用和 API[每日前端夜话0xDC]

大量的跨平台应用开发框架,使你可以编写一次代码,然后在 Android,iOS 等多个平台上甚至在台式机上运行。你可能听说过一些流行的框架,例如 Ionic,X...

8910
来自专栏AndroidTv

手写实现深度拷贝

那么,对一个对象进行拷贝,无非就是对对象的属性进行拷贝,按照拷贝处理的方式不同,可分为浅拷贝和深拷贝:

8930
来自专栏joealzhou

Git Commit校验

在我们iOS项目的根目录下执行下面命令:这条命令会在项目根目录生成package.json配置文件。

11140
来自专栏京程一灯

7个常见的 JavaScript 测验及解答[每日前端夜话0xDE]

我相信学习新事物并评估我们所知的东西对自己的进步非常有用,可以避免了我们觉得自己的知识过时的情况。在本文中,我将介绍一些常见的 JavaScript 知识。请享...

6120
来自专栏草根专栏

.NET Core 3.0 本地工具

.NET Core从最早期的版本就开始支持全局工具了。如果仅仅需要在某个项目中或某个文件夹中使用特定的工具,那么.NET Core 3.0就允许您这样做。

8640

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励