json-server的简单使用

简介: 如何使用`json-server`来快速搭建一个模拟API服务,包括安装`json-server`、创建JSON数据文件、启动服务以及通过浏览器测试API的基本操作。

首先,我们需要安装node和配置node环境,…略过。
新建文件夹,打开cmd,执行如下命令

npm i json-server 
//或者
npm i json-server -g//安装到全局 在任意文件夹下可以使用

如果是将json-server下载到当前文件夹下 我们还需要一个步骤才能下载json-server

npm init //会生成package.json文件  然后再npm i json-server

我们还需要一个json文件,因为我们是要mock一个json数据,
dome01.json

{
   
    "nameList": [
        {
   
            "id": "1",
            "age": "18",
            "habby": "跳舞"
        },
        {
   
            "id": "2",
            "age": "28",
            "habby": "唱歌"
        },
        {
   
            "id": "3",
            "age": "38",
            "habby": "画画"
        }
    ],
    "type": [
        {
   
            "id": "1",
            "thisType": "教师"
        },
        {
   
            "id": "2",
            "thisType": "程序员"
        },
        {
   
            "id": "3",
            "thisType": "项目经理"
        }
    ]
}

我们再dome01.json同级文件夹中打开cmd
执行

json-server --watch doem01.json --port 8000  --host 127.0.0.1

当然上面的–watch可以简写–w
端口可以换成其他的
也可以直接

json-server -w doem01.json

这时候我们看到这样就算成功了
在这里插入图片描述
我们可以看到给了我们两个url
后面的路由正好是我们在json里面的两个key

1.比如我们在浏览器查询

http://127.0.0.1:8090/nameList

在这里插入图片描述

会给我们将nameList这个对象数据返回过来
2.我们还可以带参查询比如

http://127.0.0.1:8090/nameList?id=2

会将nameList中id为2的对象返回
在这里插入图片描述
3.也可以查询id=1并且age=18的对象

http://127.0.0.1:8090/nameList?id=1&age=18

在这里插入图片描述
4.还可以进行模糊查询 q

http://127.0.0.1:8090/nameList?q=

在这里插入图片描述
我们这里只是简单的接受怎么使用,理解了怎么使用再查文档就能很快地开发了,其中数据库的所有查询在json-server中都可以实现,想继续学习的朋友可以看一下详细的json-server用法

目录
相关文章
|
1月前
|
JSON JavaScript 前端开发
使用json-server搭建模拟api接口
使用json-server搭建模拟api接口
49 0
|
2月前
|
JSON 前端开发 数据格式
json-server 模拟接口服务
json-server 模拟接口服务
36 0
|
4月前
|
存储 JSON 前端开发
利用json-server快速在本地搭建一个JSON服务
利用json-server快速在本地搭建一个JSON服务
171 0
|
4月前
|
JavaScript
使用json-server和mock写一个简单的随机数据的接口2.0
使用json-server和mock写一个简单的随机数据的接口2.0
36 1
|
4月前
|
JavaScript
使用json-server和mock写一个简单的随机数据的接口
使用 json-server 需要遵守一定的规范。
78 0
|
10月前
|
JSON 前端开发 API
json-server模拟后端接口
json-server模拟后端接口
60 0
|
10月前
json-server对数据进行增删改查操作
json-server对数据进行增删改查操作
99 0
|
JSON 前端开发 数据格式
|
JSON JavaScript 前端开发
vue中使用json-server
vue中使用json-server
|
JSON 前端开发 数据格式
json-server单独使用或者在react中进行使用
json-server单独使用或者在react中进行使用