当前位置： 首页 > article >正文

利用json-server快速在本地搭建一个JSON服务

article 2025/1/12 7:00:43

1，json-server介绍

一个在前端本地运行，可以存储json数据的server。

通俗来说，就是模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

顾名思义，json-server就是个存储json数据的server~。

json-server网址：json-server - npm

2，下载安装

使用npm全局安装json-server：

npm install -g json-server

可以通过查看版本号，来测试是否安装成功：

json-server -v

3，创建模拟json数据

test.json
既然是造数据，就需要创建一个json数据。

{
    "fruits": [
        {
            "id": 1,
            "name": "苹果",
            "price": 1.28
        },
        {
            "id": 2,
            "name": "橘子",
            "price": 3.88
        },
        {
            "id": 3,
            "name": "西瓜",
            "price": 1.98
        }
    ],
    "users": [
        {
            "name": {
                "username":"admin",
                "nickname":"zhangsan"
            },
            "pwd": "123456"
        }
    ]
}

要注意，数据格式符合JSON格式（尤其注意最后一个键值对后面不要有逗号）。如果数据格式有误，命令窗口会报错，可以根据错误提示进行修整。

4，启动 json-server

json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

在任意一个文件夹下（此处假设我创建了一个myserver文件夹），进入到该文件夹里面，执行代码：

例如以下命令，把db.json文件托管成一个 web 服务。

json-server --watch db.json

5，修改端口号

json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：

json-server --watch db.json --port 3004

如果觉得启动服务的这段代码有点长，还可以考虑db.json同级文件夹（也就是myserver文件夹）新建一个package.json，把配置信息写在里头：

//JavaScript
{
    "scripts": {
        "mock": "json-server db.json --port 3004"
    }
}

之后启动服务，只需要执行如下指令就可以了：

npm run mock

6，json-server 的相关启动参数

  • 语法：json-server [options]

  • 选项列表
    在这里插入图片描述

  • source可以是json文件或者js文件。实例：

$ json-server --watch -c ./jsonserver.json
$ json-server --watch app.js
$ json-server db.json
json-server --watch -port 8888 db.json

7，操作数据

通过3中创建的 db.json 数据，进行举例说明如何使用GET, POST, PUT, PATCH or DELETE 方法来对数据进行操作。

获取数据
首先，我们先来看GET操作。

浏览器地址访问就可以看做GET操作，所以不用写任何代码，我们就可以先来测试下 url -GET 操作。

  • 常规获取
http://localhost:3004/fruits

可以得到所有水果数据（对象数组）

[
    {
        "id": 1,
        "name": "苹果",
        "price": 1.28
    },
    {
        "id": 2,
        "name": "橘子",
        "price": 3.88
    },
    {
        "id": 3,
        "name": "西瓜",
        "price": 1.98
    }
]
  • 过滤获取 Filter
    根据id获取数据
http://localhost:3004/fruits/1

可以得到指定id为1的水果（对象）：

{
    "id": 1,
    "name": "苹果",
    "price": 1.28
}

当然，指定id为1的获取指令还可以用如下指令，但要注意，此时返回的数据是一个数组。

http://localhost:3004/fruits?id=1

[
    {
        "id": 1,
        "name": "苹果",
        "price": 1.28
    }
]

以此类推，我们也可以通过水果名称，或者是价格来获取数据：

http://localhost:3004/fruits?name=橘子

[
    {
        "id": 2,
        "name": "橘子",
        "price": 3.88
    }
]

也可以指定多个条件，用&符号连接：

http://localhost:3004/fruits?name=橘子&price=3.88

[
    {
        "id": 2,
        "name": "橘子",
        "price": 3.88
    }
]

你甚至还可以使用对象取属性值 obj.key 的方式：

http://localhost:3004/users?name.nickname=zhangsan

[
  {
    "name": {
      "username": "admin",
      "nickname": "zhangsan"
    },
    "pwd": "123456"
  }
]

    以上看着是不是特别眼熟，不就是HTTP中GET请求方式嘛~

    嗯，更好玩的还在后面。
  • 分页 Paginate
    为了能演示分页效果，我们在db.json文件里的fruits里面多添加了几种水果。
{
    "fruits": [
        {
            "id": 1,
            "name": "糖心富士苹果",
            "price": 2.38
        },
        {
            "id": 2,
            "name": "橘子",
            "price": 3.88
        },
        {
            "id": 3,
            "name": "宁夏西瓜",
            "price": 1.98
        },
        {
            "id": 4,
            "name": "麒麟西瓜",
            "price": 3.98
        },
        {
            "id": 5,
            "name": "红蛇果",
            "price": 2.5
        },
        {
            "id": 6,
            "name": "黑皮西瓜",
            "price": 0.98
        },
        {
            "id": 7,
            "name": "红心火龙果",
            "price": 2.69
        },
        {
            "id": 8,
            "name": "国产火龙果",
            "price": 1.69
        },
        {
            "id": 9,
            "name": "海南荔枝",
            "price": 9.9
        },
        {
            "id": 10,
            "name": "陕西冬枣",
            "price": 5.39
        },
        {
            "id": 11,
            "name": "软籽石榴",
            "price": 2.39
        },
        {
            "id": 12,
            "name": "蜜橘",
            "price": 1.99
        },
        {
            "id": 13,
            "name": "海南香蕉",
            "price": 1.45
        }
    ],
    "users": [
        {
            "name": {
                "username":"admin",
                "nickname":"zhangsan"
            },
            "pwd": "123456"
        }
    ]
}

编辑过db.json（db.json数据有变动），都要关闭服务重新启动。（注意：不要用 CTRL + C 来停止服务，因为这种方式会导致 node.js 依旧霸占着3004端口，导致下一次启动失败。简单粗暴关闭窗口即可！ —— 个人window系统，其他系统可能没有这样的烦恼。）

分页采用 _page 来设置页码， _limit 来控制每页显示条数。如果没有指定 _limit ，默认每页显示10条。

http://localhost:3004/fruits?_page=2&_limit=5

[
    {
        "id": 6,
        "name": "黑皮西瓜",
        "price": 0.98
    },
    {
        "id": 7,
        "name": "红心火龙果",
        "price": 2.69
    },
    {
        "id": 8,
        "name": "国产火龙果",
        "price": 1.69
    },
    {
        "id": 9,
        "name": "海南荔枝",
        "price": 9.9
    },
    {
        "id": 10,
        "name": "陕西冬枣",
        "price": 5.39
    }
]
  • 排序 Sort
    排序采用 _sort 来指定要排序的字段， _order 来指定排序是正排序还是逆排序（asc | desc ，默认是asc）。
http://localhost:3004/fruits?_sort=price&_order=desc

[
    {
        "id": 9,
        "name": "海南荔枝",
        "price": 9.9
    },
    {
        "id": 10,
        "name": "陕西冬枣",
        "price": 5.39
    },
    {
        "id": 4,
        "name": "麒麟西瓜",
        "price": 3.98
    },
    {
        "id": 2,
        "name": "橘子",
        "price": 3.88
    },
    {
        "id": 7,
        "name": "红心火龙果",
        "price": 2.69
    },
    {
        "id": 5,
        "name": "红蛇果",
        "price": 2.5
    },
    {
        "id": 11,
        "name": "软籽石榴",
        "price": 2.39
    },
    {
        "id": 1,
        "name": "糖心富士苹果",
        "price": 2.38
    },
    {
        "id": 12,
        "name": "蜜橘",
        "price": 1.99
    },
    {
        "id": 3,
        "name": "宁夏西瓜",
        "price": 1.98
    },
    {
        "id": 8,
        "name": "国产火龙果",
        "price": 1.69
    },
    {
        "id": 13,
        "name": "海南香蕉",
        "price": 1.45
    },
    {
        "id": 6,
        "name": "黑皮西瓜",
        "price": 0.98
    }
]

也可以指定多个字段排序，一般是按照price进行排序后，相同price的再根据id排序：

http://localhost:3004/fruits?_sort=price,id&_order=desc,asc
  • 取局部数据 Slice
    slice的方式，和 Array.slice() 方法类似。采用 _start 来指定开始位置， _end 来指定结束位置、或者是用_limit来指定从开始位置起往后取几个数据。
http://localhost:3004/fruits?_start=2&_end=4

[
    {
        "id": 3,
        "name": "宁夏西瓜",
        "price": 1.98
    },
    {
        "id": 4,
        "name": "麒麟西瓜",
        "price": 3.98
    }
]

http://localhost:3004/fruits?_start=2&_limit=4

[
    {
        "id": 3,
        "name": "宁夏西瓜",
        "price": 1.98
    },
    {
        "id": 4,
        "name": "麒麟西瓜",
        "price": 3.98
    },
    {
        "id": 5,
        "name": "红蛇果",
        "price": 2.5
    },
    {
        "id": 6,
        "name": "黑皮西瓜",
        "price": 0.98
    }
]
  • 取符合某个范围 Operators
  1. 采用 _gte _lte 来设置一个取值范围（range）:
http://localhost:3004/fruits?id_gte=4&id_lte=6

[
    {
        "id": 4,
        "name": "麒麟西瓜",
        "price": 3.98
    },
    {
        "id": 5,
        "name": "红蛇果",
        "price": 2.5
    },
    {
        "id": 6,
        "name": "黑皮西瓜",
        "price": 0.98
    }
]
  1. 采用_ne来设置不包含某个值：
http://localhost:3004/fruits?id_ne=1&id_ne=10

[
    {
        "id": 2,
        "name": "橘子",
        "price": 3.88
    },
    {
        "id": 3,
        "name": "宁夏西瓜",
        "price": 1.98
    },
    {
        "id": 4,
        "name": "麒麟西瓜",
        "price": 3.98
    },
    {
        "id": 5,
        "name": "红蛇果",
        "price": 2.5
    },
    {
        "id": 6,
        "name": "黑皮西瓜",
        "price": 0.98
    },
    {
        "id": 7,
        "name": "红心火龙果",
        "price": 2.69
    },
    {
        "id": 8,
        "name": "国产火龙果",
        "price": 1.69
    },
    {
        "id": 9,
        "name": "海南荔枝",
        "price": 9.9
    },
    {
        "id": 11,
        "name": "软籽石榴",
        "price": 2.39
    },
    {
        "id": 12,
        "name": "蜜橘",
        "price": 1.99
    },
    {
        "id": 13,
        "name": "海南香蕉",
        "price": 1.45
    }
]
  1. 采用_like来设置匹配某个字符串（或正则表达式）：
http://localhost:3004/fruits?name_like=果

[
    {
        "id": 1,
        "name": "糖心富士苹果",
        "price": 2.38
    },
    {
        "id": 5,
        "name": "红蛇果",
        "price": 2.5
    },
    {
        "id": 7,
        "name": "红心火龙果",
        "price": 2.69
    },
    {
        "id": 8,
        "name": "国产火龙果",
        "price": 1.69
    }
]
  • 全文搜索 Full-text search
    采用 q 来设置搜索内容:
http://localhost:3004/fruits?q=3

[
    {
        "id": 1,
        "name": "糖心富士苹果",
        "price": 2.38
    },
    {
        "id": 2,
        "name": "橘子",
        "price": 3.88
    },
    {
        "id": 3,
        "name": "宁夏西瓜",
        "price": 1.98
    },
    {
        "id": 4,
        "name": "麒麟西瓜",
        "price": 3.98
    },
    {
        "id": 10,
        "name": "陕西冬枣",
        "price": 5.39
    },
    {
        "id": 11,
        "name": "软籽石榴",
        "price": 2.39
    },
    {
        "id": 13,
        "name": "海南香蕉",
        "price": 1.45
    }
]

除了获取数据，我们当然还希望能向操作sql一样能更改数据、删除数据了。

所以这里，我们采用大部分人熟悉的 ajax 方法，来操作下响应的数据。


http://www.kler.cn/a/5779.html

相关文章：

  • php函数性能优化中应注意哪些问题
  • 面试：类模版中函数声明在.h，定义在.cpp中，其他cpp引用引入这个头文件，会有什么错误?
  • 运行.Net 7 Zr.Admin项目（后端）
  • 继承（7）
  • 计算机网络（三）——局域网和广域网
  • 牛客网刷题 ——C语言初阶——BC96-有序序列判断
  • leetcode125：验证回文串
  • JavaScript函数及面向对象
  • GPT-4报告解读
  • 【HDR图像处理】HDR图像，HDRI技术的一些基础概念 | GPT对话记录
  • Appium - 自动化测试框架 - 工作原理、环境搭建
  • SpringBoot整合SpringSecurity权限控制（动态拦截url+单点登录）
  • 多机器人集群网络通信协议分析
  • 设计模式-结构型模式-适配器模式
  • Python字符串常用方法
  • 初赛-图的概念
  • PyTorch动态图 vs. TensorFlow静态图：深度学习框架之争
  • 网站是怎么屏蔽脏话的呢：简单学会SpringBoot项目敏感词、违规词过滤方案
  • 信创办公–基于WPS的PPT最佳实践系列 （将幻灯片组织成节的形式）
  • 【语音唤醒】TC-ResNet：移动设备上实时关键词检测的时间卷积算法
  • RK3568 JDK RXTX-JAVA串口485开发
  • python 基础知识复习之元祖
  • 小驰私房菜_05_camx 添加水印信息
  • 如何使用LaTeX中的命令【ChatGPT 3.5 vs. ChatGPT 4】
  • chatGPT身份指令
  • 开启元宇宙新时代，VR全景，体验虚拟展厅