前端mock数据json-server数据模拟工具【开发神器】

json-server 数据模拟工具 模拟本地数据
Github

1.安装

npm install -g json-server

2.创建数据

创建文件db.json

{
  "posts": [
    { "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" }
}

3.运行

在package.json中配置

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "generate":"json-server ./db/genter.json"
 },

然后运行 npm run generate

可在apizza postman 调试工具中调试

GET方法调试

http://localhost:3000/posts 获取posts信息

http://localhost:3000/posts/1 获取posts id 1的信息

http://localhost:3000/user?q=typicode 获取posts author是typicode 的信息

还可以多个数据之间做关联例：

数据

{
    "user":[
        {
            "name":"老郑",
            "phone":"13455554545",
            "id":1,
            "companyId":2
        },
        {
            "name":"老李",
            "phone":"13584844800",
            "id":2,
            "companyId":2
        },
        {
            "name":"老王",
            "phone":"13584844899",
            "id":3,
            "companyId":3
        },
        {
            "name":"老六",
            "phone":"13584844877",
            "id":4,
            "companyId":1
        },
        {
            "name":"老七",
            "phone":"13455445255",
            "id":5,
            "companyId":2
        },
        {
            "name":"老八",
            "phone":"15844544412",
            "id":6,
            "companyId":3
        }
    ],
    "companies":[
        {
            "id":1,
            "name":"alibaba",
            "description":"阿里巴巴的网站有，淘宝，天猫，飞猪"
        },
        {
            "id":2,
            "name":"腾讯",
            "description":"腾讯的网站有，腾讯1，腾旭2，腾讯3"
        }
        ,
        {
            "id":3,
            "name":"百度",
            "description":"百度的网站有，百度1，百度2，百度3"
        }
    ]
}

http://localhost:3000/companies/2/user 找到

[
    {
        "name": "老郑",
        "phone": "13455554545",
      
        "id": 1,
        "companyId": 2
    },
    {
        "name": "老李",
        "phone": "13584844800",
        "email": "4877744541@qq.com",
        "eductiong": "本科",
        "school": "北京广播电视大学",
        "profession": "计算机",
        "profile": "最动人是你那纯净明亮炽热的眼睛，恰似一泓清泉，源自心灵深处。",
        "id": 2,
        "companyId": 2
    },
    {
        "name": "老七",
        "phone": "13455445255",
        "email": "4877744541@qq.com",
        "eductiong": "本科",
        "school": "北京广播电视大学",
        "profession": "计算机",
        "profile": "最动人是你那纯净明亮炽热的眼睛，恰似一泓清泉，源自心灵深处。",
        "id": 5,
        "companyId": 2
    }
]

POST方法调试

添加数据

postman 中post方法请求，body row形式的传入数据json这样的话会在原有的数据上添加一条数据

更新数据

postman 中put方法

删除数据

delete方法

经常使用方法就到这里更多的还是要参考文档

Github