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

news2025/1/11 21:51:55

一般在开发前后端分离的项目时,双方会定义好前后端交互的 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.coloradmin.cn/o/1858861.html

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

相关文章

项目中eventbus和rabbitmq配置后,不起作用

如下:配置了baseService层和SupplyDemand层得RabbitMQ和EventBus 但是在执行订阅事件时,发送得消息在base项目中没有执行,后来发现是虚拟机使用得不是一个,即上图中得EventBus下得VirtualHost,修改成一直就可以了

Java-内部类成员内部类

类的五大成员 属性 方法 构造方法 代码块 内部类 什么是内部类? 在一个类的里面,再定义一个类。 举例:在A类的内部定义B类,B类就被称为内部类 内部类表示的事物是外部类的一部分 内部类单独出现没有任何意义 内部类的访问特点 1.…

lsopsed 安装与工程创建

Xposed与lsposed异同点 Xposed支持到安卓7.1 Xposed会将激活的模块注入到每个进程,需要自已在模块内根据包名过滤 Xposed激活模块后重启系统生效 lsposed支持安卓8.1-14 1sposed激活模块后需要勾选要作用于哪些app lsposed激活模块后重启对应app生效 lsposed模块…

Redis(超详细)

Redis Redis概念: Redis是开源的,遵循BSD的,基于内存数据存储,被用于作为数据库、缓存机制、消息中间件; Redis的特点: 1.高性能key/valu内存xing数据库; 2.支持丰富的数据类型 3.支持持久化&am…

Information security in DLMS/COSEM(Green-Book)—认证机制

Information security in DLMS/COSEM 9.2.1 概述9.2.2 DLMS/COSEM安全概念9.2.2.1 概述 9.2.2.1 概述9.2.2.2 身份识别和认证9.2.2.2.1 身份识别9.2.2.2.2 认证机制9.2.2.2.2.1 概述 无安全认证(Lowest Level Security):低级别安全认证&#…

python中数据的作用域

一、命名空间 在 Python 中,命名空间是一个系统,它用于确保名字的唯一性,并防止命名冲突。命名空间是一个存储变量名称(或者更广泛地说,标识符)与对象之间映射的抽象概念。每个变量名你在程序中创建&#x…

Redis-数据类型-zset

文章目录 1、查看redis是否启动2、通过客户端连接redis3、切换到db4数据库4、将一个或多个member元素及其score值加入到有序集key当中5、升序返回有序集key6、升序返回有序集key,让分数一起和值返回的结果集7、降序返回有序集key,让分数一起和值返回到结…

Android上编译和使用curl

1 概述 Android系统编译的时候默认是没有带curl工具的,但是在aosp源码中,却是有curl的源码包含。所以只需要编译curl,然后将其push到Android设备中,就可以使用curl命令了。 2 编译curl 这里编译curl是在整机代码环境下进行编译…

机器人控制系列教程之雅可比矩阵和奇异性

简介 在机器人学和控制理论中,雅可比矩阵扮演着至关重要的角色。它是一个描述机器人末端执行器速度与关节速度之间关系的数学工具。通过雅可比矩阵,我们可以更好地理解和控制机器人的运动,特别是在执行精确操作时。雅可比矩阵的计算通常基于…

python turtle 画帕恰狗

先上个图给大家看看 代码 ##作者V w1933423 import turtle turtle.bgcolor("#ece8dc") turtle.setup(600,900) p turtle.Pen() p.pensize(14) p.speed(5) p.color("black")p.penup() p.goto(-54,-44) p.pendown() p.goto(-37,-39) p.goto(-27,-24) p.go…

swp添加池子addLiquidity失败

案发现场 首次添加交易对、一直失败、但是也没提示具体的原因。到这一步就没了、由下图可知、也没看到log、由此可见第一步就失败了。 解决方案 工厂KywFactory 添加如下 bytes32 public constant INIT_CODE_PAIR_HASH keccak256(abi.encodePacked(type(KywPair).creatio…

0620所学——环境变量、CMake等

https://www.cnblogs.com/bravesunforever/p/10939078.html CMake: https://zhuanlan.zhihu.com/p/659412062 0621: 学会了在Github里创建组织,把本地仓库“同步”,就可以上传到Github,然后学会了把自己的Repos转移到组织里。G…

前端中的深拷贝

第1部分:引言 深拷贝:前端开发的隐形守护者 在前端开发的世界里,数据的传递和状态的管理是构建用户界面的基础。然而,数据的复制常常被忽视,直到它引发bug,我们才意识到它的重要性。深拷贝,这…

NC--介绍-未加密加密后-流量抓包对比

免责声明:本节仅做技术交流与学习... 目录 介绍: 用法: 未加密--流量抓包 加密: 攻击端 靶机 抓包分析: 介绍: nc 是一个Linux环境下常用的工具命令,可以用来帮助开发者查询和解决网路问题,通常被认为是 NetCat 工具的缩写,在网络工具…

arduino按钮

Arduino - Button Arduino - 按钮 参考: ezButton-按钮库从按钮开关看上拉pull-up电阻、下拉电阻按键的防抖动处理 The button is also called pushbutton, tactile button or momentary switch. It is a basic component and widely used in many Arduino projec…

06 - matlab m_map地学绘图工具基础函数 - 绘制海岸线

06 - matlab m_map地学绘图工具基础函数 - 绘制海岸线 0. 引言1. 关于m_coast2. 关于m_gshhs3. 关于m_gshhs_c、m_gshhs_I、m_gshhs_i、m_gshhs_h、m_gshhs_f4. 关于m_shaperead5. 结语 0. 引言 本篇介绍下m_map中添加绘制海岸线的一系列函数及其用法,主要函数包括m…

分享一个解决 EF 性能低的思路,通过 Python 访问心跳侦测 API 保持 EF 在线

前言 .NET FrameWork EF(Entity Framework)是一个很优秀的 ORM 框架,对于提高工作效率很有帮助,但由于底层原因,在程序启动时,EF 需要初始化和加载模型及其对应的数据库元数据等等,涉及到数据库…

分布式数据库垂直分片如何计算?

在复习分布式数据库这一部分时,发现垂直分片较难理解,上网上查找资料,也发现找不到,固在考试结束后将自己的理解记录下来。 垂直分片的计算总体上分为三个步骤;1、属性亲和度矩阵AA的计算;2、聚类亲和度CA矩阵的计算&a…

“了解MySQL中的enum枚举数据类型“

目录 # 开篇 1. 创建包含枚举类型的表 2. 插入枚举类型的数据 3. 查询包含枚举类型的表 4. 更新枚举类型的数据 5. 使用枚举类型的好处 注意事项 示例总结 附加 # 开篇 在数据库中,枚举(ENUM)是一种数据类型,用于存储一组…

vue3 运用高德地图 自定义弹框 为信息窗体 添加 new AMaps.value.InfoWindow 添加事件

效果图 划过散点的时候出现每个三点位置的数据提示 点击具体散点获取展示信息弹框,并为其添加点击事件 注意点: 1 即使是用的vue,也不能使用click为窗体添加点击事件,需要使用onclick, (原因&#xff1a…