json-server

json-server使用

简介

github地址

安装json-server

npm install -g json-server

启动json-server

json-server --watch db.json

配置

常用选项列表:

配置项 简写 描述
–help -h 查看所有命令选项
–watch -w 是否监视文件自动刷新数据
–host -H 设置域,默认为localhost
–port -p 设置端口号,默认为3000
–routes -r 指定路由文件
–static -s 设置静态资源目录
–config -c 指定配置文件,默认为“json-serer.json
–version -v 查看json-server版本号
–middlewares -m 指定中间件文件
–no-gzip -ng 不能压缩
–delay -d 设置延迟响应
–id -i 设置数据项/库的id属性,默认为id

如:

启动时修改端口号:
json-server --watch db.json --port 5001

操作

创建数据库

  1. 先创建一个server文件夹,并在里面创建db.json文件,在db.json文件中写入以下数据:
{
  "users": [
    {
      "id": 1,
      "name": "a",
      "age": 18
    }
  ],
  "comments": [
    {
      "id": 1,
      "content": "hello",
      "userId": 1
    }
  ]
}
  1. 启动服务,执行命令:
json-server --watch db.json --port 5001

在这里插入图片描述

创建了首页和三个接口。

查询数据

查询所有数据

调用接口:

http://localhost:5001/users

在这里插入图片描述

通过id查询

调用接口:

http://localhost:5001/users/1

在这里插入图片描述

调用接口:

http://localhost:5001/users?id=2

在这里插入图片描述

增加数据

调用接口:

id为自增长,不用提交。

在这里插入图片描述

删除数据

通过id删除

调用接口:

http://localhost:5001/users/1

表示删除id为1的数据。

修改数据

修改数据分2种:

  • put:覆盖数据
  • patch:补丁修改
put

调用接口:

在这里插入图片描述

patch

调用接口:

在这里插入图片描述

高级查询

条件查询

调用接口:

http://localhost:5001/users?name=小明

在这里插入图片描述

调用接口:

http://localhost:5001/users?name=小明&age=23

在这里插入图片描述

调用接口:

http://localhost:5001/users?name=小明&name=小花

在这里插入图片描述

分页查询

  • _page:设置页码。
  • _limit:页面数量。

调用接口:

http://localhost:5001/users?_page=3&_limit=3
// 调用第3页,每页获取3条数据

在这里插入图片描述

排序查询

  • _sort:排序的字段名。
  • _order:排序规则。
    • asc:升序。
    • desc:降序。

调用接口:

http://localhost:5001/users?_sort=age&_order=desc
// 通过age字段降序排列

在这里插入图片描述

切片查询

  • _start:开始位置,下标从0开始。
  • _end:结束位置。
  • _limit:片段长度。

调用接口:

http://localhost:5001/users?_start=3&_end=5
// 获取从下标3到下标5的数据

在这里插入图片描述

调用接口:

http://localhost:5001/users?_start=3&_limit=5
// 获取从下标3开始的5条数据

在这里插入图片描述

范围查询

  • _gte:大于等于。
  • _lte:小于等于。
  • _ne:不等于。

调用接口:

http://localhost:5001/users?id_gte=10
// 获取id大于等于10的所有数据

在这里插入图片描述

调用接口:

http://localhost:5001/users?id_lte=5
// 获取id小于等于5的所有数据

在这里插入图片描述

调用接口:

http://localhost:5001/users?id_ne=2
// 获取id不为2的所有数据

在这里插入图片描述

模糊查询

  • _like:模糊查询。

调用接口:

http://localhost:5001/users?name_like=花
// 获取name包含花的数据

在这里插入图片描述

全文查询

  • q:全文查询。

调用接口:

http://localhost:5001/users?q=2
// 查询所有包含2的相关数据

在这里插入图片描述

外键关联查询

调用接口:

http://localhost:5001/users/2/comments
// 查询comments中userId为2的数据

在这里插入图片描述

配置静态资源

静态资源

在server目录下,新建public文件夹,可以用于存放静态资源。

如果需要存放图片资源,可以在public目录下新建images文件夹,在images目录里放入图片。

这时可以通过http://localhost:5001/images/a.jpg访问图片。

在这里插入图片描述

首页资源

在public目录下,定义index.html,这样可以通过``http://localhost:5001`访问首页。

免费api接口

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值