利用json-server搭建一个提供数据访问接口的Restful API服务器jsonCyrilKI的博客-

Josn-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文件，效果如下所示：

第六，建立网页文件，布局文件以及js文件，这里只放出js文件。
增加，删除，修改的js文件：

function isEmpty(string) { if(string == null || string == undefined || string == "") { return true; }else { return false; } } //获取json信息并显示在表格上 function getinfo(string) {     $.ajax({         url: "https://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: "https://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: "https://localhost:3004/info/"+id,         dataType: "json",         success: function(e) {             $.ajax({                 type: "DELETE",                 url: "https://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: "https://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: "https://localhost:3004/info/"+id,             data: updatedata,             success: function(data) { alert("修改成功!!"); },             error: function(err) { alert(err); } }) } } 

增加数据界面如下所示：

输入想要添加的信息即可实现增加数据，后面三个界面不再一一列举。