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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

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

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

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...