专栏首页编程微刊使用mockjs 随机生成模拟接口数据

使用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 条评论
登录 后参与评论

相关文章

  • json-server模拟后端接口

    作为一个前端,在实现项目功能的时候,需要在前端写一个静态的json数据,进行测试,但是有的时候,需要涉及到全模拟请求以及请求回来的过程,实现动态增删改查,这个时...

    王小婷
  • ES6系列笔记-JSON对象

    王小婷
  • 使用concurrently模块-同时启动react项目和mock模拟接口

    上一节前面在react项目里面,添加了mock模拟接口,我们知道,启动react项目的命令是npm start,启动模拟接口的命令 是json-server m...

    王小婷
  • MySQL中的json字段

    MySQL5.7.8中引入了json字段,这种类型的字段使用的频率比较低,但是在实际操作中,有些业务仍然在用,我们以此为例,介绍下json字段的操作方法:

    AsiaYe
  • ES6系列笔记-JSON对象

    王小婷
  • dotnetcore 自动迁移工具

    捷义
  • 3.从print到I/O

      平x而论,既然在意双引号的去掉,为何不在意括号的去掉?甚至是print的去掉?前面说过,python程序就是一堆指令的集合,print()就是试图向计算机传...

    py3study
  • 【LeetCode10】盛最多水的容器

    图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下,容器能够容纳水(表示为蓝色部分)的最大值为 49。

    Sam Gor
  • VXLAN篇之EV**

    上回说到了Flood & Learn存在着一些不足,所以,才有了后来的BGP EVPN来实现VXLAN的control-plane。既然说到了这,让我们先看一张...

    SDNLAB
  • 『Go 语言实现简易爬虫:市值前100数字货币交易信息』

    谢伟

扫码关注云+社区

领取腾讯云代金券