有时候需要mock数据，这两天一个大佬给我推荐了这个Json Server，告诉我十分钟就能学会。     然后进今天花时间看了一下。

一、创建一个文件夹

    首先随便建一个文件夹，然后点进去，在红框里面输入cmd，按Enter，也可以用vscode打开文件夹，在终端进行。 image.png

二、安装

    然后安装。

npm install json-server

image.png

三、初始化一个package.json文件

    同样地，也可以在vscode终端运行。     输入命令生成package.json文件。

npm init --yes

image.png image.png

四、启动JSon Server脚本

    在package.json里面的脚本script这里添加。

"serve":"json-server --watch db.json"

image.png     然后再运行命令启动Json server。

npm run serve

    当成功之后，你会发现生成了一个文件，db.json,你后面所有的数据都应该写在这里面。 image.png

db.json

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

image.png     以后接口baseURL就是在http://localhost:3000这里了。此时你去访问它，会见到下面这样一个页面。 image.png     观察一下db.json文件，整体是一个对象，里面的数据都是对象或者数组格式，引号都要用双引号，而且列表里面的每一个对象都应该有一个id。     如果在后面加一个路径访问，http://localhost:3000/db，你会得到db.json里面的所有数据。 image.png     如果在后面加一个路径访问，http://localhost:3000/posts，你会得到数据。 image.png

五、访问数据方式

    刚刚上面的访问的方式都是GET请求。也可以用POST、PUT、DELETE等方式进行请求数据。

六、自己设定数据

{
  "posts": [
    {
      "id": 1,
      "title": "他好帅",
      "author": "王一博"
    },
    {
      "id": 2,
      "title": "他好棒",
      "author": "杨洋"
    },
    {
      "id": 3,
      "title": "他好赞",
      "author": "谢允"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "蓝忘机"
  }
}

http://localhost:3000/posts/1


![image.png](https://s2.51cto.com/images/20211223/1640271631612210.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
2. 带参数

http://localhost:3000/posts?id=1


![image.png](https://s2.51cto.com/images/20211223/1640271600599877.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
3. 分页获取数据

http://localhost:3000/posts?_page=3&_limit=1


![image.png](https://s2.51cto.com/images/20211223/1640271952104579.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
    _limit每页多少条数据，_page当前是第几页。
4. 排序
```javascript
http://localhost:3000/posts?_sort=id&_order=desc

    让id进行降序排列返回。 image.png

  1. 选择数据
http://localhost:3000/posts?_start=0&_end=2

    返回前两条数据。 image.png 6. 选择满足一定条件的数据

http://localhost:3000/posts?id_gte=1&id_lte=2

    返回id大于等于1小于等于2的数据。 image.png