json-server的使用从入门到精通

本地数据接口 —— json-server 从入门到膨胀

如果不想自己在本地搭环境，还可以使用 《前端需要的免费在线api接口》 里推荐的几个线上接口平台，里面包括常用的 json 结构数据和图片。

虽然有线上的免费接口可以测试，但需要自定义接口和数据的时候，还是本地模拟数据比较适合前端开发者。

本文分 入门篇 和 进阶篇。再往下滑一点就能看到全文目录。

入门篇： 5分钟内带你实现 本地环境搭建 和 增删改查 操作，满足入门测试使用。

进阶篇： 主要讲解常用的 查询操作，除此之外还包括 常规配置、静态资源配置 等知识点。这部分有点长，建议收藏。

本文约定

1. 本文主要面向的读者是 前端小白，几乎不会涉及到后端知识，所以并不打算讲解 json-server 中间件 的内容。

2. 本文讲到的所有知识点都会提供对应的代码展示（会比官方文档详细点）。

3. 本文使用 postman 测试，希望能照顾到使用不同工具库做数据请求的读者（我知道还有只懂 jQuery 的开发者）。

4. 特殊情况会使用 axios 配合演示。

点赞 + 收藏 = 学会了

目录

思维导图.png

入门

json-server简介

npm地址 | github地址

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

引用了官方的一句话，大概意思是30秒就能获得一套完整的模拟 REST API 接口。

使用 json-server 需要遵守一定的规范。

• 数据查询要使用 GET。

• 新增数据要使用 POST。

• 删除数据要使用 DELETE。

• 修改数据使用 PUT 和 PATCH。

其他啰嗦的介绍可以打开上面提供的网址看看。

30秒起步

30秒起步分 4 步完成：

1. node 环境安装

2. 安装 json-server

3. 创建数据库（其实就是一个 json 文件）

4. 启动服务

1. node 环境安装

json-server 需要通过 npm 下载，npm 依赖在 node 中。

node 常见的安装方法有2种。第一种是官方下载，第二种是使用 nvm 下载。自己选一种就行。

node 官网，点击进入主页下载，下载完狂按“下一步”和“完成”就行了。

注意： node 版本一定要 12 以上。不然会报以下错误：

json-server requires at least version 12 of Node, please upgrade

2. 安装 json-server

可以全局安装，也可以在某项目里安装。这里建议全局安装，因为以后你可能会对 json-server 产生依赖。

全局安装方式：

npm install -g json-server

3. 创建数据库

在你本机创建一个文件夹，然后新建一个 json 文件，再填入数据即可。

建议文件名不要出现中文。

例：

创建 json-server-demo 文件夹，在 json-server-demo 里创建 db.json 文件（这些文件夹和文件名都可以自由命名）。

db.json 文件录入以下数据（数据来自 json-server 官方文档，你也可以使用自己的数据）

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

4. 启动服务

进入 json-server-demo 目录，打开终端输入以下命令即可

json-server --watch db.json

首页和三个接口都可以直接在浏览器访问，自己打开试试吧。

搞掂！

查（get）

json-server 查询数据需要使用 GET 方法。

入门篇 只写一种查询方法，其他查询操作请往下滑，看 进阶篇。

上一小节创建了3个接口，我们可以直接在浏览器、postman或者自己写JS代码获取数据。

http://localhost:3000/posts

http://localhost:3000/comments 和 http://localhost:3000/profile 两个接口可以自己尝试，这里不再啰嗦。

增（post）

json-server 新增数据需要使用 POST 方法。

例：给 posts 添加一条新的数据。

http://localhost:3000/posts

这里使用 POSt 方法向 /posts 接口传输数据，/posts 原本的数据结构是包含 id、title、author 三个字段，id 默认是自增主键，不传的话会默认增加。

此时打开 db.json 文件看看，可以发现 posts 里多了一条数据。

需要注意的是：json-server 默认情况下并不会限制你上传的数据格式和类型，所以需要你严格遵循自己设计的数据格式来添加和修改。

删（delete）

json-server 删除数据需要使用 DELETE 方法。

删除的公式是：

http://localhost:3000/{接口名}/{id}