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动态添加数据异常