React的数据Mock实现

news/2024/9/25 13:19:08/

在前后端分类的开发模式下,前端可以在没有实际后端接口的支持下先进行接口数据的模拟,进行正常的业务功能开发

1. 常见的Mock方式

在这里插入图片描述

2. json-server实现Mock

实现步骤:

  1. 项目中安装json-server
    npm i -D json-server
  2. 准备一个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. 添加启动命令
    在这里插入图片描述
  2. 访问接口进行测试
    在这里插入图片描述在这里插入图片描述

http://www.ppmy.cn/news/1445367.html

相关文章

C#算法之快速排序

算法释义:朋友们,我们在上文中说到,归并算法是一种分治算法,同样的,快速排序也是一种分治算法。所谓分治算法,原理上来说,是将规模为N的问题分解为若干个规模为较小的M的问题,这些子…

CSS + HTML

目录 一.CSS(层叠样式表) 二. CSS 引入方式 三.选择器 3.1 标签选择器 3.2 类选择器 3.3 id选择器 3.4 通配符选择器 3.5 画盒子 四.文字控制属性 4.1字体大小 4.2字体粗细 4.3 字体倾斜 4.4行高 4.5行高--垂直居中 4.6 字体族 4.7 字体复…

创建codereview

创建codereview流程 一、开始创建二、选择分支三、添加细节 一、开始创建 点击codereivew按钮 为新的codereview选择一个工程后点击create review 二、选择分支 选择目标分支和要比对的分支,比如develop 三、添加细节 Add branch后,可以继续Edit …

HarmonyOS开发案例:【rating组件】

介绍 将引导开发者使用rating组件实现星级打分功能。 相关概念 [rating组件]:评分条,可根据用户判断进行打分。 环境搭建 软件要求 [DevEco Studio]版本:DevEco Studio 3.1 Release及以上版本。OpenHarmony SDK版本:API vers…

(暗虫AI、一站式、酷盖、智言智语、靠谱AI)分享好用的ChatGPT

目录 1、暗虫AI 2、GPT中文站 - 一站式AI解决方案 3、酷盖AI实验室

Python常见数据结构

元组(Tuple)和列表(List)是Python中两种主要的序列类型,它们在功能上有许多相似之处,但也存在一些关键的区别: 可变性: 列表是可变的,这意味着你可以更改列表的内容&am…

【Harmony3.1/4.0】笔记七-选项卡布局

概念 当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的…

HEVC/H.265视频编解码学习笔记–框架及块划分关系

前言 由于本人在学习视频的过程中,觉得分块单元太多搞不清楚其关系,因此本文着重记录这些分块单元的概念以及关联。 一、框架 视频为一帧一帧的图像,其编码的主要核心是压缩空间以及时间上的冗余。因此,视频编码有帧内预测和帧间…