前端使用json-server实现模拟数据

一、基本使用

• 1、在项目中安装包

  npm install json-server -D
  

• 2、在项目的根目录下创建一个文件夹及一个json文件__json_server_mock__/db.json

  {
    "user": []
  }
  

• 3、在package.json中配置启动脚本

  "scripts": {
      "mock": "json-server ./__json_server_mock__/db.json --watch --port 6000"
   },
  

• 4、使用api接口测试工具根据restful api规范的方式来提交数据

  

• 5、观察db.json文件是否有数据

• 6、使用json-server的主要是要先到db.json文件中创建类似表的key,比如上面创建一个user的节点，可以简单理解为数据表

二、关于其他的补充

• 1、根据字段排序返回数据

  # 根据字段id降序查询数据
  localhost:6000/user?_sort=id&_order=desc
  # 如果多个字段排序,字段间用,分开
  localhost:6000/user?_sort=id,username&_order=desc,desc
  

• 2、分页查询数据

  # _start开始查询的 _limit查询的数量
  localhost:6000/user?_start=1&_limit=2
  

• 3、一些常见的操作符

  _gte大于，_lte小于， _ne非， _like 模糊查询
  # username模糊查询带有五
  localhost:6000/user?username_like=五
  # 查询id大于等于3的
  localhost:6000/user?id_gte=3
  

• 4、多个id的查询

  localhost:6000/user?id=1&id=3
  

• 5、全文模糊查询

  # 模糊查询里面有五的
  localhost:6000/user?q=五
  

三、实现非标准的restfull api方式的接口

正常的json-server只能实现标准的restfull api的操作，对于非标准的，比如登录和注册就不能实现了，这时候就要我们使用中间件来操作

• 1、在__json_server_mock__/文件夹下创建一个中间件的文件

  module.exports = (req, res, next) => {
    if (req.method === "POST" && req.path === "/login") {
      if (req.body.username === "admin" && req.body.password === "123456") {
        return res.status(200).json({
          user: {
            token: "123",
          },
        });
      } else {
        return res.status(400).json({ message: "用户名或者密码错误" });
      }
    }
    next();
  };
  

• 2、配置启动脚本

  "json-api": "json-server __json_server_mock__/db.json --watch --port 5000 --middlewares ./__json_server_mock__/middleware.js"
  

• 3、测试登录接口