前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用Mock.js和json server快速生成前端测试数据

使用Mock.js和json server快速生成前端测试数据

作者头像
害恶细君
发布2022-11-22 08:35:47
1.3K0
发布2022-11-22 08:35:47
举报
文章被收录于专栏:编程技术总结分享

下面演示的是我总结的一个使用示例,帮助大家参考学习,看完后,如果大家有其他需求,可以参考Mock.js 的官方文档,需要生成哪些格式的数据,复制样例代码即可,本案例重在演示如何使用Mock.js和json server自动生成前端开发测试用的接口数据。

先创建一个项目文件夹,取名为mock,初始化一下项目:

代码语言:javascript
复制
npm init -y

之后安装mock.js:

代码语言:javascript
复制
npm install mockjs --save-dev

安装json-server,可以选择全局安装:

代码语言:javascript
复制
npm install -g json-server

安装好这两个依赖后,在项目根目录下面新建一个db.js(名字任取),然后编写如下的代码:

代码语言:javascript
复制
const Mock = require('mockjs')

// Mock.Random 是一个工具类,用于生成各种随机数据。
const Random = Mock.Random

// 导出数据
module.exports = () => {
  // 定义要导出的数据
  let data = { news: [] }
  // 生成数据
  for (let i = 0; i < 20; i++) {
    data.news.push({
      id: i,
      content: Random.paragraph(),
      createTime: Mock.mock('@date("yyyy-MM-dd HH:mm:ss")'),
    })
  }
  // 把数据导出
  return data
}

mock.js的官方样例文档中,有很多种类数据的样例代码,用到复制粘贴即可,不需要背。

最后我们启动json-server,就可以模拟生成后端数据了:

代码语言:javascript
复制
json-server --watch --port 3333 --host 127.0.0.1 db.js
在这里插入图片描述
在这里插入图片描述

之后就可以访问 http://127.0.0.1:3333/news 就可以访问到数据了,甚至可以通过json server对数据进行增删改查等的操作。

在这里插入图片描述
在这里插入图片描述

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档