json-server使用

377 阅读1分钟

在他的帮助下可以在很短的时间内搭建一个Rest API, 然后就可以让前端在不依赖后端的情况下进行开发啦

全局安装json-server

npm install -g json-server

创建项目并初始化

mkdir jsonServer 
cd jsonServer
yarn init -y

新建初始化数据

根目录下新建db.jsson(默认命名不可修改)

db.json数据初始值

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

启动json-server服务

json-server watch db.json

访问localhost:3000即可访问

常见访问接口

get (获取数据)

localhost:3000/posts //获取posts列表数据
localhost:3000/posts/1 //获取posts列表数据中id等于1的数据

post (添加数据)

$.ajax({
    type: "post",
    url: "http://127.0.0.1:3000/posts",
    dataType: "json",
    data: {
        "title": "888",
        "author": "8555"
    },
    success: function (data) {

    },
    error: function (e) {

    }
});

db.json里面的数据自动变化

"posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    },
    {
      "title": "888",
      "author": "8555",
      "id": 2
    }
]

put 修改数组对应id内容

$.ajax({
    type: "PUT",
    url: "http://127.0.0.1:3000/posts/3",
    dataType: "json",
    data: {
        "title": "修改文件",
        "author": "刘鹏"
    },
    success: function (data) {

    },
    error: function (e) {

    }
});

delect 删除数组对应id的内容

$.ajax({
    type: 'DELETE',
    url: "http://127.0.0.1:3000/posts/1",
    dataType: "json",
    success: function (data) {

    },
    error: function (e) {

    }
});

筛选条件实现(get)

http://localhost:3000/posts?title=json-server&author=typicode

执行结果为

[
    {
        title: "json-server",
        author: "typicode",
        id: 1
    }
]

分页数据实现 (get)

http://localhost:3000/posts?_page=1&_limit=2
// page 页数 limit每页条数

数据排序实现(get)

http://localhost:3000/posts?_sort=id&_order=desc
http://localhost:3000/posts/1/comments?_sort=votes&_order=asc

数据筛选的实现(get)

http://localhost:3000/posts?_start=2&_end=4
http://localhost:3000/posts/1/comments?_start=0&_limit=5

标题检索的实现(get)

http://localhost:3000/posts?q=internet
//搜索标题中含有Internet的数据