自从用了这个 69k star 的项目,前端小姐姐再也不催我了

一般在开发前后端分离的项目时,双方会定义好前后端交互的 http 接口,根据接口文档各自进行开发。这样并行开发互不耽误,开发好后做个联调就可以提测了。

不过最近也不知道怎么回事,公司新来的前端小姐姐总是在刚开始开发的时候就来找我要接口返回的数据。本来我就没开发完,她还总赖在这里不走唠闲嗑打扰我工作,好烦啊。我翻出收藏夹里的链接发给她,然后说“你用这个工具 mock 一下请求 http 接口的返回值就好啦,用起来很简单的”。

项目简介

JSON Server 是一个 JavaScript 项目,你可以使用 JSON Server 在在 30 秒内创建一个 REST API 服务。正如它的名字一样,这个 api 服务是以 json 格式的数据为数据源,支持通过 http 请求获取对应的信息。

你可以理解成,JSON Server 是一个 web 服务,这个 web 服务的数据库,其实就是一个 json 格式的文件啦。

项目安装

JSON Server 的安装非常简单,直接使用 npm 命令即可:

npm install -g json-server

项目使用

数据准备与启动

首先,我们准备一份 JSON 格式的数据,保存为 db.json,当做 JSON Server 的数据源,如下:

{"posts": [{"id": 1,"title": "json-server","author": "typicode"},{"id": 2,"title": "husky","author": "typicode"},{"id": 3, "title": "lowdb","author": "typicode"},{"id": 4, "title": "jsonplaceholder","author": "typicode"}],"comments": [{"id": 1,"body": "some comment","postId": 1}],"profile": {"name": "typicode"}
}

之后,我们使用这个数据源启动 JSON Server。

json-server --watch db.json

看到这个可爱的画面,就说明启动成功啦。

访问数据

我们按照输出的提示,访问 http://localhost:3000 即可进入首页,查看总览信息。

其中,Resources 下的链接可以直接点击,会返回刚才 JSON 数据中,posts 字段对应的 JSON 格式信息。

好啦,接下来我就给大家介绍一些常见的用法。

使用 restful 风格来请求 id 为 1 的数据
http://localhost:3000/posts/1

传参的 get 请求
http://localhost:3000/posts?title=json-server

分页查询
http://localhost:3000/posts?_page=2&_limit=2

结果排序
http://localhost:3000/posts?_sort=id&_order=desc

范围查询
http://localhost:3000/posts?id_gte=2&id_lte=3

全文检索
http://localhost:3000/posts?q=json

获取全部数据
http://localhost:3000/db

然后你可以发现,如果更改了刚才的 db.json 文件里的内容,我们通过请求查询到的数据也会实时更新保持变化。

总结

总结一下,JSON Server 最大的优点就是方便!一行命令安装,一行命令启动。其他的工作量也就是用在编写 JSON 数据上了,不愧是项目简介里说的三十秒零编码搞定 mock 数据。

前端小姐姐会用之后,应该是如获至宝,再也不催我要接口调试啦,我又可以安静的写代码了,真好。

项目地址:https://github.com/typicode/json-server

彩蛋时间

感谢你看到最后,作为如果你对开源感兴趣,欢迎关注我的公众号(文末有二维码哈)。回复eeee888,获取程序员面试指南以及海量学习资料~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全行业通用商城小程序源码

一站式购物新体验 一、引言:开启数字化购物新时代 在数字化快速发展的今天,小程序成为了商家们连接消费者的重要桥梁。特别是“全行业通用商城小程序”,以其便捷的购物体验和多样化的功能,成为了越来越多商家和消费者的首选。本…

Day12 单调栈 下一个最大元素

503. 下一个更大元素 II 给定一个循环数组 nums ( nums[nums.length - 1] 的下一个元素是 nums[0] ),返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序,这个数字之后的第一个比它更大的数…

Unity URP简单烘焙场景步骤

Unity URP简单烘焙场景步骤 前言项目场景布置灯光模型Lighting设置环境设置烘焙前烘焙后增加角色 问题解决黑斑硬边清理缓存 参考 前言 项目中要烘焙一个3D场景,用的URP渲染管线,简单记录一下。 项目 场景布置 灯光 因为场景中有能动的东西&#xf…

JAVA每日作业day6.24

ok了家人们今天学习了一些关键字,用法和注意事项,静态代码块这些知识,闲话少叙我们一起看看吧。 一,final关键字 1.1 final关键字的概述 final: 不可改变。可以用于修饰类、方法和变量。 类:被修饰的类&a…

Zoho邮箱怎么注册?最强完整指南

Zoho企业邮箱,凭借其16年的产品历程和卓越的服务品质,已经成为全球超过1800万企业级客户的信赖之选。今天,我们将手把手教你如何注册Zoho邮箱。 一、Zoho邮箱是什么? Zoho邮箱是Zoho Workplace套件中的核心产品,专门…

【昇思初学入门】第六天打卡

函数式自动微分 学习心得 反向传播:神经网络在训练时,会使用一个叫做“反向传播”的方法。这个方法的基本思路是这样的:首先,神经网络会做出一个预测(我们称之为“logits”),然后我们将这个预…

【Python】已解决ModuleNotFoundError: No module named ‘requests’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决ModuleNotFoundError: No module named ‘requests’ 一、分析问题背景 在使用Python进行网络编程或数据抓取时,requests库因其简洁易用的特性而受到广泛欢迎。然…

Vue项目环境搭建及git仓库新建

不会安装的 可以找下博客,我会在另外一个博客 单独讲解git的安装 接下后启动对应的git bash文件,可以发送快捷方式到桌面 启动git命令的窗口 之后就可以在对应的文件下,启动git命令窗口了 3.码云-项目代码管理仓库 链接:https:…

年化16.6%,全球大类资产使用lightGBM预测轮动——数据缓存提升效率

原创文章第568篇,专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 Dataloader缓存 加载160个因子,10几支大类资产,这个计算还是需要一点时间,尤其在我们频繁运行的时候,需要等待,这里我们…

Java基础:IO流

目录 一、定义 1.引言 2.分类 (1)按照流的方向分 (2)按操作文件的类型分 3.体系结构 二、字节流(以操作本地文件为例) 1. FileOutputStream 类 (1)定义 (2&am…

【tcomat】聊聊tomcat是如何打破双亲委派模型进行类加载的

双亲委派模型 对于JVM类加载器来说,其实就是如下的code,JDK提供的三个类加载器,每个类加载器都加载自己范围内的类。Boot\EXT\APP 三个。双亲委派一句话就是,先让老爸处理,老爸处理不了,给爷爷。爷爷处理不…

x86 的 ebp 寄存器,可能比 cr3 更重要,好好掰扯一下 ebp

在 x86 架构的计算机中,ebp(Extended Base Pointer)寄存器通常用于指向当前函数的栈帧(stack frame)的基地址。栈帧是函数调用期间在栈上分配的一块内存区域,用于存储局部变量、函数参数、返回地址和其他临…

视图(views)

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 下面通过一个例子讲解在Django项目中定义视图,代码如下: from django.http import HttpResponse # 导入响应对象 impo…

TOPGP-TIPTOP调用外部Webservice

功能要求:ERP作业调用外部系统的webserice更新数据。 演示环境:ERP作业cooi002(员工档案)录入后更新到外部系统员工档案表。 1、外部系统的WebSerice使用.net搭建 2、在Service.cs中写一个调用方法erp_other erp_other中两个参数…

Bootstrap和Bagging算法以及衍生算法

1. Bootstrap算法 实际上就是一种针对小样本的无放回式的抽样方法,通过方差的估计可以构造置信区间。 其核心思想和基本步骤如下:   (1) 采用重抽样技术从原始样本中抽取一定数量(自己给定)的样本&#…

Android集成高德地图SDK(2)

1.解压下载的压缩包,找到AMap_Android_SDK_All\AMap3DMap_DemoDocs\AMap_Android_API_3DMap_Demo\AMap3DDemo\app\libs,复制libs里的所有文件,将其粘贴到Android工程的libs目录下,如图所示。 2.打开app下的build.gradle&#xff0…

记录react实现选择框一二级联动出现的问题

需求:用户在选择第一个选择框的选项后,第二个选择框的选项会根据第一个选择框的选择动态更新。如图所示 出现的问题 一级分类选择之后二级分类没有数据,第二次重新选择一级分类的时候,二级分类就会有值。 第一次点击截图&#x…

024.两两交换链表中的节点,用递归和 while 循环

题意 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 难度 中等 示例 输入:head [1,2,3,4] 输出:[…

什么是车载测试?车载测试怎么学!

1、车载测试是什么? 车载测试分很多种,有软件测试、硬件测试、性能测试、功能测试等等,每一项测试的内容都不一样,我们所说的车载测试主要指的是汽车软件的功能测试,也就是针对汽车实现的某一个功能,而进行…

vue3 vxe-grid列中绑定vxe-switch实现数据更新

1、先上一张图&#xff1a; <template #valueSlot"{ row }"><vxe-switch :value"getV(row.svalue)" change"changeSwitch(row)" /></template>function getV(value){return value 1;};function changeSwitch(row) {console.l…