React项目中利用json-server实现数据Mock

devtools/2025/1/12 12:57:27/

json-server实现数据Mock

  1. 项目中安装json-server
npm i -D json-server --legacy-peer-deps
  1. 准备一个json文件

建立一个server文件夹,建立一个data.json文件。
以下为一个例子:

{"ka": [{"type": "pay","money": -99,"date": "2022-10-24 10:36:42","useFor": "drinks","id": 1},{"type": "pay","money": -88,"date": "2022-10-24 10:37:51","useFor": "longdistance","id": 2},{"type": "income","money": 100,"date": "2022-10-22 00:00:00","useFor": "bonus","id": 3},{"type": "pay","money": -33,"date": "2022-09-24 16:15:41","useFor": "dessert","id": 4},{"type": "pay","money": -56,"date": "2022-10-22T05:37:06.000Z","useFor": "drinks","id": 5},{"type": "pay","money": -888,"date": "2022-10-28T08:21:42.135Z","useFor": "travel","id": 6},{"type": "income","money": 10000,"date": "2023-03-20T06:45:54.004Z","useFor": "salary","id": 7},{"type": "pay","money": -10,"date": "2023-03-22T07:17:12.531Z","useFor": "drinks","id": 8},{"type": "pay","money": -20,"date": "2023-03-22T07:51:20.421Z","useFor": "dessert","id": 9},{"type": "pay","money": -100,"date": "2023-03-22T09:18:12.898Z","useFor": "drinks","id": 17},{"type": "pay","money": -50,"date": "2023-03-23T09:11:23.312Z","useFor": "food","id": 18},{"type": "pay","money": -10,"date": "2023-04-03T11:14:56.036Z","useFor": "food","id": 19}]}
  1. 添加启动命令

在package.json文件中添加:

"server": "json-server ./server/data.json --port 8888"
  1. 访问接口进行测试

http://www.ppmy.cn/devtools/149878.html

相关文章

【Rust自学】11.9. 单元测试

喜欢的话别忘了点赞、收藏加关注哦(加关注即可阅读全文),对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 11.9.1. 测试的分类 Rust把测试分为两类,一个是单元测试,一个是集成…

Ruby语言的软件开发工具

Ruby语言的软件开发工具探索 Ruby语言以其简洁优雅的语法和强大的面向对象特性而受到广泛欢迎。作为一种动态、反射性强的编程语言,Ruby具有很高的开发效率,适用于各种类型的开发,从Web应用到命令行工具,都能得到很好的支持。在R…

网络安全漏洞学习与企业挖掘实战:从基础概念到操作步骤全解析

该文章是个人学习笔记,学习的相关视频是来自蚁景网安的百里老师的相关视频 内容简介 什么是网络安全技术中的漏洞学习黑客漏洞从哪里开始起步针对企业的漏洞挖掘应该如何去做漏洞挖掘的步骤和相关的概念收集企业信息的基本思路的和流程 1.什么是网络安全技术中的漏洞…

左神算法基础巩固--4

文章目录 图图的表示图的遍历图的宽度优先遍历图的深度优先遍历 解题 图 在面试中图的考察并不寻常,但并不是没有,所以我们也需要学习学习。 图的题目之所以会显得比较难其主要原因便是我们不知道如何正确表示一个图即用一个合适的数据结构将题目中出现…

STM32-DMA数据转运

注:DMA对应的库函数文件讲解 DMA_GetITStatus(uint32_t DMAy_IT) 是一个用于检查DMA(直接存储器访问)中断状态的库函数。它通常在使用STM32系列微控制器及其标准外设库时被调用。此函数的主要作用是返回指定DMA通道的特定中断标志的状态&…

某漫画网站JS逆向反混淆流程分析

文章目录 1. 写在前面1. 接口分析2. 反混淆分析 【🏠作者主页】:吴秋霖 【💼作者介绍】:擅长爬虫与JS加密逆向分析!Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Pyth…

纯手工(不基于maven的pom.xml、Web容器)连接MySQL数据库的详细过程(Java Web学习笔记)

1 引言 最近读一些Java Web开发类的书籍时,发现书中的连接数据库的过程缺少了一些关键性的过程,这对初学者非常不友好。为此,本文将给出详细的连接MySQL数据库的过程,并且是纯手工,不依赖于pom.xml和Web容器&#xff…

一分钟学会文心一言API如何接入,文心一言API接入教程

一、前期准备 注册百度智能云账号: 前往百度智能云官网注册一个账号。这是接入文心一言API的基础。 了解API接口: 在百度智能云开放平台中,找到文心一言API的详情页,了解提供的API接口类型(如云端API、移动端API、离线…