当前位置: 首页 > 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原创…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

02-性能方案设计

需求分析与测试设计 根据具体的性能测试需求&#xff0c;确定测试类型&#xff0c;以及压测的模块(web/mysql/redis/系统整体)前期要与相关人员充分沟通&#xff0c;初步确定压测方案及具体的性能指标QA完成性能测试设计后&#xff0c;需产出测试方案文档发送邮件到项目组&…...