json-server

  • List item

json-server简介:

json-server是让本地json文件作为数据源的服务器,可以模拟接口,在接口的请求时配合http进行增删查改。

使用场景:

前端工作中,在后台还没有创建好接口时,为了使工作顺利的开展,此时前端需要模拟接口,等到后端做好接口时再进行接口的替换。

全局安装json-serve:

npm install -g json-server

配置json-serve:

1、在任意文件夹下创建json文件
在这里插入图片描述

2、json文件编辑内容(此时数组名即为开启服务的接口)
在这里插入图片描述

开启json-serve服务器:

1.cmd到json文件当前所在的文件夹
在这里插入图片描述在这里插入图片描述
2. 输入命令回车开启服务
json-server --watch --port 8000 list.json
json-server监听一个8000端口以list.json文件作为数据源
在这里插入图片描述

客户端访问服务:

1.用监听的端口号就可以访问(localhost:8000)
在这里插入图片描述
2.从页面可以看书这个数据源有两个接口(list和text)即端口号后面拼接接口就可以进行正常访问所需的数据了。

在这里插入图片描述

在正常业务请求中的使用:

查(get)

  1. get获取操作 查全部
    axios.get(“http://localhost:8000/list”).then(res=>{
    console.log(res.data)
    })
    在这里插入图片描述
  2. get获取操作 json文件的k值即是端口号
    /1 查找id为1的对象
    axios.get(“http://localhost:8000/list/1”).then(res=>{
    console.log(res.data)
    })
    在这里插入图片描述

增(post)

post添加操作 id自动生成
axios.post(“http://localhost:8000/list”,
{text:“ddd”}).then(res=>{
console.log(res.data)
})
在这里插入图片描述
json文件中也进行了自动同步添加
在这里插入图片描述

改(put)

put更新操作 id为2的修改为 XXX
axios.put(“http://localhost:8000/list/2”,{text:“修改后的数
据”}).then(res=>{
console.log(res.data)
})

在这里插入图片描述
json文件中也进行了自动同步修改
在这里插入图片描述

删(delete)

delete删除操作 删除id为2的对象
axios.delete(“http://localhost:8000/list/2”).then(res=>{
console.log(res.data)
})
在这里插入图片描述

json文件中也进行了自动同步删除在这里插入图片描述

发布了2 篇原创文章 · 获赞 0 · 访问量 58
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览