不想等后端接口就想调试？试试这个

前言

大家好，我是 simple ，我的理想是利用科技手段来解决生活中遇到的各种问题。

在前端开发中，经常会依赖于后端提供的API来获取数据，但后端API可能尚未准备就绪，于是前端只能自己造数据，等接口来了再删假数据，这样不仅麻烦，而且容易删出问题，又要重新测一遍。但是使用json-server基本上可以解决这个问题。

JSON Server介绍

JSON Server是一个基于Node.js的简单而灵活的工具，它允许开发人员快速搭建一个RESTful API，使用JSON文件作为数据源，使得通过HTTP请求对数据进行CRUD操作。它帮助前端开发人员通过简单的命令，在没有真实后端的情况下，短时间内搭建一个可工作的API服务。

初试用

首先先安装依赖，你可以全局安装，这样使用会比较方便。如果介意的话也可以安装在某个文件夹下。

npm install -g json-server

创建一个db.json文件，然后让json-server运行即可，下面做一个演示。

{
  "articles": [
          {
              "id": 1,
              "title": "不想等后端接口就想调试？试试这个",
              "author": "simple"
          }
  ]
}

json-server -w db.json

根据resources打开试试吧

大功告成。

接口联调

在刚刚的案例中，articles在json中作为键，在接口请求中就变成了路径，而articles对应的值就是返回的响应结果。可能你会好奇这只有一个路径，怎么对articles进行增删改查？

在RESTful架构中，使用POST，DELETE，PUT和GET四种请求方式分别对指定的URL资源进行增删改查操作。接下来就简单试试其他方法吧。

增删改查

// 增加
function add() {
  return request({
    method: 'post',
    url: 'http://localhost:3000/articles',
    data: {
      author: 'simple',
      title: '2023了，该用一下pnpm了'
    }
  })
}

add()

从图可以看出，json里面已经发生了改变了，并且你们注意到了吗？第一：id是它自动生成的，我并没有传入id进去。第二：它没有跨域，我们是不同端口，正常是需要后端配置响应头的，在这里json-server已经帮我们做了。

function del() {
  return request({
    method: 'delete',
    url: 'http://localhost:3000/articles/2'
  })
}

del()

删除也是只需要在url后面添加对应id即可进行删除。查找详情和修改对应删除和添加操作，只是方法不一样，我就不一一演示了。

高级筛选

json-server还帮我们实现了分页查询, 过滤, 排序 等功能，我就简单演示一下。

http://localhost:3000/articles?_page=1&_limit=3 // 分页查询
http://localhost:3000/articles?id=2 // 过滤
http://localhost:3000/articles?_sort=author&_order=asc // 排序 asc为正序，desc为倒序

路由映射

我们可以给路由自定义添加一些前缀或者后缀，让其可以导向我们想去的地方，或者有时候我们是应该传query去搜索而不是通过params，我们都可以在这定义它。

{
  "/base/*": "/$1", 
  "/:resource/:id/show": "/:resource/:id",
  "/posts/:category": "/posts?category=:category",
  "/articles?id=:id": "/posts/:id"
}

项目实践

在项目开发前，前后端应该一起协商接口发送与返回的数据格式，一旦定下来就不应该随便被改变。然后我们再对项目稍作配置，我们可以在拦截器中筛选一些接口，修改一下基地址（因项目制宜），然后让一些接口发送到json-server即可。