jsonserver和axios的搭配使用

json-server

是 NodeJS 的一个包&＃xff0c;作用&＃xff1a;用来提供假数据

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

再替换为真正的真数据&＃xff08;服务器接口数据&＃xff09;即可

只要提供一个 json 数据&＃xff08;文件&＃xff09;给 json-server &＃xff0c;那么 json-server 就可以提供

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

使用步骤&＃xff1a;

1 全局安装&＃xff1a; npm i -g json-server

2 准备一个 json 文件

3 在 json 文件所在目录中&＃xff0c;运行命令&＃xff1a; json-server todos.json --watch

特点&＃xff1a;

1.json-server提供的接口是&＃xff1a;REST API(restful)

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

查询的方式&＃xff1a;get

查询所有&＃xff1a;

http://localhost:3000/todos

查询某一条数据&＃xff08;id为2的数据&＃xff09;

http://localhost:3000/todos/2

添加&＃xff1a;POST请求

接口地址&＃xff1a;http://localhost:3000/todos 在软件中&＃xff1a;row--->json 不需要写id&＃xff0c;直接写

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

{"name":"梳头","done":false }

修改数据&＃xff1a;PATCH /PUT 请求

修改id为2的数据

接口地址&＃xff1a;http&＃xff1a;//localhost&＃xff1a;3000/todos/2

特点&＃xff1a;使用put请求&＃xff0c;需要将所有的数据&＃xff0c;都发送给接口 patch 打补丁

删除数据&＃xff1a;DELETE请求

删除id为2 接口地址&＃xff1a;http://localhost:3000/todos/2

axios的使用

定义

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

注意点&＃xff1a;

axios与vue没有关系&＃xff0c;就是axios是一个独立的包

使用&＃xff1a; 1.安装 npm i axios 2.在页面中引入axios&＃xff0c;然后使用

发送查询GET请求

查询不传参

axios.get(&＃39;http://localhost:3000/todos&＃39;).then(res&＃61;>{console.log(&＃39;结果为&＃xff1a;&＃39;,res.data) })

传参查询

// 传参查询 axios.get(&＃39;http://localhost:3000/todos&＃39;,{params:{_page:1,_limit:2} }).then(res&＃61;>{console.log(&＃39;获取的结果为&＃39;,res.data)})

添加 POST请求

// 添加 POST axios .post(&＃39;http://localhost:3000/todos&＃39;,{name:&＃39;关门&＃39;,done:false }) .then(res&＃61;>{console.log(&＃39;添加成功&＃39;,res.data) });

修改patch/put

// 修改 patch / put axios .patch(&＃39;http://localhost:3000/todos/3&＃39;,{name:&＃39;养发&＃39; }) .then(res&＃61;>{console.log(&＃39;修改成功&＃39;,res.data) });axios.put(&＃39;http://localhost:3000/todos/3&＃39;,{name:&＃39;理发&＃39; }).then(res&＃61;>{console.log(&＃39;使用put修改成功&＃39;,res.data) });