json-server的使用

什么是json-server

一个在前端本地运行，可以存储json数据的server
模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。
参考网址： https://www.jianshu.com/p/bdbbd3314cf3

安装

npm install -g json-server

使用

准备好db.json

1. 为对象类型，每个键名即为将来的接口名，属性值是数组
2. 唯一标识字段为"id"

{
    "product":[],
    "users":[]
}

启动

json-server --watch db.json
也可自定义端口
json-server --watch --port 3001 db.json

//默认访问接口为：
localhost:3000

可在前端配置访问基本路径

const baseUrl = "http://localhost:3000"

增

let newProduct = {
        proName: '手机',
        price: 300
    }
    axios.post(`${baseUrl}/product`, newProduct)
        .then(res => {
            console.log(res);
        })

删

axios.delete(`${baseUrl}/product/5`)
    .then(res => {
        console.log(res);
    })

改

let newData = {
        proName: '手套',
        price: 10
    }
    axios.put(`${baseUrl}/product/6`, newData)
        .then(res => {
            console.log(res);
        })

查

axios.get(`${baseUrl}/product`)
    .then(res => {
        console.log(res);
    })

json-server内置实现的过滤字段

「注」过滤字段，只针对数组数据。（毕竟只有数组需要过滤）

_gte: 大于等于

_lte: 小于等于

_ne: 不等于

_like: 包含

例：http://localhost:3001/data1?age_gte=20&age_lte=30

_page：访问第几页数据

_limit：一页多少条（默认一页10条）

_sort：设定排序字段

_order：设定排序的方式（升序：asc；降序：desc；默认升序）

例：http://localhost:3001/data1?_sort=age&_order=asc

q：全文搜索关键字

axios.get("http://localhost:3000/product")
axios.get("http://localhost:3000/user")
axios.get("http://localhost:3000/user/6")
axios.get("http://localhost:3000/product?price=90")
axios.get("http://localhost:3000/product?price_gte=90")
axios.get("http://localhost:3000/product?_page=2&_limit=3&_sort=id&_order=desc")
axios.get("http://localhost:3000/product?proName_like=机")
axios.get("http://localhost:3000/product?q=机")