** vscode、bootstrap.css、jquery.js以及插件Bootstrap 3 Snippets。**
首先是布局部分，就不多说了，直接上代码：
<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="bookname" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="author" placeholder="请输入作者">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="place" placeholder="请输入出版社">
</div>
<button id="addbtn" class="btn btn-primary">添加</button>
</div>
</div>
<!-- 添加图书的表格 -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td></td>
</tr>
</tbody>
</table>
需要实现的功能有：
1.获取并渲染图书列表的数据
2.实现删除图书的功能
3.实现添加图书的功能
功能一实现思路：首先采用$.get()请求接口数据，判断状态码是否是200，不是则获取失败，然后创一个空数组用来存表格中的每一行，循环获取过来的数组对象，得到添加的html内容，然后清空tbody中的内容并将html内容添加到tbody中。
功能二实现思路：首先获取想要删除的id，然后通过$.get()请求接口来删除数据，判断状态码是否是200，不是则删除失败，如果成功就重新刷新页面渲染最新的数据。
功能三实现思路：给添加按钮添加点击事件，获取书名、作者、出版社，然后判断用户输入的内容是否包含空，再采用$.post()请求接口提交数据，判断状态码是否为201，不是则提交失败，如果成功就重新刷新页面渲染最新数据，然后把文本框中输入的内容清空。
最终完整代码如下：
<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="bookname" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="author" placeholder="请输入作者">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="place" placeholder="请输入出版社">
</div>
<button id="addbtn" class="btn btn-primary">添加</button>
</div>
</div>
<!-- 添加图书的表格 -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td></td>
</tr>
</tbody>
</table>
<script>
$(function() {
// 获取并渲染图书列表
function getbooklist() {
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
// 判断状态码是否是200，不是200则获取失败
if (res.status != 200) {
return alert('获取数据失败！')
}
// 创一个数组用来存表格中的一行
var row = [];
// 循环对象数组
$.each(res.data, function(index, val) {
// console.log(val);
row.push('<tr><td>' + val.id + '</td> <td>' + val.bookname + '</td><td>' + val.author + '</td><td>' + val.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + val.id + '">删除</a></td></tr>')
})
// 首先清空tbody里面的内容
$('#tb').empty().append(row.join(''));
})
}
getbooklist();
// 删除某一行
// 通过代理的方式，为动态添加的元素绑定点击事件
$('#tb').on('click', '.del', function() {
// 获取要删除的id
var id = $(this).attr('data-id');
// 进行删除操作
$.get('http://www.liulongbin.top:3006/api/delbook', {
id: id
}, function(res) {
if (res.status != 200) {
return alert('删除失败');
}
// 如果成功就重新刷新页面
getbooklist();
})
})
// 添加图书
$('#addbtn').on('click', function() {
// 获取书名
var bookname = $('#bookname').val().trim();
// 获取作者
var author = $('#author').val().trim();
// 获取出版社
var place = $('#place').val().trim();
// 判断用户输入的内容是否为空
// 注意这里要考虑到只输入空格的情况
if (bookname.length <= 0 || author.length <= 0 || place.length <= 0) {
return alert('请输入完整的图书信息');
}
// 提交数据
$.post('http://www.liulongbin.top:3006/api/addbook', {
bookname: bookname,
author: author,
publisher: place
}, function(res) {
// 判断是否提交成功
if (res.status != 201) {
return alert('添加图书失败')
}
// 如果成功就重新刷新页面
getbooklist();
// 然后把文本框中的值设置为空
var bookname = $('#bookname').val('');
var author = $('#author').val('');
var place = $('#place').val('');
})
})
})
</script>