1. Restul API概述? ? ??
?Restful API是一種網(wǎng)絡(luò)應(yīng)用程序的設(shè)計(jì)風(fēng)格和開(kāi)發(fā)方式贯城，基于HTTP，可以使用XML格式定義或JSON格式定義粟焊，它使用URL定位資源冤狡，用HTTP動(dòng)詞（GET,POST,DELETE,DETC）描述操作。
2. Restful 特點(diǎn)
Restful
API特點(diǎn)
(1).用URL描述資源项棠。
(2).使用HTTP方法描述行為，使用HTTP狀態(tài)碼表示不同的結(jié)果挎峦。
(3).使用json交互數(shù)據(jù)香追。
?? 說(shuō)明1：Restful只是一種風(fēng)格，并不是強(qiáng)制的標(biāo)準(zhǔn)
?? 說(shuō)明2: PUT: 用于替換資源(完整資源)坦胶，PATCH:用于更新部分資源（部分屬性）
3.安裝jsonserver? 服務(wù)器
????????? cnpm install -g json-server
4.新建db.json 啟動(dòng)服務(wù)器
(1).新建db.json
?? {
???? “users”:[]
? }
(2).? 啟動(dòng)json-server
json-server
--watch db.json
然后開(kāi)啟另一個(gè)終端: npm start啟動(dòng)應(yīng)用
5.?使用json-server實(shí)現(xiàn)添刪改查
（1）.添加記錄–POST? ?---postman中實(shí)現(xiàn)
（1）.添加記錄–POST--- create-react-app中實(shí)現(xiàn)
import axios from 'axios'
const insertJson=()=>{
? ? axios.post("http://localhost:3000/users",{
? ? ? ? name:"jarry"
? ? ? })
}
const
App = () => {
return (
? <>
? <button onClick={insertJson}>插入數(shù)據(jù)</button>
? </>
?);
}
export default App;
（2）查詢(xún)記錄–GET---postman中實(shí)現(xiàn)
（2）查詢(xún)記錄–GET-create-react-app中實(shí)現(xiàn)
import axios from 'axios'
const getJson=()=>{
? ? axios.get("http://localhost:3000/users",{
? ? ? ? params:{
? ? ? ? ? name:"jarry"
? ? ? ? }
? ? ? }) .then(res=>{
? ? ? console.log("res",res);
? ? })
}
const App = () => {
return (
? <>
? ? <button onClick={getJson}>獲取數(shù)據(jù)</button>
? </>
?);
}
export default App;
（3）修改記錄–PATCH???? postman中實(shí)現(xiàn)
（3）修改記錄–PATCH???? postman中實(shí)現(xiàn)-create-react-app中實(shí)現(xiàn)
import axios from 'axios'
const
getJson=()=>{
? ? axios.patch("http://localhost:3000/users/2",{
? ? ? ? ? name:"趙剛"
? ? ? })
? ? .then(res=>{
? ? ? console.log("res",res);
? ? })
}
const
App = () => {
return (
? <>
? ? <button onClick={getJson}>PATCH
修改數(shù)據(jù)
id:2</button>
? </>
?);
}
export default App;
（4）DELETE記錄–DELETE???? postman中實(shí)現(xiàn)
（4）DELETE記錄–DELETE-create-react-app中實(shí)現(xiàn)
import axios from 'axios'
const getJson=()=>{
? ? axios.delete("http://localhost:3000/users/3")
? ? .then(res=>{
? ? ? console.log("res",res);
? ? })
}
const App = () => {
return (
? <>
? ? <button onClick={getJson}>DELETE數(shù)據(jù) id:3</button>
? </>
?);
}
export default App;
