json-server的应用

作为一个前端开发工程师，在后端还没有ready的时候，不可避免的要使用mock的数据。很多时候，我们并不想使用简单的静
态数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。json-server是一个很好的可以替
我们完成这一工作的工具。

json-server安装（一次性永久安装）

npm install -g json-server

json-server应用

1. 创建一个json文件夹，json文件夹内创建一个data.json文件

# 创建文件夹
mkdir json
# 创建文件
touch data.json
{
    "data": []
}

json文件内容格式参考

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

2. 启动json-server

json-server data.josn

# 控制台会输出一下信息表名json-server启动成功
Loading data.json
Done
 
Resources
http://localhost:3000/data
http://localhost:3000/comments
http://localhost:3000/profile
 
Home
http://localhost:3000
 
Type s + enter at any time to create a snapshot of the
database
 
访问地址为：http://localhost:3000/data

3. 增加数据

import axios from 'axios'
export default {
    created () {
        // Post数据提交 get获取  del删除
        // 添加数据
        axios({
            method:"post",
            url:"http://localhost:3000/data",
            data:{
            username:"Yi只猴",
            age:18
            }
        }).then((data)=>{
            console.log(data)
        })
    }
}

4. 删除某一条数据

import axios from 'axios'
export default {
    created () {
        // Post数据提交 get获取  del删除
        // 删除数据
        axios({
            method:'delete',
            url:'http://localhost:3000/data/1'//直接写ID即可
        }).then((data)=>{
            console.log(data)
        })
    }
}

5. 修改数据

import axios from 'axios'
export default {
    created () {
        // 修改数据
        axios({
            method:"patch",
            url:"http://localhost:3000/data/3",//ID
            data:{
            username:'嘻嘻' //要修改成什么
            }
        }).then((data)=>{
            console.log(data)
        })
    }
}

6. 查找所有

// 查找所有
axios({
    method:"get",
    url:"http://localhost:3000/data",
}).then((data)=>{
   console.log(data)
 )

7. 查找某一条数据

// 查找id为3的记录
axios({
      method:"get",
      url:"http://localhost:3000/data/3",
   }).then((data)=>{
     console.log(data)
   })

8. 根据给定的name查找

// 查找指定name的记录
axios({
      method:"get",
      url:"http://localhost:3000/data?username=小猴",
  }).then((data)=>{
     console.log(data)
  })

9.模糊查询

axios({
     method:"get",
     url:"http://localhost:3000/data?q=猴",
}).then((data)=>{
    console.log(data)
})

「注」（json-server的坑。请记住这里。）

json-server的缺点：
如果需要用json-server模拟多层路由嵌套，无法通过db.json中数据的多层嵌套，达到模拟多层路由嵌套的目的。
换句话说，路由只能匹配到db.json这个json最外层的key值。也就是例子中的data、comments、profile。而里层的key值，都不会被路由匹配。

至于/data/1这样的访问方式，相当于对/data这个路由下的数据，进行一个过滤，类似于从列表页进入详情/编辑页。也就是说，/data/1相当于在模拟/data/:id这样的访问方式，访问的仍然是/data这个接口。这和严格意义上的路由匹配，是不一样的。

---

😊😊帅哥美女们，很高兴再次遇见看到最后的你们~~~
=========在此特奉上一份解决json-server缺陷的方案👇👇👇！！！

---

当json-server的缺点正好妨碍了您的需求时，可以采用这一种方法O：vue项目mock数据方案之一：webpack的devServer.before