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


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


相关文章
|
存储 前端开发 安全
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
878 0
|
6月前
|
机器学习/深度学习 JSON 监控
淘宝拍立淘按图搜索与商品详情API的JSON数据返回详解
通过调用taobao.item.get接口,获取商品标题、价格、销量、SKU、图片、属性、促销信息等全量数据。
|
5月前
|
JSON API 数据格式
淘宝拍立淘按图搜索API系列,json数据返回
淘宝拍立淘按图搜索API系列通过图像识别技术实现商品搜索功能,调用后返回的JSON数据包含商品标题、图片链接、价格、销量、相似度评分等核心字段,支持分页和详细商品信息展示。以下是该API接口返回的JSON数据示例及详细解析:
|
5月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
5月前
|
JSON API 数据安全/隐私保护
Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
通过以上流程,可实现淘宝拍立淘按图搜索的完整调用链路,并获取结构化的JSON商品数据,支撑电商比价、智能推荐等业务场景。
|
6月前
|
JSON 缓存 自然语言处理
多语言实时数据微店商品详情API:技术实现与JSON数据解析指南
通过以上技术实现与解析指南,开发者可高效构建支持多语言的实时商品详情系统,满足全球化电商场景需求。
|
6月前
|
JSON API 数据格式
干货满满!淘宝商品详情数据,淘宝API(json数据返回)
淘宝商品详情 API 接口(如 taobao.item.get)的 JSON 数据返回示例如下
|
7月前
|
JSON 算法 安全
淘宝商品详情API接口系列,json数据返回
淘宝开放平台提供了多种API接口用于获取商品详情信息,主要通过 淘宝开放平台(Taobao Open Platform, TOP) 的 taobao.tbk.item.info.get(淘宝客商品详情)或 taobao.item.get(标准商品API)等接口实现。以下是关键信息及JSON返回示例:
|
5月前
|
JSON 中间件 Java
【GoGin】(3)Gin的数据渲染和中间件的使用:数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
我们在正常注册中间件时,会打断原有的运行流程,但是你可以在中间件函数内部添加Next()方法,这样可以让原有的运行流程继续执行,当原有的运行流程结束后再回来执行中间件内部的内容。​ c.Writer.WriteHeaderNow()还会写入文本流中。可以看到使用next后,正常执行流程中并没有获得到中间件设置的值。接口还提供了一个可以修改ContentType的方法。判断了传入的状态码是否符合正确的状态码,并返回。在内部封装时,只是标注了不同的render类型。再看一下其他返回的类型;
290 3
|
5月前
|
JSON Java Go
【GoGin】(2)数据解析和绑定:结构体分析,包括JSON解析、form解析、URL解析,区分绑定的Bind方法
bind或bindXXX函数(后文中我们统一都叫bind函数)的作用就是将,以方便后续业务逻辑的处理。
398 3