在上一篇上手玩一下 json-server（一）了解篇中棒卷，我們主要了解了json-server的花式 GET 方法顾孽。除了獲取數(shù)據(jù)，我們當(dāng)然還希望能向操作sql一樣能更改數(shù)據(jù)比规、刪除數(shù)據(jù)了岩齿。
所以這一篇，我們采用大部分人熟悉的 ajax 方法苞俘，來操作下響應(yīng)的數(shù)據(jù)。
0 準(zhǔn)備
在上一篇中龄章，我們有db.json文件吃谣，里面放置了一些水果信息。
現(xiàn)在新建一個demo文件夾做裙，引入jq庫文件（常見的是jquery-2.0.3.min.js岗憋，此處的jq.js是被我重命名了）。
另锚贱，新建一個jq-ajax.html文件仔戈，我們將在這個html文件里頭操作db.json數(shù)據(jù)。
最后拧廊，別忘了啟動json-server：
# 若有按照上一篇設(shè)置package.json文件监徘，則
npm run mock
# 若是常規(guī)啟動，則
json-server --watch db.json
1 GET
首先吧碾，還是得看下get方法凰盔。
案例：獲取db.json中的所有水果信息，以表格的方式展現(xiàn)出來倦春。
<!DOCTYPE html>
<html>
<head>
<title>使用jq ajax方法操作數(shù)據(jù)</title>
<script type="text/javascript" src="jq.js"></script>
</head>
<body>
<button id="getBtn">get</button>
<div id="showData"></div>
<script type="text/javascript">
$("#getBtn").click(function(){
$.ajax({
type: 'get',
url: 'http://localhost:3003/fruits',
success: function(data){
// data 對象數(shù)組
var h = ""
h += "<table border='1'>"
h += "<thead><th>ID</th><th>name</th><th>price</th></thead>"
h += "<tbody>"
for(var i=0; i<data.length; i++){
var o = data[i]
h += "<tr>"
h += "<td>" + o.id + "</td><td>" + o.name + "</td><td>" + o.price + "</td>"
h += "</tr>"
}
h += "<tbody>"
h += "</table>"
$("#showData").empty().append(h)
},
error:function(){
alert("get : error")
}
})
})
</script>
</body>
</html>
2 POST
POST 方法户敬，常用來創(chuàng)建一個新資源。
案例：在頁面的輸入框中輸入新的水果名稱和價格睁本，通過post添加到db.json中尿庐。
# html 標(biāo)簽
水果：<input id="fruitName" type="text" name="fruitName"><br>
價格：<input id="fruitPrice" type="text" name="fruitPrice"><br>
<button id="postBtn">add</button>
# js代碼
$("#postBtn").click(function(){
$.ajax({
type: 'post',
url: 'http://localhost:3003/fruits',
data: {
name: $("#fruitName").val(),
price: $("#fruitPrice").val()
},
success: function(data){
console.log("post success")
},
error:function(){
alert("post error")
}
})
})
在之前的 jq-ajax.html 中補(bǔ)充如上的代碼，輸入 watermelon 6.88 水果后 add 添加新水果呢堰。再次點擊get按鈕重新獲取db.json數(shù)據(jù)抄瑟，就可以看到新添加進(jìn)去的數(shù)據(jù)。此時打開db.json文件枉疼，也可以看到這條新添加的記錄锐借。
- 注意：此時如果再次點擊
add按鈕问麸，重復(fù)添加watermelon6.88數(shù)據(jù)，會發(fā)現(xiàn)在get中存在多條id不一樣但name&price相同的重復(fù)數(shù)據(jù)（這就是常說的POST方法非冪等钞翔，即操作多次严卖，與操作一次的結(jié)果不同）。
3 PUT方法
PUT 方法布轿，常用來更新已有資源哮笆，若資源不存在，它也會進(jìn)行創(chuàng)建汰扭。
案例：輸入水果對應(yīng)id稠肘，修改其價格。
# html 標(biāo)簽
<p>更新水果價格</p>
水果id：<input id="putId" type="text" name="fruitId"><br>
價格：<input id="putPrice" type="text" name="fruitPrice"><br>
<button id="putBtn">put</button>
# js 代碼
$("#putBtn").click(function(){
$.ajax({
type: 'put',
url: 'http://localhost:3003/fruits/'+ $("#putId").val(),
data: {
price: $("#putPrice").val()
},
success: function(data){
console.log("put success")
},
error:function(){
alert("put error")
}
})
})
在案例中项阴，我們輸入id 為 1 ，更改價格為100笆包，本意是要更新 apple 的價格為100环揽，但PUT方法執(zhí)行后，get到的數(shù)據(jù)name 字段 的 apple 變成 undefined 了庵佣。
這是因為歉胶，PUT方法會更新整個資源對象，前端沒有給出的字段巴粪，會自動清空通今。所以，要么我們在ajax的data中給出完整的對象信息肛根，要么采用PATCH方法辫塌。
4 PATCH
PATCH是一個新方法，可以當(dāng)作是PUT方法的補(bǔ)充派哲，主要用來做局部更新璃氢。
案例：同PUT方法。
# html 標(biāo)簽
<p>更新水果價格</p>
水果id：<input id="patchId" type="text" name="patchId"><br>
價格：<input id="patchPrice" type="text" name="patchPrice"><br>
<button id="patchBtn">put</button>
# js 代碼
$("#patchBtn").click(function(){
$.ajax({
type: 'put',
url: 'http://localhost:3003/fruits/'+ $("#putId").val(),
data: {
price: $("#putPrice").val()
},
success: function(data){
console.log("put success")
},
error:function(){
alert("put error")
}
})
})
此處狮辽，我們輸入id 為 2 一也，更改價格為200，即要更新 orange 的價格為200喉脖，執(zhí)行PATCH方法后椰苟，get到的數(shù)據(jù)name 字段 的 orange 的價格確實變化了，而且不會像PUT方法树叽，導(dǎo)致 name 變成 undefined 舆蝴。
但有時候，我們更希望能通過輸入水果名稱，來動態(tài)更新水果價格洁仗。但 'http://localhost:3003/fruits/orange' 這種 url 是錯誤的层皱，而像 'http://localhost:3003/fruits?name = orange' 這種url，只能供 GET 方法來獲取數(shù)據(jù)赠潦。既然如此叫胖，我們就多繞個彎，通過GET方法來獲知id她奥，然后再通過id去PATCH數(shù)據(jù)瓮增。
實現(xiàn)方法如下：
# html 標(biāo)簽
<p>通過水果名更新水果價格</p>
水果：<input id="editName" type="text" name="fruitName"><br>
價格：<input id="editPrice" type="text" name="fruitPrice"><br>
<button id="editBtn">edit</button>
# js 代碼
$("#editBtn").click(function(){
getFun($("#editName").val(),patchFun)
})
function getFun(name,f){
$.ajax({
type: 'get',
url: 'http://localhost:3003/fruits'+'?name='+name,
success: function(data){
// data 對象數(shù)組
console.log(data[0]);
if (typeof f == "function") f.call(this,data[0].id)
},
error:function(){
alert("error")
}
})
}
function patchFun(id){
$.ajax({
type: 'patch',
url: 'http://localhost:3003/fruits/'+id,
data: {
price: $("#editPrice").val()
},
success: function(data){
console.log("success",data)
},
error:function(){
alert("error")
}
})
}
5 DELETE
PATCH是一個新方法，可以當(dāng)作是PUT方法的補(bǔ)充哩俭，主要用來做局部更新绷跑。
案例：同PUT方法。
# html 標(biāo)簽
<p>刪除水果</p>
水果id：<input id="delId" type="text" name="delName"><br>
<button id="delOne">del</button>
<button id="delAll">delAll</button>
# js 代碼
$("#delOne").click(function(){
$.ajax({
type: 'delete',
url: 'http://localhost:3003/fruits/'+ $("#delId").val(),
success: function(data){
console.log("del success")
},
error:function(){
alert("del error")
}
})
})
若想用刪除全部凡资，沒辦法使用'http://localhost:3003/fruits' 這種請求url砸捏。因為必須指定刪除的對象id。所以只能通過循環(huán)刪除隙赁。這就需要實現(xiàn)通過GET方法來獲取當(dāng)前最大id（注意是最大id垦藏，而不是數(shù)據(jù)個數(shù)）來作為循環(huán)的邊界。
# js 代碼
$("#delAll").click(function(){
// 此處就沒有動態(tài)去獲取db.json中fruits的最大id鸳谜，直接帶入7
for(var i=0; i<=7; i++){
delFun(i)
}
})
function delFun(id){
$.ajax({
type: 'delete',
url: 'http://localhost:3003/fruits/'+id,
data:'',
success: function(data){
console.log("del success",data)
},
error:function(){
console.log("del error")
}
})
}
- 注意：循環(huán)刪除的操作方式會有個弊端，缺失的id數(shù)據(jù)式廷，會報錯咐扭。但不影響整體的刪除操作。
6 小結(jié)
以上差不多就是json-server 的幾種數(shù)據(jù)操作方式了滑废。本次的案例是通過jq的ajax方式來演示蝗肪，當(dāng)然還可以用axios等。使用方法類似：
axios.get('http://localhost:3003/fruits')
.then(function(response){
console.log(response.data)
})
.catch(function(){
console.log("axios: error")
})
* 小談 POST/PUT/PATCH 之間的區(qū)別
因為平時的HTTP服務(wù)請求蠕趁，經(jīng)常是POST/GET交替使用薛闪，沒有過多去了解其他方法，所以此處先從語義上了解下 POST/PUT/PATCH 的聯(lián)系與區(qū)別俺陋。
如果有空豁延，可以先了解下什么是RESTful（詳見阮大大的 RESTful API 設(shè)計指南 和 一篇快總結(jié)的 三分鐘徹底了解Restful最佳實踐）。
| HTTP方法 | 是否冪等 | 說明 | 詳細(xì)描述 |
|---|---|---|---|
| POST | 否 | 創(chuàng)建資源 Create | POST api/users腊状，會在users想創(chuàng)建一個user诱咏；多次執(zhí)行，會導(dǎo)致多條相同用戶被創(chuàng)建缴挖。 |
| PUT | 是 | 替換資源 Replace | PUT /items/1袋狞，若存在 /items/1 就替換，不存在就新增。注意PUT方法會更新整個資源對象苟鸯，若前端沒有提供完整的資源對象同蜻，缺失的字段將會被清空。 |
| PATCH | 是 | 局部更新 | 新引入方法早处。對PUT方法的補(bǔ)充湾蔓，只更新前端提供的字段。若前端沒有提供完整的資源對象陕赃，缺失的字段將不會被更新卵蛉。 |
- 冪等（idempotent）：是一個數(shù)學(xué)和計算機(jī)學(xué)概念，在計算機(jī)范疇內(nèi)表示一個操作執(zhí)行任意次對系統(tǒng)的影響跟一次是相同么库。比如GET/DELETE很好理解傻丝，不管操作多少次，得到的結(jié)果都是一樣的诉儒，所以它倆是冪等的葡缰。
參考文檔：
HTTP Verbs: 談 POST, PUT 和 PATCH 的應(yīng)用
PUT 還是 POST ?
區(qū)分PATCH與PUT、POST方法
http post put patch 總結(jié)
