上手玩一下json-server（二）操作数据篇——POST/P

2018-05-03 本文已影响0人 celineWong7

在上一篇上手玩一下 json-server（一）了解篇中，我们主要了解了json-server的花式 GET 方法。除了获取数据，我们当然还希望能向操作sql一样能更改数据、删除数据了。
所以这一篇，我们采用大部分人熟悉的 ajax 方法，来操作下响应的数据。

0 准备

在上一篇中，我们有db.json文件，里面放置了一些水果信息。
现在新建一个demo文件夹，引入jq库文件（常见的是jquery-2.0.3.min.js，此处的jq.js是被我重命名了）。
另，新建一个jq-ajax.html文件，我们将在这个html文件里头操作db.json数据。

文件结构

最后，别忘了启动json-server：

# 若有按照上一篇设置package.json文件，则
npm run mock

# 若是常规启动，则
json-server --watch db.json

1 GET

首先，还是得看下get方法。
案例：获取db.json中的所有水果信息，以表格的方式展现出来。

<!DOCTYPE html>
<html>
<head>
    <title>使用jq ajax方法操作数据</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 对象数组
            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>

get方法运行结果

2 POST

POST 方法，常用来创建一个新资源。
案例：在页面的输入框中输入新的水果名称和价格，通过post添加到db.json中。

# html 标签
水果：<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")
        }
    })
})

post方法

在之前的 jq-ajax.html 中补充如上的代码，输入 watermelon 6.88 水果后 add 添加新水果。再次点击get按钮重新获取db.json数据，就可以看到新添加进去的数据。此时打开db.json文件，也可以看到这条新添加的记录。

注意：此时如果再次点击 add 按钮，重复添加watermelon 6.88 数据，会发现在get中存在多条 id 不一样但 name & price 相同的重复数据（这就是常说的POST方法非幂等，即操作多次，与操作一次的结果不同）。

3 PUT方法

PUT 方法，常用来更新已有资源，若资源不存在，它也会进行创建。
案例：输入水果对应id，修改其价格。

# html 标签
<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")
        }
    })
})

put方法会更新整个资源，未给出字段会清空

在案例中，我们输入id 为 1 ，更改价格为100，本意是要更新 apple 的价格为100，但PUT方法执行后，get到的数据name 字段的 apple 变成 undefined 了。
这是因为，PUT方法会更新整个资源对象，前端没有给出的字段，会自动清空。所以，要么我们在ajax的data中给出完整的对象信息，要么采用PATCH方法。

4 PATCH

PATCH是一个新方法，可以当作是PUT方法的补充，主要用来做局部更新。
案例：同PUT方法。

# html 标签
<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")
        }
    })
})

patch方法可以局部更新价格

此处，我们输入id 为 2 ，更改价格为200，即要更新 orange 的价格为200，执行PATCH方法后，get到的数据name 字段的 orange 的价格确实变化了，而且不会像PUT方法，导致 name 变成 undefined 。

但有时候，我们更希望能通过输入水果名称，来动态更新水果价格。但 'http://localhost:3003/fruits/orange' 这种 url 是错误的，而像 'http://localhost:3003/fruits?name = orange' 这种url，只能供 GET 方法来获取数据。既然如此，我们就多绕个弯，通过GET方法来获知id，然后再通过id去PATCH数据。
实现方法如下：

# html 标签
<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 对象数组
            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")
        }
    })
}

GET和PATCH方法结合

5 DELETE

PATCH是一个新方法，可以当作是PUT方法的补充，主要用来做局部更新。
案例：同PUT方法。

# html 标签
<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")
        }
    })
})

根据输入id删除一条记录

若想用删除全部，没办法使用'http://localhost:3003/fruits' 这种请求url。因为必须指定删除的对象id。所以只能通过循环删除。这就需要实现通过GET方法来获取当前最大id（注意是最大id，而不是数据个数）来作为循环的边界。

# js 代码
$("#delAll").click(function(){
    // 此处就没有动态去获取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")
        }
    })
}

delete All

注意：循环删除的操作方式会有个弊端，缺失的id数据，会报错。但不影响整体的删除操作。

6 小结

以上差不多就是json-server 的几种数据操作方式了。本次的案例是通过jq的ajax方式来演示，当然还可以用axios等。使用方法类似：

    axios.get('http://localhost:3003/fruits')
        .then(function(response){
            console.log(response.data)
        })
        .catch(function(){
            console.log("axios: error")
        })

* 小谈 POST/PUT/PATCH 之间的区别

因为平时的HTTP服务请求，经常是POST/GET交替使用，没有过多去了解其他方法，所以此处先从语义上了解下 POST/PUT/PATCH 的联系与区别。
如果有空，可以先了解下什么是RESTful（详见阮大大的 RESTful API 设计指南和一篇快总结的三分钟彻底了解Restful最佳实践）。

HTTP方法	是否幂等	说明	详细描述
POST	否	创建资源 Create	POST api/users，会在users想创建一个user；多次执行，会导致多条相同用户被创建。
PUT	是	替换资源 Replace	PUT /items/1，若存在 /items/1 就替换，不存在就新增。注意PUT方法会更新整个资源对象，若前端没有提供完整的资源对象，缺失的字段将会被清空。
PATCH	是	局部更新	新引入方法。对PUT方法的补充，只更新前端提供的字段。若前端没有提供完整的资源对象，缺失的字段将不会被更新。

幂等（idempotent）：是一个数学和计算机学概念，在计算机范畴内表示一个操作执行任意次对系统的影响跟一次是相同。比如GET/DELETE很好理解，不管操作多少次，得到的结果都是一样的，所以它俩是幂等的。

参考文档：
HTTP Verbs: 談 POST, PUT 和 PATCH 的應用
 PUT 还是 POST ?
区分PATCH与PUT、POST方法
 http post put patch 总结