json-server模拟接口请求过程

 

一、背景

前后端分离已经成为项目的标准开发模式，通过前后端分离，极大地提高了开发效率和开发能力。

二、问题引入

作为前端，在后端接口还没有提供的情况下，不可避免地要使用mock的数据。有时候，我们可以使用静态json数据来做mock，但有时候，我们并不想使用静态json数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。

json-server是一个很好的可以替我们完成这一工作的工具。我们只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。

三、需求场景及解决方法

什么是json-server：

json-server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。

使用方法：

1. 首先执行npm i json-server -g把json-server作为全局工具安装

 

 

2. 新建一个项目目录（后面文中所有的路径根目录都表示该项目目录）

在根目录中执行npm init初始化一个项目

新建/server目录用于放置服务端的文件

新建/server/db.json文件作为服务端的数据库文件

在/server/db.json文件中写入以下数据：

 

3. 在/server目录执行json-server db.json -w -p 8000 启动本地服务

 

4. 现在打开浏览器，访问网址http://localhost:8000，会出现一个接口管理页面：

访问resources里的user会跳转到http://localhost:8000/user，可以看到我们之前在db.json中写入的user数组

访问http://localhost:8000/book同上。

我们在db.json文件中写入了标准的json格式数据，这个json里有一个user数组和一个book数组，这就告诉json-server，我们的数据库里有一个名为user的“表”和一个名为book的“表”，并且表里的数据为xxx，然后json-server就会启动服务器，并且以每个“表”为单位为我们注册一系列标准的RESTful形式的API接口（路由），以user为例：

• [GET] /user #获取用户列表的接口
• [GET] /user/:id #获取单个用户的接口
• [POST] /user #新增用户的接口
• [PUT] /user/:id #修改用户的接口
• [DELETE] /user/:id #删除用户的接口

 

当然，主要用的是还是get和post

在获取列表的接口中也可以追加查询参数，来限定查询的结果，比如：

• 查询所有男性用户：

/user?gender=male

• 查询年龄大于等于20并且小于等于29的用户：/user?age_gte=20&age_lte=29

此外还有分页、排序、匹配、关系查询等查询方式 。

至此我们就拥有了一套强大的数据接口。

5.下面写一个简单的表单，添加一个用户

6.查看用户列表，已成功添加用户

7.编辑用户

接口数据已修改