json-server【模拟后台接口】

前言

该文章将教会大家了解json-server是什么，并且如何使用它

---

一、JSON-Server是什么？

一款模拟后台接口的依赖，在一个·JOSN文件中进行操作
官网:https://www.npmjs.com/package/json-server

二、使用步骤

1.安装

npm install -g json-server

2.编写一个JSON文件

代码如下（示例）：db.json

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

3.运行

去到该json文件目录下
运行命令

json-server --watch .\名称.json --port 端口号

---

三、使用命令

主要分为增删改查四大部分

1.GET获取数据

代码如下（示例）：

浏览器访问：http://localhost:端口号/db
这样就可以拿到json里边的数据信息了
-----------------------------
带参:
http://localhost:端口号/属性名?参数名=值
这就可以过滤出符合条件的值

2.POST添加数据

行为：向对应的数组添加新对象。
对象的属性取决于POST请求中body的设置。
如果body没有设置，json-server仍然会给/data1数组添加一个新对象，并赋予一个默认的id值，新对象>有且仅有id这一个属性。
如果用户只设置了id以外的属性，json-server也会给新对象生成一个随机的id值。

3.put修改数据(全部更新)

把我们需要改变的数据放到body处发送过去进行条件修改

例如:

# 修改课程，请求body中必须包含course的属性数据
PUT    /course/1

4.patch修改数据(局部更新)

把我们需要改变的数据放到body处发送过去进行条件修改

例如:

# 修改课程，请求body中必须包含course的属性数据
PATCH  /course/1

5.delete删除数据

代码如下（示例）：

使用delete方式访问：http://localhost:端口号/user/5
这样就可以删除user属性中id为5的数据了

6.多表联查(关系)

要包含子资源，请添加 _embed

例如:GET： /posts?_embed=comments

要包含父资源，请添加 _expand

例如:GET: /comments?_expand=post

7.分页

使用_page和可选地_limit对返回的数据进行分页

例如:GET: /posts?_page=7&_limit=20

8.排序

添加_sort和_order（默认升序）

演示升序降序
GET /posts?_sort=views&_order=asc
或者
GET /posts?_sort=views&_order=desc

多个字段可用&一块使用
GET /posts?_sort=user,views&_order=desc,asc

更多使用方法可查阅官方文档:https://www.npmjs.com/package/json-server

总结

使用JSON-Server就能实现数据自由，模拟接口实现页面操作，堪称’前端神器😋’