web作業：利用json-server搭建一個提供數據訪問接口的Restful API服務器

Json-Server 是一個 Node 模塊，運行 Express 服務器，你可以指定一個 json 文件作爲 api 的數據源。要想在電腦上運行Json-Server，需得先安裝node.js。
第一、安裝node.js
打開官網下載鏈接:官網鏈接
我這裏下載的是node-v6.9.2-x64.msi,如下圖：

下載完成後，雙擊“node-v6.9.2-x64.msi”，開始安裝Node.js，一路點擊next即可。

第二：安裝全局json-server
在cmd輸入npm install -g json-server即可。

第三：初始化項目：
先創建一個文件夾json-server，並將該文件夾加入到vscode工作區。終端輸入npm init初始化項目，初始化後會發現多了一個文件夾node_modules。

第四：新建一個json文件data.json:

{
  "info": [
    {
      "name": "嘿嘿嘿",
      "id": "120181080119",
      "age": "800",
      "gender": "男",
      "occupation": "學生"
    },
    {
      "name": "張三",
      "id": "544515115515",
      "age": "22",
      "gender": "男",
      "occupation": "學生"
    },
    {
      "name": "李四",
      "id": "120181478965",
      "age": "17",
      "gender": "男",
      "occupation": "學生"
    },
    {
      "name": "dfdc",
      "id": "120181080119",
      "age": "17",
      "gender": "男",
      "occupation": "學生"
    },
    {
      "name": "aaa",
      "id": "120181080111",
      "age": "17",
      "gender": "女",
      "occupation": "學生"
    },
    {
      "name": "ccc",
      "id": "120171072586",
      "age": "23",
      "gender": "女",
      "occupation": "學生"
    },
    {
      "name": "王三",
      "id": "157426333",
      "age": "44",
      "gender": "男",
      "occupation": "老師"
    },
    {
      "name": "無良",
      "id": "120165874521",
      "age": "21",
      "gender": "男",
      "occupation": "學生"
    },
    {
      "name": "馬後炮",
      "id": "589625417",
      "age": "56",
      "gender": "男",
      "occupation": "老師"
    },
    {
      "name": "韓韓",
      "id": "11478956",
      "age": "44",
      "gender": "男",
      "occupation": "教師"
    },
    {
      "name": "張風風",
      "id": "120171070475",
      "age": "19",
      "gender": "女",
      "occupation": "學生"
    },
    {
      "name": "kyrie",
      "id": "120181077777",
      "age": "17",
      "gender": "男",
      "occupation": "學生"
    },
    {
      "name": "mike",
      "id": "120181050147",
      "age": "18",
      "gender": "男",
      "occupation": "學生"
    },
    {
      "name": "lucy",
      "id": "120181010111",
      "age": "18",
      "gender": "女",
      "occupation": "學生"
    },
    {
      "name": "cddd",
      "id": "147856321",
      "age": "45",
      "gender": "女",
      "occupation": "老師"
    },
    {
      "name": "哈士奇",
      "id": "1201485962",
      "age": "22",
      "gender": "女",
      "occupation": "學生"
    },
    {
      "name": "Cyril_KI",
      "id": "1254698741",
      "age": "14",
      "gender": "男",
      "occupation": "學生"
    }
  ]
}

第五：終端輸入json-server --watch data.json --port 3004指定端口運行該json文件，效果如下所示：

第六，建立html文件以及js文件，這裏只給出部分js文件，完整代碼在文末鏈接裏。
增加，刪除，修改的js文件：

function isEmpty(string) {
    if(string == null || string == undefined || string == "") {
        return true;
    }else {
        return false;
    }
}

//獲取json信息並顯示在表格上
function getinfo(string) {
    $.ajax({
        url: "http://localhost:3004/info",
        type: "GET",
        dataType: "json",
        success: function (data) {
            var i;
            var html="";//用一個變量來存儲json中的數據
            for (i = 0; i < data.length; i++) { //用for循環遍歷數組將數據存入html變量中
                if(isEmpty(data[i].name||isEmpty(data[i].id))||isEmpty(data[i].age)||isEmpty(data[i].gender)||isEmpty(data[i].occupation)) {
                }else {
                    html += `<tr class="trs">
                        <td>${data[i].name}</td>
                        <td>${data[i].id}</td>
                        <td>${data[i].age}</td>
                        <td>${data[i].gender}</td>
                        <td>${data[i].occupation}</td>
                        </tr>`;
                } 
            }
            document.getElementById(string).innerHTML += html;
        },
        error: function () {
            alert("數據申請失敗");
        }
    })
}

function add() {
    var name=$("#name").val();
    var id=$("#num").val();
    var age=$("#age").val();
    var gender=$("input[name='rd']:checked").val();
    var occu=$("#occupation").find("option:selected").text();
    var re=/^[1-9]+[0-9]*]*$/;   //正則表達式判斷輸入的是否爲正整數
    if(isEmpty(name) || isEmpty(id) || isEmpty(age) || isEmpty(gender) || isEmpty(occu)) {
        alert("請填寫完整信息!");
    }else if(!re.test(id)) {
        alert("學號一欄請輸入正整數！");
    }else if(!re.test(age)) {
        alert("年齡一欄請輸入正整數！");
    }else {
        var newData = {    //要添加的數據
            "name": name,
            "id": id,
            "age": age,
            "gender": gender,
            "occupation": occu
        };
        $.ajax({   //發送到json
            url: "http://localhost:3004/info",
            type: "POST",
            dataType: "json",
            data: newData,
            success: function(data) {
                alert("數據添加成功!");
            },
            error: function () {
                alert("數據添加失敗");
            }
        })
        //發送之後在網頁上顯示出來
        getinfo("box1");
    }
    
}



function Delete() {
    var id=$("#content").val();   //要刪除信息的學號
    $.ajax({
        type: "GET",
        url: "http://localhost:3004/info/"+id,
        dataType: "json",
        success: function(e) {
            $.ajax({
                type: "DELETE",
                url: "http://localhost:3004/info/"+id,
                dataType: "json",
                success:function(data) {
                    alert("刪除成功！");
                    getinfo("box2");  //刪除成功後重新請求json數據並顯示在表格上
                },
                error: function(data) {
                    alert("刪除異常");
                }
            })
        },
        error: function(e) {
            alert("該數據不存在，無法刪除");
        }
    })
}


function upquery() {
    var id=$("#numup").val();
    if(isEmpty(id)) {
        alert("請先輸入要修改數據的學號!!");
    }else {
        $.ajax({
            type: "GET",
            url: "http://localhost:3004/info/"+id,
            dataType: "json",
            success: function(data) {    //該信息存在就先顯示出來方便修改
                $("#nameup").val(data.name);
                $("#numup").val(data.id);
                $("#ageup").val(data.age);
                if(data.gender=="男") {
                    $("#1").prop("checked",'checked');
                }else {
                    $("#2").prop("checked",'chaecked');
                }
                $("#occupationup").val(data.occupation);
            },
            error:function(err) {
                alert("該用戶不存在，不能修改，請重新輸入學號!!");
            }
        })
    }
}


function update() {     //用戶修改完成後開始更新
    var name=$("#nameup").val();
    var id=$("#numup").val();
    var age=$("#ageup").val();
    var gender=$("input[name='rdup']:checked").val();
    var occu=$("#occupationup").val();
    var re=/^[1-9]+[0-9]*]*$/;   //正則表達式判斷輸入的是否爲正整數
    if(isEmpty(name) || isEmpty(id) || isEmpty(age) || isEmpty(gender) || isEmpty(occu)) {
        alert("請填寫完整信息!");
    }else if(!re.test(id)) {
        alert("學號一欄請輸入正整數！");
    }else if(!re.test(age)) {
        alert("年齡一欄請輸入正整數！");
    }else {
        var updatedata = {    //要添加的數據
            "name": name,
            "id": id,
            "age": age,
            "gender": gender,
            "occupation": occu
        };
        $.ajax({
            type: "PUT",
            url: "http://localhost:3004/info/"+id,
            data: updatedata,
            success: function(data) {
                alert("修改成功!!");
            },
            error: function(err) {
                alert(err);
            }
        })
    }
}

增加數據界面如下所示：

輸入想要添加的信息即可實現增加數據，後面三個界面不再一一列舉。

注意：往table中添加json信息時，我們往往需要一個變量來存儲往table中添加的tr以及td標籤，此時這個變量一定要初始化爲var html=""而不能是var html;使用後者時會在table第一行出現undefined。

具體見：
table動態添加數據異常
附上完整代碼：
完整代碼