json-server和axios的搭配使用

json-server

​ 是 NodeJS 的一个包，作用：用来提供假数据

​ 在没有服务器接口的时候，通过这个工具提供一个假数据，当有了服务器接口

​ 再替换为真正的真数据（服务器接口数据）即可

​ 只要提供一个 json 数据（文件）给 json-server ，那么 json-server 就可以提供

​ 针对于这个 json数据的 CRUD 、 分页、 搜索 等功能

使用步骤：

​ 1 全局安装： npm i -g json-server

​ 2 准备一个 json 文件

​ 3 在 json 文件所在目录中，运行命令： json-server todos.json --watch

​ 特点：

​ 1.json-server提供的接口是：REST API(restful)

​ 2.提供的接口没有跨域问题

查询的方式：get

​ 查询所有：

​ http://localhost:3000/todos

​ 查询某一条数据（id为2的数据）

​ http://localhost:3000/todos/2

添加：POST请求

​ 接口地址：http://localhost:3000/todos 在软件中：row--->json 不需要写id，直接写

注意点： 在json中写数据格式必须给键名加上双引号

{
	"name":"梳头",
	"done":false
}
复制代码

修改数据：PATCH /PUT 请求

​ 修改id为2的数据

​ 接口地址：http：//localhost：3000/todos/2

特点：使用put请求，需要将所有的数据，都发送给接口 patch 打补丁

删除数据：DELETE请求

删除id为2 接口地址：http://localhost:3000/todos/2

axios的使用

定义

​ axios 是一个专门用来发送ajax请求的包，是一个http客户端，可以运行在浏览器和node中发送请求

​ 注意点：

​ axios与vue没有关系，就是axios是一个独立的包

使用： 1.安装 npm i axios 2.在页面中引入axios，然后使用

发送查询GET请求

查询 不传参

axios.get('http://localhost:3000/todos').then(res=>{
	console.log('结果为：',res.data)
})
复制代码

传参查询

// 传参查询
axios.get('http://localhost:3000/todos',{
  params:{
    _page:1,
    _limit:2
  }
}).then(res=>{
  console.log('获取的结果为',res.data)
  
})
复制代码

添加 POST请求

// 添加 POST
axios
.post('http://localhost:3000/todos',{
  name:'关门',
  done:false
})
.then(res=>{
  console.log('添加成功',res.data)
}); 
复制代码

修改patch/put

// 修改 patch / put
axios
.patch('http://localhost:3000/todos/3',{
  name:'养发'
})
.then(res=>{
  console.log('修改成功',res.data)
});

axios.put('http://localhost:3000/todos/3',{
  name:'理发'
}).then(res=>{
  console.log('使用put修改成功',res.data)
});
复制代码

删除delete

// 删除delete
axios.delete('http://localhost:3000/todos/3').then(res=>{
  console.log('删除任务成功',res.data)
});复制代码

转载于:https://juejin.im/post/5c21fcd06fb9a049a62c9c68