JSON-Server 极速入门教程

发布于:2025-04-13 ⋅ 阅读:(22) ⋅ 点赞:(0)

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
    

实用技巧

  1. 自定义端口

    json-server --watch db.json --port 3004
    
  2. 添加延迟

    json-server --watch db.json --delay 2000
    
  3. 静态文件服务
    创建 public 文件夹,放入静态文件,它们会被自动提供。

常见问题

  1. 数据没有更新?

    • 确保 db.json 文件有写入权限
    • 检查文件是否被其他程序占用
  2. 跨域问题?

    • 使用 --no-cors 参数启动服务器
    json-server --watch db.json --no-cors
    
  3. 需要更多功能?

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

总结

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

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

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


网站公告

今日签到

点亮在社区的每一天
去签到