当前位置: 首页 > news >正文

Json-server 的使用教程

目录

  • 前言
  • 一、简介
  • 二、安装与配置
    • 1. 安装 node-js
    • 2. npm 镜像设置
    • 3. 安装 json-server
  • 三、使用
    • 1. 创建本地数据源
    • 2. 启动 Json Server
    • 3. 操作数据
      • (1)查询数据
      • (2)新增数据
      • (3)修改数据
      • (4)删除数据


前言

json-server 可以让前端人员不用去编写后端的代码,就能在本地搭建一个 json 服务,可用于测试一些业务逻辑,便于调试调用。

在前后端分离的开发模式下前端使用 json-server 模拟数据接口, 这时候 后端接口还没有开发出来, 前端又需要数据进行开发,这种情况下就需要前端先行模拟数据, 等后端接口写好进行 targetUrl 进行替换。


一、简介

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

npm 地址:https://www.npmjs.com/package/json-server

在这里插入图片描述

json-server 是一个零代码快速搭建本地 RESTful API 的工具,具有以下几个主要特点和功能:

  • json-server 使用 JSON 文件作为数据源,通过提供一组简单的路由和端点来模拟后端服务器的行为
  • 它允许前端开发人员在不依赖后端 API 的情况下进行开发,通过本地搭建一个 JSON 服务来快速生成 REST API 风格的后端服务

功能特性:

  • 跨平台兼容:一个可执行文件即可在多种操作系统上运行
  • 简单易用:只需访问特定 URL,即可查看数据列表并开始通信
  • 安全可靠:允许通过防火墙设置,只开放指定的端口,保护用户数据安全
  • WebsocketWeb 服务器一体化:内置Web服务器,支持在任何地方与设备建立 WebSocket 连接
  • 易于集成:通过 JSON 格式交换数据,便于前后端开发
  • 支持跨域、jsonp、路由订制、数据快照保存等功能

二、安装与配置

1. 安装 node-js

json-server 基于 npm 进行安装,需要先安装 Node.js,因为 npmNode.js 的包管理器

node-js 下载:https://nodejs.org/en/download/

在这里插入图片描述

一般会选择在 LTS 下进行下载,因为 LTS 是稳定版本的,然后根据自己电脑的系统选择安装,比方说我电脑是 windows-64x 的,那我就点击 Windows Installer(.msi) > 64-bit 就会开始下载

在这里插入图片描述

如果想要下载旧版本可在 Previous Release 中查询

在这里插入图片描述
点击 Releases 就能跳转到对应的下载界面

在这里插入图片描述
或者直接在地址上面输入,点击 enter 也能获取

在这里插入图片描述

PS:建议 node-js 的版本最好在 16 以上

点击对应的包即可下载完成

在这里插入图片描述

下载好安装程序包之后,只需要双击打开即可进行安装

在这里插入图片描述

node 的安装也是傻瓜式的,一直 next 即可

在这里插入图片描述

然后点击 finsh

检测 node-js 是否安装成功,只需要 win + R 调起 运行命令框,输入 cmd 打开 cmd窗口,再输入 node -v 查看 node 的版本,如果有显示版本信息,就表明 node-js 安装成功了

在这里插入图片描述
npmnode-js 的包管理和分发工具,当安装完成 node-jsnpm 也随之安装完成,可以通过 npm -v 来校验是否安装成功

在这里插入图片描述


2. npm 镜像设置

vue 中经常会使用 npm 来安装一些包,而 npm 的下载镜像是在国外,所以使用 npm 下载会非常的慢,这里有两种方式来解决这个问题:

  • 方式一:使用 yarn 进行安装

    使用 yarn 安装就需要保证当前系统有下载过 yarn,同样可以在 cmd窗口 中输入 yarn -v 来检测是否安装过 yarn

    在这里插入图片描述

    如果没有就下载,输入:npm i -g yarn,下载完成之后仍旧可以输入 yarn -v 来进行检测

    在这里插入图片描述

  • 方式二:设置 npm 镜像为国内的

    可以在 cmd窗口 中通过 npm config get registry 命令来查询 npm 所使用的镜像

    在这里插入图片描述

    默认使用的镜像是:https://registry.npmjs.org/,如果你 npm 所使用的镜像是这个的话,就换成国内的,比如:

    (1)https://registry.npm.taobao.org/

    (2)https://registry.npmmirror.com

    比如我使用 https://npmmirror.com/ 所提供的镜像 https://registry.npmmirror.com

    在这里插入图片描述

    那就可以通过 npm config set registry https://registry.npmmirror.com 这行命令将镜像设置为 https://registry.npmmirror.com 即可

    在这里插入图片描述


3. 安装 json-server

Win + R 调出运行对话框,输入 cmd 打开命令窗口

再输入以下命令进行全局安装:

npm install -g json-server

在这里插入图片描述

输入以下命令查看是否安装成功

json-server --version

在这里插入图片描述

如果安装成功会显示版本信息


三、使用


1. 创建本地数据源

首先需要创建一个本地数据源,格式是 json 形式的,例如:

{"users": [{"id": "1","name": "Mico","age": 18},{"id": "2","name": "Rose","age": 21},{"id": "3","name": "Jack","age": 22},{"id": "4","name": "Jon","age": 19}]
}

在这里插入图片描述


2. 启动 Json Server

语法:

json-server [options] <source>

在这里插入图片描述

其它参数说明:

参数简写说明默认值
--config-c指定配置文件路径json-server.json
--port-p指定端口3000
--host-H指定主机名localhost
--watch-w监控文件变化
--routes-r指定路由文件路径
--middlewares-m指定中间件文件路径
--static-s指定静态文件文件夹路径
--read-only–ro指定只允许get请求
--no-cors–nc禁止跨域共享
--no-gzip–ng禁止gzip压缩
--snapshots-S指定快照目录
--delay-d指定延迟返回时长(ms)
--id-i指定数据库的ID属性id
--foreignKeySuffix–fks指定外键前缀id
--quiet-q抑制来自输出的日志消息
--help-h显示帮助
--version-v显示版本号

打开命令窗口

在这里插入图片描述
输入以下命令启动 json server

json-server --watch db.json

在这里插入图片描述

默认端口号为 3000,如果想要修改端口号,在启动时添加 --port 端口号 即可,例如:

json-server --watch db.json --port 9527

在这里插入图片描述

也可以将参数写在配置文件(json-server.json)中,例如:

{"port": 4396,"watch": true,"static": "./static","read-only": false,"no-cors": false,"no-gzip": false
}

在这里插入图片描述

指定配置文件启动:

json-server --watch db.json --config json-server.json

启动成功之后就能在游览器或 Postman 上进行访问了,例如:

在这里插入图片描述


3. 操作数据

以上述 db.json 中的数据为例,展示 json-server 如何通过 API 来操作数据


(1)查询数据

查询数据需要用 GET 方法

  • 查询所有数据

GET localhost:3000/users

在这里插入图片描述

  • 根据 ID 查询数据

GET localhost:3000/users/1

在这里插入图片描述

  • 条件查询

GET localhost:3000/users?age=22

在这里插入图片描述

GET localhost:3000/users?age=22&name=%ck

在这里插入图片描述

  • 分页查询

可以使用 _page_limit 对数据进行分页

GET localhost:3000/users?_page=1&_limit=2

在这里插入图片描述


(2)新增数据

新增数据需要用 POST 方法

POST localhost:3000/users

json:

{"id": "5","name": "Tom","age": 23
}

在这里插入图片描述

验证:

在这里插入图片描述


(3)修改数据

修改数据需要用 PUT 方法

PUT localhost:3000/users/3

json:

{"id": "3","name": "Mike","age": 23
}

在这里插入图片描述

验证:

在这里插入图片描述


(4)删除数据

修改数据需要用 DELETE 方法

DELETE localhost:3000/users/3

在这里插入图片描述

验证:

在这里插入图片描述

相关文章:

Json-server 的使用教程

目录 前言一、简介二、安装与配置1. 安装 node-js2. npm 镜像设置3. 安装 json-server 三、使用1. 创建本地数据源2. 启动 Json Server3. 操作数据&#xff08;1&#xff09;查询数据&#xff08;2&#xff09;新增数据&#xff08;3&#xff09;修改数据&#xff08;4&#xf…...

LLM中表格处理与多模态表格理解

文档处理中不可避免的遇到表格&#xff0c;关于表格的处理问题&#xff0c;整理如下&#xff0c;供各位参考。 问题描述 RAG中&#xff0c;对上传文档完成版式处理后进行切片&#xff0c;切片前如果识别文档元素是表格&#xff0c;那么则需要对表格进行处理。一般而言&#x…...

短剧系统搭建全攻略:功能齐全,一步到位

前言 近年来&#xff0c;短剧系统以其独特魅力&#xff0c;成为大众消遣娱乐的热门选择。简单来说&#xff0c;短剧系统就是用来看短剧的小程序&#xff0c;它汇集了丰富多彩的短剧资源&#xff0c;让观众随时随地享受观影乐趣。本文将为你详细解析短剧系统的搭建全攻略&#…...

【Linux】进程_7

文章目录 五、进程8. 进程地址空间9. 进程终止10. 进程等待 未完待续 五、进程 8. 进程地址空间 我们上节知道了进程地址空间是根据页表来使虚拟地址转换成内存中的物理地址&#xff0c;那这种 地址空间 页表 的机制有什么好处呢&#xff1f;①这种机制可以将物理内存从无序…...

从中概回购潮,看互联网的未来

王兴的饭否语录里有这样一句话&#xff1a;“对未来越有信心&#xff0c;对现在越有耐心。” 而如今的美团&#xff0c;已经不再掩饰对未来的坚定信心。6月11日&#xff0c;美团在港交所公告&#xff0c;计划回购不超过20亿美元的B类普通股股份。 而自从港股一季度财报季结束…...

【OceanBase DBA早下班系列】—— 性能问题如何 “拍CT“ (一键获取火焰图和扁鹊图)

1. 前言 最近接连遇到几个客户的环境在排查集群性能问题&#xff0c;总结了一下&#xff0c;直接教大家如何去获取火焰图、扁鹊图&#xff08;调用关系图&#xff09;&#xff0c;直击要害&#xff0c;就像是内脏的疾病去医院看病&#xff0c;上来先照一个CT&#xff0c;通过分…...

4.类,方法,对象

1.1.2. 面向对象程序设计的三大特征 1.1.2.1. 封装 面向对象编程核心思想之一就是将数据和对数据的操作封装在一起&#xff0c;形成一般的概念&#xff0c;比如类的概念。 1.1.2.2. 继承 继承体现了一种先进的编程模式。子类可以继承父类的属性和方法。 1.1.2.3. 多态 多…...

重学java 71.网络编程

人生不是坐等暴风雨过去&#xff0c;而是学会在雨中起舞 —— 24.6.14 一、网络编程的基础概念 1.概述&#xff1a; 在网络通信协议下,不同计算机上运行的程序,进行数据传输 比如&#xff1a;通信、视频通话、网络、邮件 只要是计算机之间通过网络进行数据传输&#xff0c;就有…...

Linux驱动面试题

1.导出符号表的原理&#xff1f; 2.字符设备驱动的框架流程 open read wirte close 是系统调用&#xff08;从用户空间进入内核空间的唯一的方法&#xff09;会产生swi软中断《也会存在软中断号》&#xff08;从User模式切换到SVC&#xff08;管理模式&#xff09;下因为在…...

git 如何强制下拉某个分支

要强制下拉Git仓库中的某个分支&#xff0c;可以使用以下命令&#xff1a; 第一步&#xff1a; git reset --hard HEAD第二步 git pull origin <分支名> git reset --hard HEAD 是一个 Git 命令&#xff0c;它的作用是将当前分支的头部重置为当前提交&#xff08;HEAD…...

linux-touch指令

目录 语法 选项 示例 touch 是一个在 Linux 系统中常用的命令&#xff0c;它用于创建空文件&#xff0c;或者如果文件已经存在&#xff0c;则更新文件的访问和修改时间戳。下面是 touch 命令的完整使用说明&#xff1a; 语法 touch [选项]... 文件... 选项 -a 或 --time…...

海外仓系统有哪些?主流海外仓系统类型、优缺点,不同海外仓如何选择

作为海外仓的经营者&#xff0c;不管海外仓大小&#xff0c;你都应该知道海外仓系统对提升仓库管理效率有多重要。 不过现在市场上的海外仓系统确实种类太多了&#xff0c;想选到一个适合自己海外仓&#xff0c;性价比又比较高的wms海外仓系统也不是一件容易的事情。 本文会详…...

05-5.4.1 树的存储结构

&#x1f44b; Hi, I’m Beast Cheng &#x1f440; I’m interested in photography, hiking, landscape… &#x1f331; I’m currently learning python, javascript, kotlin… &#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…...

Spring事务管理与Spring AOP详解

Spring事务管理与Spring AOP详解 一、引言 在企业级应用开发中&#xff0c;事务管理和面向切面编程&#xff08;AOP&#xff09;是两个至关重要的概念。Spring框架作为Java企业级应用的首选框架之一&#xff0c;为事务管理和AOP提供了强大的支持。本文将详细解析Spring的事务…...

LaTeX 的使用

文章目录 TeX 编辑器文档类型中文编译文档结构preamble 导言区&#xff08;不能放正文内容&#xff09;document body 正文区 正文内容目录段落列表无序列表有序列表 图片表格交叉引用段落图片表格 转义符 数学公式数学符号行内公式行间公式有公式计数器无公式计数器 公式包含文…...

Text2SQL之Vanna优化

文章目录 前言一、优化方向二、干就完了一次性生成多个Question-SQL对先生成一个问题,再根据DDL和业务数据生成SQL总结前言 前阵子写了篇Text2SQL的简单介绍,发现其也是RAG只会,写下了Text2SQL之不装了,我也是RAG 最近也一直在做Text2SQL的优化,于是把自己的一些心得,总…...

船舶行业信息安全解决方案介绍

船舶行业信息安全背景&#xff1a; 近年来随着经济复苏、疫情与国际形势影响国内外船舶海运业务蓬勃发展&#xff0c;在业务量激增的背景下出现多类信息安全事件。其中2017年&#xff0c;马士基集团遭到勒索软件攻击&#xff0c;内部业务系统和码头操作系统均受到严重影响&…...

Typora—适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器

Typora 是一款适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器&#xff0c;它以其简洁易用的界面和强大的功能受到了众多用户的喜爱。 首先&#xff0c;Typora 的界面设计非常简洁直观&#xff0c;没有过多繁杂的菜单和按钮&#xff0c;让用户能够专注于写作本身。它采用实时…...

产品经理的未来在哪里?

【同学聚会】 医生说&#xff1a;你生病的话可以找我。 老师说&#xff1a;你孩子成绩不好时找你辅导。 律师说&#xff1a;你遇上官司时我帮你。 程序员说&#xff1a;你电脑坏了时我帮你修理。 产品经理说&#xff1a;我……好像无一技之长。&#xff08;瞬间开始怀疑人…...

火车头采集怎么使用GPT等AI原创文章

火车头采集官方并没有GPT、百度文心一言AI、阿里通义千问AI、Kimi大模型等AI功能&#xff0c;但支持接入插件&#xff0c;可以编写相应人工智能AI原创文章插件&#xff08;火车头采集支持PHP和c#这2种语言的插件编写&#xff09;&#xff0c;或者导入第三方封装好的GPT等AI原创…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...