JSON-Server 极速入门教程

万少

发布于 2025-04-13 14:48:59

5910

文章被收录于专栏：万少的技术分享万少的技术分享

JSON-Server 入门教程

什么是 JSON-Server？

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

快速开始

1. 安装

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

npm install -g json-server

2. 创建数据文件

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

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

3. 启动服务器

在终端中运行：

json-server --watch db.json

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

基本使用

获取数据

获取所有文章：

GET http://localhost:3000/posts

获取特定文章：

GET http://localhost:3000/posts/1

添加数据

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

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

更新数据

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

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

删除数据

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

高级功能

1. 数据过滤

获取浏览量大于 100 的文章：

GET http://localhost:3000/posts?views_gt=100

2. 分页

获取第 2 页，每页 5 条数据：

GET http://localhost:3000/posts?_page=2&_per_page=5

3. 排序

按浏览量降序排序：

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

4. 关联查询

获取文章及其评论：

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

实用技巧

自定义端口：

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

添加延迟：

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

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

常见问题

数据没有更新？

确保 db.json 文件有写入权限
检查文件是否被其他程序占用

跨域问题？

使用 --no-cors 参数启动服务器

json-server --watch db.json --no-cors

需要更多功能？

查看官方文档了解更多高级功能
可以使用中间件扩展功能

总结

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-04-13，如有侵权请联系 cloudcommunity@tencent.com 删除

数据

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度