Json-server 的使用教程

目录


前言

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 打开命令窗口

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

bash 复制代码
npm install -g json-server

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

bash 复制代码
json-server --version

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


三、使用


1. 创建本地数据源

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

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

语法:

bash 复制代码
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

bash 复制代码
json-server --watch db.json

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

bash 复制代码
json-server --watch db.json --port 9527

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

json 复制代码
{
    "port": 4396,
    "watch": true,
    "static": "./static",
    "read-only": false,
    "no-cors": false,
    "no-gzip": false
}

指定配置文件启动:

bash 复制代码
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:

sql 复制代码
{
    "id": "5",
    "name": "Tom",
    "age": 23
}

验证:


(3)修改数据

修改数据需要用 PUT 方法

PUT localhost:3000/users/3

json:

sql 复制代码
{
    "id": "3",
    "name": "Mike",
    "age": 23
}

验证:


(4)删除数据

修改数据需要用 DELETE 方法

DELETE localhost:3000/users/3

验证:

相关推荐
Json_181790144803 小时前
An In-depth Look into the 1688 Product Details Data API Interface
大数据·json
哟哟耶耶5 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
努力的家伙是不讨厌的8 小时前
解析json导出csv或者直接入库
开发语言·python·json
Mephisto.java13 小时前
【大数据学习 | kafka高级部分】kafka的优化参数整理
大数据·sql·oracle·kafka·json·database
沐雪架构师14 小时前
mybatis连接PGSQL中对于json和jsonb的处理
json·mybatis
丁总学Java15 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
Mephisto.java17 小时前
【大数据学习 | kafka高级部分】kafka的kraft集群
大数据·sql·oracle·kafka·json·hbase
Mephisto.java17 小时前
【大数据学习 | kafka高级部分】kafka的文件存储原理
大数据·sql·oracle·kafka·json
待磨的钝刨20 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
小百菜1 天前
dom4j实现xml转map,xml转json字符串
xml·json·xml转map·xml转json