结构部分
<body>
<!-- 栅格系统 -->
<div class="container-fluid">
<button class="btn-success loadBook">加载图书数据</button>
<!-- 栅格系统中的一行 -->
<div class="row">
<div class="col-sm-8">
<table class="table table-bordered table-striped table-dark table-hover text-center">
<thead>
<!-- 表头行 -->
<tr>
<th scope="col">Id</th>
<th scope="col">书名</th>
<th scope="col">作者</th>
<th scope="col">出版社</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<th scope="row">xxx</th>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>
<button type="button" class="btn btn-link btn-sm ">
删除
</button>
<button type="button" class="btn btn-link btn-sm ">
编辑
</button>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
<!-- 右侧的添加区域，占了 4 列 -->
<div class="col-sm-4">
<!-- 添加图书的卡片 -->
<div class="card text-white bg-secondary sticky-top">
<div class="card-header">添加新图书</div>
<form class="card-body bg-light" id="addForm">
<!-- 书名 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">书名</span>
</div>
<input type="text" class="form-control" placeholder="请输入图书名称" name="bookname">
</div>
<!-- 作者 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">作者</span>
</div>
<input type="text" class="form-control" placeholder="请输入作者名字" name="author">
</div>
<!-- 出版社 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">出版社</span>
</div>
<input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher">
</div>
<!-- 添加按钮 -->
<button class="btn btn-dark btnadd" type="submit">添加</button>
</form>
</div>
</div>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">编辑图书</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="bookname" class="col-sm-2 col-form-label">书名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="bookname" placeholder="请输入书名" />
</div>
</div>
<div class="form-group row">
<label for="author" class="col-sm-2 col-form-label">作者</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author" placeholder="请输入作者" />
</div>
</div>
<div class="form-group row">
<label for="publisher" class="col-sm-2 col-form-label">出版商</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="publisher" placeholder="请输入出版商" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary btnConfirm">确定</button>
</div>
</div>
</div>
</div>
js部分
<script>
let loadBook = document.querySelector('.loadBook')
let tbody = document.querySelector('tbody')
let btnadd = document.querySelector('.btnadd')
let bookname = document.querySelector('[name="bookname"]')
let author = document.querySelector('[name="author"]')
let publisher = document.querySelector('[name="publisher"]')
let btndel = document.querySelector('.btndel')
let btnedit = document.querySelector('.btnedit')
let editbookname = document.querySelector('#bookname')
let editauthor = document.querySelector('#author')
let editpublisher = document.querySelector('#publisher')
let btnConfirm = document.querySelector('.btnConfirm')
//1.加载图书
loadBook.addEventListener('click', function () {
init()
})
//2.添加图书
btnadd.addEventListener('click', function (e) {
e.preventDefault()
axios({
url: 'http://www.itcbc.com:3006/api/addbook',
method: 'post',
data: {
bookname: bookname.value,
author: author.value,
publisher: publisher.value
}
}).then(result => {
alert(result.data.message)
init()
})
})
//3.删除图书
tbody.addEventListener('click', function (e) {
if (e.target.classList.contains('btndel')) {
if (confirm('真的要删除吗')) {
let id = e.target.dataset.id
axios({
url: 'http://www.itcbc.com:3006/api/delbook',
method: 'delete',
params: {
id,
}
}).then(res => {
console.log(res);
if (res.data.status == 0) {
alert(res.data.message)
init()
} else {
alert('删除图书失败')
}
})
}
}
})
function init() {
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'get'
}).then((result) => {
console.log(result);
let list = result.data.data
let str = ''
list.forEach(function (value, index) {
str += `<tr>
<th scope="row">${index + 1}</th>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
<td>
<button type="button" class="btn btn-link btn-sm btndel" data-id='${value.id}'>
删除
</button>
<button type="button" class="btn btn-link btn-sm btnedit" data-bookname='${value.bookname}'data-author='${value.author}' data-publisher='${value.publisher}' data-id='${value.id}'>
编辑
</button>
</td>
</tr>`
})
tbody.innerHTML = str
})
}
//4.编辑图书
let id
tbody.addEventListener('click', function (e) {
if (e.target.classList.contains('btnedit')) {
let data = e.target.dataset
id = data.id
$('#myModal').modal('show')
editbookname.value = data.bookname
editauthor.value = data.author
editpublisher.value = data.publisher
}
})
btnConfirm.addEventListener('click', function () {
let data = {
id: id,
bookname: editbookname.value,
author: editauthor.value,
publisher: editpublisher.value
}
axios({
url: 'http://www.itcbc.com:3006/api/updatebook',
method: 'put',
data
}).then(res => {
// console.log(res);
if (res.data.status == 0) {
alert(res.data.message)
bookname.value = author.value = publisher.value = ''
$('#myModal').modal('hide')
init()
} else {
alert('编辑图书失败')
}
})
})
</script>
加载图书
添加图书
删除图书，删除西游记
编辑图书，编辑百里守约，将李狗蛋改成王者荣耀
