【 json-server 】使用 json-server 模拟数据 （超级详细）

【 json-server 】使用 json-server 模拟数据 （超级详细）

---

---

1. json-server

1.1 准备工作

node环境建议在12以上

npm i -g json-server

在项目文件夹下执行json-server --watch db.json --port 9000

1.2 获取数据的基本方法(GET)

在使用json-server的时候,我们在自定义模拟数据的时候

第一种方法: 类似于动态路由

http://localhost:9000/users/id

http://localhost:9000/users/001

根据 id 获取数据,得到的是一个对象

 {
      "id": "002",
      "name": "jack",
      "age": 18
}

第二种方法:类似于query传参

http://localhost:9000/users?id=001

根据 id 获取数据,得到的是一个数组

[
    {
        "id": "001",
        "name": "mark",
        "age": 25
    }
]

第三种方法: 添加多个过滤条件

http://localhost:9000/users?id=001&name=mark

第四种方法: 使用对象读值得方法

http://localhost:9000/message?info.telephone=135661246

[
    {
        "info": {
            "address": "福建省福州市xxx",
            "telephone": "135661246",
            "email": "165464@163.com"
        }
    }
]

1.3 全局模糊搜索、分页、排序、截取局部数据

1.3.1 全局模糊搜索

q=xx 全局模糊匹配 ，只要包含xx就会被找出来

http://localhost:9000/users?q=li

[
    {
        "id": "003",
        "name": "lili",
        "gender": "male",
        "age": 56
    },
    {
        "id": "004",
        "name": "lihua",
        "gender": "female",
        "age": 80
    }
]

1.3.2 分页

_page : 指定页码

_limit : 来限制每页得条数"

http://localhost:9000/users?gender=male&_page=2&_limit=1

[
    {
        "id": "003",
        "name": "lili",
        "gender": "male",
        "age": 56
    }
]

1.3.3 排序

_sort=xxx : 根据xx进行排序，默认是正序

_order=asc | desc

http://localhost:9000/users?_sort=age

[
    {
        "id": "002",
        "name": "jack",
        "gender": "male",
        "age": 18
    },
    {
        "id": "001",
        "name": "mark",
        "gender": "female",
        "age": 25
    },
    {
        "id": "003",
        "name": "lili",
        "gender": "male",
        "age": 56
    },
    {
        "id": "004",
        "name": "lihua",
        "gender": "female",
        "age": 80
    }
]

http://localhost:9000/users?_sort=age&_order=desc

[
    {
        "id": "004",
        "name": "lihua",
        "gender": "female",
        "age": 80
    },
    {
        "id": "003",
        "name": "lili",
        "gender": "male",
        "age": 56
    },
    {
        "id": "001",
        "name": "mark",
        "gender": "female",
        "age": 25
    },
    {
        "id": "002",
        "name": "jack",
        "gender": "male",
        "age": 18
    }
]

1.3.4 截取局部数据

它是根据索引值取（从0开始）

_start=0 开始

_end=3 结束

http://localhost:9000/users?_start=0&_end=2

[
    {
        "id": "001",
        "name": "mark",
        "gender": "female",
        "age": 25
    },
    {
        "id": "002",
        "name": "jack",
        "gender": "male",
        "age": 18
    }
]

_start 也可以配合 _limit 截取多少条数据数据

http://localhost:9000/users?_start=0&_limit=3

[
    {
        "id": "001",
        "name": "mark",
        "gender": "female",
        "age": 25
    },
    {
        "id": "002",
        "name": "jack",
        "gender": "male",
        "age": 18
    },
    {
        "id": "003",
        "name": "lili",
        "gender": "male",
        "age": 56
    }
]

1.4 大于、小于、不等于、局部模糊匹配

_gte : 大于

http://localhost:9000/users?age_gte=50

[
    {
        "id": "003",
        "name": "lili",
        "gender": "male",
        "age": 56
    },
    {
        "id": "004",
        "name": "lihua",
        "gender": "female",
        "age": 80
    }
]

_lte : 小于

http://localhost:9000/users?age_lte=18

[
    {
        "id": "002",
        "name": "jack",
        "gender": "male",
        "age": 18
    }
]

_ne : 不等于

http://localhost:9000/users?age_ne=56

[
    {
        "id": "001",
        "name": "mark",
        "gender": "female",
        "age": 25
    },
    {
        "id": "002",
        "name": "jack",
        "gender": "male",
        "age": 18
    },
    {
        "id": "004",
        "name": "lihua",
        "gender": "female",
        "age": 80
    }
]

_like : 局部模糊匹配

http://localhost:9000/users?name_like=li

[
    {
        "id": "003",
        "name": "lili",
        "gender": "male",
        "age": 56
    },
    {
        "id": "004",
        "name": "lihua",
        "gender": "female",
        "age": 80
    }
]

1.5 多表查询向下关联和向上关联

向下关联

_embed : 向下关联

http://localhost:9000/users?_embed=comments

上述有说过取名为复数，就是在这里有特殊的用法

例如如果需要和表之间有联系则需要如图所示

http://localhost:9000/users?_embed=comments

向上关联

_expand : 向上关联

在这里需要注意: 向上关联的时候要写成单数

http://localhost:9000/comments?_expand=user

v

1.6 添加数据(POST)

axios.post('http://localhost:9000/comments',{
  id:5,
  content:'大家好5',
  userId:'005'
}).then((res)=>{
  console.log(res.data)
})

1.7 修改数据(PUT,PATCH,DELETE)

put : 会覆盖原有的数据

patch : 有则修改无则添加

delete : 删除数据

axios.put('http://localhost:9000/comments/3',{
	id:3,
  content:'大家好3我被put修改了',
  userId:'003'
}).then((res)=>{
  console.log(res.data)
})


axios.patch('http://localhost:9000/comments/3',{
	id:3,
  content:'大家好3我被patch修改了',
  userId:'003'
}).then((res)=>{
  console.log(res.data)
})



axios.delete('http://localhost:9000/comments/3').then((res)=>{
  console.log(res.data)
})

1.8 静态资源部署

创建 json_server_config.json文件

{
	"port":9000,
	"watch":true,
	"static":"./public",
	"read-only":false,
	"no-cors":true,
    "no-gzip":false
}

读取的时候

http://localhost:9000/images/xx.jpg

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！