使用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


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


相关文章
|
22小时前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
1天前
|
传感器 数据采集 算法
LabVIEW无人机大气数据智能测试系统
LabVIEW无人机大气数据智能测试系统
10 3
|
2天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
3天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
3天前
|
XML JSON API
转Android上基于JSON的数据交互应用
转Android上基于JSON的数据交互应用
|
5天前
|
JSON 测试技术 数据格式
Elasticsearch 8.X 如何生成 TB 级的测试数据 ?
Elasticsearch 8.X 如何生成 TB 级的测试数据 ?
13 0
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
11天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
22 0
|
11天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
13天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。