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
,即可查看数据列表并开始通信 - 安全可靠:允许通过防火墙设置,只开放指定的端口,保护用户数据安全
Websocket
与Web
服务器一体化:内置Web服务器,支持在任何地方与设备建立WebSocket
连接- 易于集成:通过
JSON
格式交换数据,便于前后端开发 - 支持跨域、
jsonp
、路由订制、数据快照保存等功能
二、安装与配置
1. 安装 node-js
json-server
基于 npm
进行安装,需要先安装 Node.js
,因为 npm
是 Node.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 安装成功了
npm
是 node-js
的包管理和分发工具,当安装完成 node-js
后 npm
也随之安装完成,可以通过 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. 操作数据(1)查询数据(2)新增数据(3)修改数据(4…...
LLM中表格处理与多模态表格理解
文档处理中不可避免的遇到表格,关于表格的处理问题,整理如下,供各位参考。 问题描述 RAG中,对上传文档完成版式处理后进行切片,切片前如果识别文档元素是表格,那么则需要对表格进行处理。一般而言&#x…...
短剧系统搭建全攻略:功能齐全,一步到位
前言 近年来,短剧系统以其独特魅力,成为大众消遣娱乐的热门选择。简单来说,短剧系统就是用来看短剧的小程序,它汇集了丰富多彩的短剧资源,让观众随时随地享受观影乐趣。本文将为你详细解析短剧系统的搭建全攻略&#…...
【Linux】进程_7
文章目录 五、进程8. 进程地址空间9. 进程终止10. 进程等待 未完待续 五、进程 8. 进程地址空间 我们上节知道了进程地址空间是根据页表来使虚拟地址转换成内存中的物理地址,那这种 地址空间 页表 的机制有什么好处呢?①这种机制可以将物理内存从无序…...
从中概回购潮,看互联网的未来
王兴的饭否语录里有这样一句话:“对未来越有信心,对现在越有耐心。” 而如今的美团,已经不再掩饰对未来的坚定信心。6月11日,美团在港交所公告,计划回购不超过20亿美元的B类普通股股份。 而自从港股一季度财报季结束…...
【OceanBase DBA早下班系列】—— 性能问题如何 “拍CT“ (一键获取火焰图和扁鹊图)
1. 前言 最近接连遇到几个客户的环境在排查集群性能问题,总结了一下,直接教大家如何去获取火焰图、扁鹊图(调用关系图),直击要害,就像是内脏的疾病去医院看病,上来先照一个CT,通过分…...
4.类,方法,对象
1.1.2. 面向对象程序设计的三大特征 1.1.2.1. 封装 面向对象编程核心思想之一就是将数据和对数据的操作封装在一起,形成一般的概念,比如类的概念。 1.1.2.2. 继承 继承体现了一种先进的编程模式。子类可以继承父类的属性和方法。 1.1.2.3. 多态 多…...
重学java 71.网络编程
人生不是坐等暴风雨过去,而是学会在雨中起舞 —— 24.6.14 一、网络编程的基础概念 1.概述: 在网络通信协议下,不同计算机上运行的程序,进行数据传输 比如:通信、视频通话、网络、邮件 只要是计算机之间通过网络进行数据传输,就有…...
Linux驱动面试题
1.导出符号表的原理? 2.字符设备驱动的框架流程 open read wirte close 是系统调用(从用户空间进入内核空间的唯一的方法)会产生swi软中断《也会存在软中断号》(从User模式切换到SVC(管理模式)下因为在…...
git 如何强制下拉某个分支
要强制下拉Git仓库中的某个分支,可以使用以下命令: 第一步: git reset --hard HEAD第二步 git pull origin <分支名> git reset --hard HEAD 是一个 Git 命令,它的作用是将当前分支的头部重置为当前提交(HEAD…...
linux-touch指令
目录 语法 选项 示例 touch 是一个在 Linux 系统中常用的命令,它用于创建空文件,或者如果文件已经存在,则更新文件的访问和修改时间戳。下面是 touch 命令的完整使用说明: 语法 touch [选项]... 文件... 选项 -a 或 --time…...
海外仓系统有哪些?主流海外仓系统类型、优缺点,不同海外仓如何选择
作为海外仓的经营者,不管海外仓大小,你都应该知道海外仓系统对提升仓库管理效率有多重要。 不过现在市场上的海外仓系统确实种类太多了,想选到一个适合自己海外仓,性价比又比较高的wms海外仓系统也不是一件容易的事情。 本文会详…...
05-5.4.1 树的存储结构
👋 Hi, I’m Beast Cheng 👀 I’m interested in photography, hiking, landscape… 🌱 I’m currently learning python, javascript, kotlin… 📫 How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…...
Spring事务管理与Spring AOP详解
Spring事务管理与Spring AOP详解 一、引言 在企业级应用开发中,事务管理和面向切面编程(AOP)是两个至关重要的概念。Spring框架作为Java企业级应用的首选框架之一,为事务管理和AOP提供了强大的支持。本文将详细解析Spring的事务…...
LaTeX 的使用
文章目录 TeX 编辑器文档类型中文编译文档结构preamble 导言区(不能放正文内容)document body 正文区 正文内容目录段落列表无序列表有序列表 图片表格交叉引用段落图片表格 转义符 数学公式数学符号行内公式行间公式有公式计数器无公式计数器 公式包含文…...
Text2SQL之Vanna优化
文章目录 前言一、优化方向二、干就完了一次性生成多个Question-SQL对先生成一个问题,再根据DDL和业务数据生成SQL总结前言 前阵子写了篇Text2SQL的简单介绍,发现其也是RAG只会,写下了Text2SQL之不装了,我也是RAG 最近也一直在做Text2SQL的优化,于是把自己的一些心得,总…...
船舶行业信息安全解决方案介绍
船舶行业信息安全背景: 近年来随着经济复苏、疫情与国际形势影响国内外船舶海运业务蓬勃发展,在业务量激增的背景下出现多类信息安全事件。其中2017年,马士基集团遭到勒索软件攻击,内部业务系统和码头操作系统均受到严重影响&…...
Typora—适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器
Typora 是一款适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器,它以其简洁易用的界面和强大的功能受到了众多用户的喜爱。 首先,Typora 的界面设计非常简洁直观,没有过多繁杂的菜单和按钮,让用户能够专注于写作本身。它采用实时…...
产品经理的未来在哪里?
【同学聚会】 医生说:你生病的话可以找我。 老师说:你孩子成绩不好时找你辅导。 律师说:你遇上官司时我帮你。 程序员说:你电脑坏了时我帮你修理。 产品经理说:我……好像无一技之长。(瞬间开始怀疑人…...
火车头采集怎么使用GPT等AI原创文章
火车头采集官方并没有GPT、百度文心一言AI、阿里通义千问AI、Kimi大模型等AI功能,但支持接入插件,可以编写相应人工智能AI原创文章插件(火车头采集支持PHP和c#这2种语言的插件编写),或者导入第三方封装好的GPT等AI原创…...
多元多项式的特征列与零点的关系定理
下面这个定理来自《计算机代数》6.1三角列与特征列(王东明、夏壁灿著) 【定理】 设 C [ C 1 , … , C r ] \mathbb{C }\left\lbrack C_{1},\ldots,C_{r} \right\rbrack C[C1,…,Cr]为多项式组 P ⊂ K [ x ] \mathbb{P \subset}\mathcal{K\lbrack}\…...
git - LFS 使用方法
安装Git LFS 访问 Git LFS官网 下载适用于您操作系统的版本。 Linux用户,解压缩下载的.tar.gz文件,并通过终端运行安装脚本。 tar -xvf git-lfs-linux-amd64-vX.Y.Z.tar.gz cd git-lfs-X.Y.Z sudo ./install.sh 初始化Git LFS # 全局启用 git lfs i…...
提高磁盘可靠性的技术:保障数据安全的四大方法
目录 1. 第一级容错技术 磁盘镜像(Mirroring) 工作原理 RAID 1 工作原理 优点 缺点 适用场景 示例 2. 第二级容错技术 概述 RAID 5 RAID 6 优点 缺点 适用场景 3. 基于集群系统的容错技术 概述 Hadoop HDFS Ceph 优点 缺点 适用场…...
CesiumJS【Basic】- #006 浏览器控制台查看位置角度
文章目录 浏览器控制台查看位置角度1 目标 浏览器控制台查看位置角度 1 目标 浏览器控制台查看位置角度...
Mac 终端报错 zsh: command not found: brew 解决方案
Homebrew安装 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"安装成功后,在终端输入下面命令 brew -v如果成功输出brew版本,则安装成功 关闭终端重新打开终端,报错zsh: comm…...
详解 HBase 的常用 API
一、环境准备 创建一个 Maven 工程并引入依赖 <dependency><groupId>org.apache.hbase</groupId><artifactId>hbase-server</artifactId><version>1.3.1</version> </dependency> <dependency><groupId>org.apach…...
JSR303校验
校验的需求 前端请求后端接口传输参数,需要校验参数。 在controller中需要校验参数的合法性,包括:必填项校验、数据格式校验等在service中需要校验业务规则,比如:课程已经审核过了,所以提交失败。 servi…...
04 远程访问及控制
1、SSH远程管理 SSH是一种安全通道协议,主要用来实现字符界面的远程登录、远程复制等功能。 SSH协议对通信双方的数据传输进行了加密处理(包括用户登陆时输入得用户口令)。 终端:接收用户的指令 TTY终端不能远程,它…...
[晕事]今天做了件晕事38 shell里的source 点号
今天碰到一个问题脚本里使用点号引入某个文件形式如下: . /tmp/abc但是脚本运行出现错误,一开始还以为是/tmp没有可执行权限(https://mzhan017.blog.csdn.net/article/details/112178736#t16),导致abc运行不了。 后来…...
java如何分割字符串
java要实现对字符串的分割,需要用到split语句 语法格式是 str.split(分隔符) 其中 str是字符串 示例代码如下 public class Stringsplit {public static void main(String[] args) {String a"蒸羊羔,蒸熊掌,蒸鹿尾,烧花…...
网站页面一般做多大/爱站网综合查询
在Android SDK Manager 中安装Android 8.1.0 SDK Platform时报错导致无法安装。错误信息:Downloading SDK Platform Android 8.1.0, API 27, revision 1 Download finished with wrong size. Expected 65606517 bytes, got 65738431 bytes.1、如图在SDK Manager中选…...
制作网页的网站fa/360网站安全检测
嘛,废话也不说了 总之很多人按照MSDN文档上的顺序来声明IDeskband2的方法,结果总是出错…… 前天我试了一晚上都不成功,最后找了h文件一看才发现,其实正确的顺序是Set在Can和Get中间…… 顺便推荐个网站,如果Interop出…...
平台网站开发价格/凯里seo排名优化
摘要:基于深度学习的车型识别系统用于识别不同类型的车辆,应用YOLO V5算法根据不同尺寸大小区分和检测车辆,并统计各类型数量以辅助智能交通管理。本文详细介绍车型识别系统,在介绍算法原理的同时,给出Python的实现代码…...
北京app开发公司官网/厦门seo推广
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid3351 解题报告:输入一个只有{跟}的字符串,有两种操作,一种是把{变成},另一种是}变成{,问你要把这个字符串的括号变成合法的最少需要多少次操作。 在刷…...
天津建设与管理局网站/手机如何建网站
JavaScript中的ArrayBuffer详细介绍 投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-12-08 我要评论 这篇文章主要介绍了JavaScript中的ArrayBuffer详细介绍,本文讲解了Array 在内存中的堆栈模型、原始缓冲区的创建、数据化数…...
网站建设的销售好做吗/关键词查询工具软件
命令: ssh 命令参数: -l 指定登入用户 -p 设置端口号 -f 后台运行,并推荐加上 -n 参数 -n 将标准输入重定向到 /dev/null,防止读取标准输入 -N 不执行远程命令,只做端口转发 -q 安静模式,忽略一切对话和错误…...