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

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

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


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


npm init -y


之后安装mock.js:


npm install mockjs --save-dev


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


npm install -g json-server


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

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,就可以模拟生成后端数据了:


json-server --watch --port 3333 --host 127.0.0.1 db.js


883bd88548ce4d44bf6cb69b8e9b6a6c.png


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


c8f07ddaa2734b299ea94a2f5b451765.png


(´。• ᵕ •。)(´。• ᵕ •。) 如果这篇文章对你有帮助,可以帮忙点个赞吗?谢谢了(´。• ᵕ •。)(´。• ᵕ •。)。


相关文章
|
11月前
|
人工智能 自然语言处理 JavaScript
利用MCP Server革新软件测试:更智能、更高效的自动化
MCP Server革新软件测试:通过标准化协议让AI实时感知页面结构,实现自然语言驱动、自适应维护的自动化测试,大幅提升效率,降低脚本开发与维护成本,推动测试左移与持续测试落地。
|
11月前
|
安全 数据管理 测试技术
告别蛮力:让测试数据生成变得智能而高效
告别蛮力:让测试数据生成变得智能而高效
759 120
|
JSON Java Shell
多线程的 udp client server 测试demo
本示例展示了使用 Python 实现的 UDP 客户端与服务端通信,支持多线程、线程池、JSON 格式传输、UUID 生成、超时设置及 search_id 校验功能,适用于高并发场景下的数据交互需求。
多线程的 udp client server 测试demo
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1983 58
|
人工智能 缓存 自然语言处理
别再手搓测试数据了!AE测试数据智造系统揭秘
本文介绍如何通过构建基于大语言模型的测试数据智造Agent,解决AliExpress跨境电商测试中数据构造复杂、低效的问题,推动测试效率提升与智能化转型。
别再手搓测试数据了!AE测试数据智造系统揭秘
|
12月前
|
存储 测试技术 API
数据驱动开发软件测试脚本
今天刚提交了我的新作《带着ChatGPT玩转软件开发》给出版社,在写作期间跟着ChatGPT学到许多新知识。下面分享数据驱动开发软件测试脚本。
441 0
|
测试技术 Go 开发者
如何为 gRPC Server 编写本地测试代码
本文介绍了如何使用 Go 语言中的 gRPC 测试工具 **bufconn**,通过内存连接实现 gRPC Server 的本地测试,避免端口冲突和外部依赖。结合示例代码,讲解了初始化内存监听、自定义拨号器及编写测试用例的完整流程,并借助断言库提升测试可读性与准确性。适用于单元及集成测试,助力高效开发。
328 1
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
830 8
|
JavaScript 前端开发 容器
|
JavaScript 前端开发