前端快速搭建一个RESTful API

前言

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

场景1

在前端开发中，有时候前端静态页已经完成后端接口迟迟未完成，前端可能就需要自己去创造假数据，但如果将假数据直接放在js文件中，等接口调试的时候又容易出现新的问题，还需要重新删除数据。

在项目开发前，前后端应该一起协商接口发送与返回的数据格式，一旦定下来就不应该随便被改变。然后我们可以搭建一个简易的服务器来模仿后端的api接口请求，这样等到后端接口出来的时候我们只需要简单更换一个地址甚至是改个基地址即可。

场景2

当前端需要构建一个小demo，需要发送一些接口对数据进行增删改查。

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"
}