目的:在咱们实际的开发工作中,一个项目的完成需要从后端接口获取数据,但是在开发阶段如果
没有后端则是没有办法调用接口,很多前端开发人员又不会使用例如:mock.js, node.js等工具来
完成接口的开发,所以引入JSON-server,从而实现REST API
使用json-server可以实现数据的增加,删除,修改,查询以及关联数据的查询
全局安装json-server
npm install -g json-server
创建测试的test.json文件
{
"posts": [
{ "id": 1, "title": "1111111", "author": "xiaojian" }
],
"comments": [
{ "id": 1, "body": "11111-some comment", "postId": 1 }
]
}
启动服务并指定端口号
json-server --watch .\test.json --port 8000
注意:test.json文件中一级的key会被当做接口,服务器启动成功会如下图:
JSON-server如何获取数据:
说明:在使用json-server的时候,json-server自己做了跨域的处理,所以我们在取数据的时候不需
要解决跨域的处理
如何发送请求
import React from 'react'
import { Button } from 'antd';
import axios from 'axios';
export default function Home() {
const getData = () => {
// 取数据
axios.get('http://localhost:8000/posts').then(res => {
console.log(res.data);
})
}
return (
<div>
<Button type='primary' onClick={getData}>Primary</Button>
</div>
)
}
取得数据的截图:
如何查询数据
可以直接在指定的端口号后面直接拼接数据即可
如:http://localhost:8000/posts?id=2就可获取post接口下id为2的数据
如何增加数据:
在增加数据的时候不用添加id,因为json-server在添加数据的时候id是自增长的,代码示例如下:
import React from 'react'
import { Button } from 'antd';
import axios from 'axios';
export default function Home() {
const getData = () => {
// 增加数据
axios.post('http://localhost:8000/posts', {
title:'33333',
author:'小明'
})
}
return (
<div>
<Button type='primary' onClick={getData}>Primary</Button>
</div>
)
}
修改数据:put(替换修改)
会替换原来的数据,如果修改的数据有部分数据没变需要把没变的部分也写入,麻烦
import React from 'react'
import { Button } from 'antd';
import axios from 'axios';
export default function Home() {
const getData = () => {
// 修改数据 put
axios.put('http://localhost:8000/posts/1', {
title:'111-修改',
author:'哈哈哈哈'
})
}
return (
<div>
<Button type='primary' onClick={getData}>Primary</Button>
</div>
)
}
修改数据:patch(局部修改)
说明:在修改数据的时候只会变动要修改的部分,不变的部分保持不变
import React from 'react'
import { Button } from 'antd';
import axios from 'axios';
export default function Home() {
const getData = () => {
// 修改数据
axios.patch('http://localhost:8000/posts/1', {
title:'111-修改-11111'
})
}
return (
<div>
<Button type='primary' onClick={getData}>Primary</Button>
</div>
)
}
删除数据:delete
说明:在进行数据删除的时候会删除对应的关联数据
import React from 'react'
import { Button } from 'antd';
import axios from 'axios';
export default function Home() {
const getData = () => {
// 删除数据
axios.delete('http://localhost:8000/posts/1')
}
return (
<div>
<Button type='primary' onClick={getData}>Primary</Button>
</div>
)
}
向下查询关联数据:_embed
import React from 'react'
import { Button } from 'antd';
import axios from 'axios';
export default function Home() {
const getData = () => {
// _embed 拿回关联数据,向下寻找关联
axios.get('http://localhost:8000/posts/?_embed=comments').then(res=> {
console.log(res.data);
})
}
return (
<div>
<Button type='primary' onClick={getData}>Primary</Button>
</div>
)
}
向上查询关联数据:_expand
import React from 'react'
import { Button } from 'antd';
import axios from 'axios';
export default function Home() {
const getData = () => {
// _expand 向上寻找关联数据
axios.get('http://localhost:8000/comments?_expand=post').then(res => {
console.log(res.data);
})
}
return (
<div>
<Button type='primary' onClick={getData}>Primary</Button>
</div>
)
}