『前端必备』本地数据接口—json-server

json-server介绍

简介

json-server 是一款小巧的接口模拟工具，一分钟内就能搭建一套 Restful 风格的 api，尤其适合前端接口测试使用。
只需指定一个 json 文件作为 api 的数据源即可，使用起来非常方便，30秒入门——可以对接口数据进行增删改查。
进阶操作还支持分页，排序等操作。

开源地址
主页地址：https://www.npmjs.com/package/json-server
Github项目地址：https://github.com/typicode/json-server
https://gitcode.net/mirrors/typicode/json-server?utm_source=csdn_github_accelerator

操作步骤

1. 全局安装 json-server

npm i -g json-server

# 查看版本
json-server -v

2. 创建一个 db.json 数据文件

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

注意： 数据与数据之间的关系，例如：posts——postId

3. 启动 json-server 接口服务器

# 默认端口为3000
json-server --watch db.json
或
json-server --watch db.json --port 端口号

4. 浏览器访问 http://localhost:3000/posts/1，你会得到

{ "id": 1, "title": "json-server", "author": "typicode" }

补充

• 如果您发出 POST、PUT、PATCH 或 DELETE 请求，更改将自动安全地保存到 db.json 文件中。
• 注意 Id 值是不可变的。

操作数据

增（POST）

// 添加新闻
export const addNews = (params) => request.post(`/news`, params)

删（DELETE）

// 删除新闻
export const deleteNews = (params) => request.delete(`/news/${params.id}`)

改（UPDATE、PATCH）

// 修改新闻
// update: 需要传所有参数，没传的为undefiend
export const patchNews = (params) => request.patch(`/news/${params.id}`, params)
// patch：只传需要修改的参数，没传的默认不修改
export const patchNews = (params) => request.patch(`/news/${params.id}`, params)

查（GET）

// 获取用户列表
export const queryUserList = () => request.get(`/users?_expand=role`)

// 获取用户信息
export const queryUserInfo = (params) => request.get(`/users/${params.id}?_expand=role`)

筛选

使用 . 访问筛选

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

分页

使用_page和可选地_limit对返回的数据进行分页。

在Link标题，你会得到first，prev，next和last链接。

GET /posts?_page=7
GET /posts?_page=7&_limit=20

默认返回10项

排序

添加_sort和_order（默认升序）

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

对于多个字段，请使用以下格式：

GET /posts?_sort=user,views&_order=desc,asc

切片(分页)

添加_start和_end或_limit

GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10

与Array.slice完全一样工作（即_start开始_end结束）

特殊符号

添加_gte或_lte获取范围

GET /posts?views_gte=10&views_lte=20

添加_ne以排除值

GET /posts?id_ne=1

添加_like到过滤器（支持正则表达式）

GET /posts?title_like=server

全文搜索

添加 q

GET /posts?q=internet

关系

要包含子资源，请添加 _embed

GET /posts?_embed=comments
GET /posts/1?_embed=comments

要包含父资源，请添加 _expand

GET /comments?_expand=post
GET /comments/1?_expand=post

获取或创建嵌套资源（默认为一级）

GET  /posts/1/comments
POST /posts/1/comments

命令行使用

json-server [options] <source>

Options:
  --config, -c       Path to config file           [default: "json-server.json"]
  --port, -p         Set port                                    [default: 3000]
  --host, -H         Set host                             [default: "localhost"]
  --watch, -w        Watch file(s)                                     [boolean]
  --routes, -r       Path to routes file
  --middlewares, -m  Paths to middleware files                           [array]
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                           [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing             [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding                     [boolean]
  --snapshots, -S    Set snapshots directory                      [default: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)         [default: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix, (e.g. _id as in post_id)
                                                                 [default: "Id"]
  --quiet, -q        Suppress log messages from output                 [boolean]
  --help, -h         Show help                                         [boolean]
  --version, -v      Show version number                               [boolean]

Examples:
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

https://github.com/typicode/json-server
您还可以在json-server.json配置文件中设置选项。

{
  "port": 3000
}