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

celineWong7

发布于 2020-11-05 18:55:27

1.7K0

发布于 2020-11-05 18:55:27

文章被收录于专栏：web前端踩坑

在上一篇上手玩一下 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方法的补充，只更新前端提供的字段。若前端没有提供完整的资源对象，缺失的字段将不会被更新。