JSON-Server 极速入门教程

JSON-Server 入门教程

什么是 JSON-Server？

JSON-Server 是一个零代码的 REST API 模拟工具，它可以在不到 30 秒的时间内为你创建一个完整的假 REST API。它非常适合前端开发者在没有后端支持的情况下进行开发和测试。

快速开始

1. 安装

首先，确保你的电脑上已经安装了 Node.js。然后打开终端，运行以下命令：

bash 复制代码

npm install -g json-server

2. 创建数据文件

在你的项目目录中创建一个名为 db.json 的文件，这个文件将作为你的数据库。例如：

json 复制代码

{
  "posts": [
    { "id": 1, "title": "我的第一篇博客", "author": "张三" },
    { "id": 2, "title": "学习心得", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "body": "写得真好！", "postId": 1 },
    { "id": 2, "body": "受益匪浅", "postId": 2 }
  ]
}

3. 启动服务器

在终端中运行：

bash 复制代码

json-server --watch db.json

服务器将在 http://localhost:3000 启动。

基本使用

获取数据

获取所有文章：
bash 复制代码
```
GET http://localhost:3000/posts
```
获取特定文章：
bash 复制代码
```
GET http://localhost:3000/posts/1
```

添加数据

bash 复制代码

POST http://localhost:3000/posts
Content-Type: application/json

{
  "title": "新文章",
  "author": "王五"
}

更新数据

bash 复制代码

PUT http://localhost:3000/posts/1
Content-Type: application/json

{
  "title": "修改后的标题",
  "author": "张三"
}

删除数据

bash 复制代码

DELETE http://localhost:3000/posts/1

高级功能

1. 数据过滤

获取浏览量大于 100 的文章：
bash 复制代码
```
GET http://localhost:3000/posts?views_gt=100
```

2. 分页

获取第 2 页，每页 5 条数据：
bash 复制代码
```
GET http://localhost:3000/posts?_page=2&_per_page=5
```

3. 排序

按浏览量降序排序：

bash 复制代码

GET http://localhost:3000/posts?_sort=views&_order=desc

4. 关联查询

获取文章及其评论：

bash 复制代码

GET http://localhost:3000/posts?_embed=comments

实用技巧

自定义端口：
bash 复制代码
```
json-server --watch db.json --port 3004
```

添加延迟：

bash 复制代码

json-server --watch db.json --delay 2000

静态文件服务 ：创建 public 文件夹，放入静态文件，它们会被自动提供。

常见问题

数据没有更新？
- 确保 db.json 文件有写入权限
- 检查文件是否被其他程序占用
跨域问题？
- 使用 --no-cors 参数启动服务器
bash 复制代码
```
json-server --watch db.json --no-cors
```
需要更多功能？
- 查看官方文档了解更多高级功能
- 可以使用中间件扩展功能

总结

JSON-Server 是一个简单但功能强大的工具，它可以帮助你：

快速搭建测试环境
模拟后端 API
进行前端开发测试
学习 REST API 概念

现在你可以开始使用 JSON-Server 来加速你的开发流程了！

json-server

Node.js CI

重要提示

正在查看 beta v1 文档 - 可用但可能会有破坏性更改。稳定版本请参见这里

安装

bash 复制代码

npm install json-server

使用方法

创建一个 db.json 或 db.json5 文件

json 复制代码

{
  "posts": [
    { "id": "1", "title": "一个标题", "views": 100 },
    { "id": "2", "title": "另一个标题", "views": 200 }
  ],
  "comments": [
    { "id": "1", "text": "关于帖子1的评论", "postId": "1" },
    { "id": "2", "text": "关于帖子1的另一个评论", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

查看 db.json5 示例

json5 复制代码

{
  posts: [
    { id: "1", title: "一个标题", views: 100 },
    { id: "2", title: "另一个标题", views: 200 },
  ],
  comments: [
    { id: "1", text: "关于帖子1的评论", postId: "1" },
    { id: "2", text: "关于帖子1的另一个评论", postId: "1" },
  ],
  profile: {
    name: "typicode",
  },
}

你可以在这里阅读更多关于 JSON5 格式的信息。

将其传递给 JSON Server CLI

bash 复制代码

$ npx json-server db.json

获取 REST API

bash 复制代码

$ curl http://localhost:3000/posts/1
{
  "id": "1",
  "title": "一个标题",
  "views": 100
}

运行 json-server --help 查看选项列表

路由

基于示例 db.json，您将获得以下路由：

bash 复制代码

GET    /posts
GET    /posts/:id
POST   /posts
PUT    /posts/:id
PATCH  /posts/:id
DELETE /posts/:id

# 评论同上

bash 复制代码

GET   /profile
PUT   /profile
PATCH /profile

参数

条件

``→==
lt → <
lte → <=
gt → >
gte → >=
ne → !=

ini 复制代码

GET /posts?views_gt=9000

范围

start
end
limit

ini 复制代码

GET /posts?_start=10&_end=20
GET /posts?_start=10&_limit=10

分页

page
per_page (默认 = 10)

ini 复制代码

GET /posts?_page=1&_per_page=25

排序

_sort=f1,f2

bash 复制代码

GET /posts?_sort=id,-views

嵌套和数组字段

x.y.z...
x.y.z[i]...

ini 复制代码

GET /foo?a.b=bar
GET /foo?x.y_lt=100
GET /foo?arr[0]=bar

嵌入

ini 复制代码

GET /posts?_embed=comments
GET /comments?_embed=post

删除

bash 复制代码

DELETE /posts/1
DELETE /posts/1?_dependent=comments

提供静态文件

如果您创建一个 ./public 目录，JSON Server 将同时提供其内容和 REST API。

您还可以使用 -s/--static 选项添加自定义目录。

bash 复制代码

json-server -s ./static
json-server -s ./static -s ./node_modules