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动态添加数据异常
原创文章 19
获赞 76
访问量 7189