JSON Server — 模拟服务器

@一棵菜菜  July 15, 2019
★ 工具类 

说明

最近自己在写一个React页面功能，想要更接近实际的项目开发，所以希望模拟请求api接口并返回数据，也希望能够像真实操作数据库一样（增删改查）。了解到JSON Server可以实现，所以就学习和使用了它。开发结束后遂整理成此文，方便以后回顾。

《JSON Server》git官方文档

使用背景

在开发中，后端的接口往往是较晚出来的，但是有时候我们必须给前端页面一些虚假的数据去开发，这个时候一些mock工具就很有必要了，最终我选择了JSON Server工具，因为它足够简单，而且也能和你们所熟知的Mock.js 配合模拟数据。

json-server 的作用

可以使用此模拟服务器作为前端开发的后端服务器。即前端搭建本地的数据接口，创建json文件，便于前端调试开发。【仅模拟服务器，不是实际的后端服务器】

我之前使用esay-mock 提供的服务器来请求返回模拟数据的。

安装

// 全局
npm install json-server -g
// 或本地安装
npm install json-server --save-dev

使用 json-server

1. 创建一个json文件

在项目根目录下创建一个json文件，如db.json。再放入模拟的数据（可以使用我们所熟知的Mock.js 模拟出这些数据）。
JSON server 会实际操作本地配置的这个json文件中的数据，类似数据库滴。

{
  "agents": [
    {
      "name": "bjstdmngbdr01.test.com",
      "ip": "192.168.1.102",
      "resources": ["Firefox", "Safari", "Ubuntu", "Chrome"],
      "id": 1
    },
    {
      "name": "bjstdmngbdr08.test.com",
      "ip": "192.168.1.80",
      "resources": ["Firefox", "Safari", "Ubuntu", "Chrome"],
      "id": 2
    }
  ],
  "menuList": [
    {
      "title": "DASHBOARD",
      "icon": "icon-dashboard",
      "id":1
    },
    {
      "title": "AGENT",
      "icon": "icon-sitemap",
      "id":2
    }
  ]
}

2. 启动模拟服务器

根目录执行命令：

json-server --watch db.json

// 或指定端口号，如3013
json-server --watch db.json --port 3013

3. 浏览器访问模拟数据

在浏览器中访问http://localhost:3013/agents/,来查看服务器是否正确启动。如果启动成功，你将会得到下面的数据：

[
    {
      "name": "bjstdmngbdr01.test.com",
      "ip": "192.168.1.102",
      "resources": ["Firefox", "Safari", "Ubuntu", "Chrome"],
      "id": 1
    },
    {
      "name": "bjstdmngbdr08.test.com",
      "ip": "192.168.1.80",
      "resources": ["Firefox", "Safari", "Ubuntu", "Chrome"],
      "id": 2
    }
]

常用API（或路由）

获取agents列表

GET http://localhost:3013/agents

此请求的响应将是所有的agents列表数据。

eg（使用axios）：

axios.get("http://localhost:3013/agents").then(res => {
    console.log(res.data);
});

获得某个agent

GET http://localhost:3013/agents/{id}

此请求的响应将是与id值匹配的agent数据。

修改某个agent

PUT http://localhost:3013/agents/{id}
{
    "headers": {
        "Content-Type": "application/json"
    },
    "body": {MODIFIED AGENT}
}

body参数是修改过的agent数据，如下这个例子：

"body": {
      "name": "bjstdmngbdr01.test.com",
      "ip": "192.168.1.102",
      "resources": ["Firefox","Safari","360"],
      "id": 1
    }

id匹配的agent将被更新（修改），并用修改的agent替换。
即：将修改id=1的agent数据，修改的是其resources下的数据（删除"Ubuntu"、"Chrome"数据，并新增了一个"360"数据）。

此请求的响应将是修改后的agent数据。

eg（使用axios）：

let newItemData = {
      "name": "bjstdmngbdr01.test.com",
      "ip": "192.168.1.102",
      "resources": ["Firefox","Safari","360"],
      "id": 1
}

axios.put("http://localhost:3013/agents/1", newItemData).then(res => {
     console.log(res.data);
});
更多路由方式或内容请查看《JSON Server》git官方文档

添加新评论