这玩意还挺好玩，以为接口是共享的，所以甚至有人在里面聊天（）（） 
演示
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书管理</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/sytle.css">
<script src="./js/jquery.min.js"></script>
</head>
<body>
<!-- 添加图书Panel -->
<!-- 使用bs3快捷指令 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<div class="panel-body form-inline">
<div class="input-group">
<div class="input-group-addon">书名</div>
<input type="text" class="form-control" id="iptBookName" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
</div>
<button type="button" class="btn btn-primary" id="add">添加</button>
<button type="button" class="btn btn-primary" id="delOneClick">一键删除</button>
<button type="button" class="btn btn-primary" id="radomFill">开始随机填充</button>
</div>
</div>
<!-- 图书表格 -->
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody id="bookList">
</tbody>
</table>
<script src="./js/index.js"></script>
</body>
</html>js部分
function getBookList() {
// ajax请求
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
//判断请求是否成功
if (res.status !== 200) return alert('获取图书失败！');
//渲染页面
$('#bookList').empty();
$.each(res.data, (index, data) => {
// console.log(data);
$('#bookList').append(`<tr>
<td>${data.id}</td>
<td>${data.bookname}</td>
<td>${data.author}</td>
<td>${data.publisher}</td>
<td style="text-align:center"><a href="javascript:;">删除</a></td>
<tr>`);
});
})
}
getBookList();
function addBooks(name1, aut, pub) {
$.post('http://www.liulongbin.top:3006/api/addbook', {
bookname: name1,
author: aut,
publisher: pub
}, function(res) {
console.log(res.msg);
if (res.status !== 201) {
alert(res.msg)
}
})
}
function delBooks(num) {
$.get('http://www.liulongbin.top:3006/api/delbook', {
id: num
}, function(res) {
console.log('第' + num + '个图书' + res.msg);
//删除失败的回调
if (res.status !== 200) {
// alert(res.msg)
}
})
}
function delBooksRange(num, num1) {
var d = setInterval(() => {
$.get('http://www.liulongbin.top:3006/api/delbook', {
id: num--
}, function(res) {
console.log('第' + num + '个图书' + res.msg);
})
if (num < num1) {
clearInterval(d);
}
}, 120);
}
//定时刷新（大嘘）
var dd = setInterval(function() {
getBookList()
}, 500);
//手动添加
$('#add').on('click', function() {
addBooks($('#iptBookName').val(), $('#iptAuthor').val(), $('#iptPublisher').val());
getBookList();
});
//事件委托绑定删除按钮
$("tbody").on('click', 'a', function() {
var id = parseInt($(this).parent().siblings('td').eq(0).html());
delBooks(id);
//即时更新
getBookList();
});
//一键删除
$('#delOneClick').on('click', function() {
$('a').click();
getBookList();
});
//随机填充
let fillstatus = false;
let interval;
let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
$('#radomFill').on('click', function() {
if (fillstatus === false) {
$(this).html('停止随机填充');
interval = setInterval(() => {
let msg = $('#iptPublisher').val();
let msg1 = $('#iptAuthor').val();
let rand = arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)];
addBooks(rand, msg1 ? msg1 : rand, msg ? msg : rand)
}, 300);
fillstatus = true;
} else {
$(this).html('开始随机填充');
fillstatus = false;
clearInterval(interval);
}
});