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>Document</title>
<!-- 引入 lib 目录下的 bootstrap 样式表 -->
<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
<style>
:root {
font-size: 15px;
}
body {
padding-top: 15px;
}
</style>
</head>
<body>
<!-- 栅格系统 -->
<div class="container-fluid">
<!-- 栅格系统中的一行 -->
<div class="row">
<!-- 左侧的表格，占了 8 列 -->
<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>
</td>
</tr> -->
</tbody>
</table>
</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>
<!-- 添加按钮 -->
<!-- submit有默认的提交行为，后期我们需要在axios操作时候阻止默认行为 -->
<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>
<script src="./lib/axios.js"></script>
<script src="./lib/jquery.js"></script>
<script src="./lib/bootstrap-4.6.1-dist/js/bootstrap.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
js
$(function() {
// 获取元素
let tbody = document.querySelector('tbody')
let btnadd = document.querySelector('.btnadd')
let editbookname = document.querySelector('#bookname')
let editauthor = document.querySelector('#author')
let editpublisher = document.querySelector('#publisher')
let btnConfirm = document.querySelector('.btnConfirm')
// 书名
let bookname = document.querySelector('[name="bookname"]')
// 作者
let author = document.querySelector('[name="author"]')
// 出版商
let publisher = document.querySelector('[name="publisher"]')
// 1.页面加载实现数据的动态渲染
// 套路：axios请求，接收响应数据，遍历拼接生成动态结构
// 获取所有图书的接口信息：
// url: http://www.itcbc.com:3006/api/getbooks
// 请求方式： GET
function init() {
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'get'
}).then(result => {
let htmlStr = ''
result.data.data.forEach(function(value, index) {
htmlStr += `<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 = htmlStr
})
}
init()
// 实现图书的新增
// url: http://www.itcbc.com:3006/api/addbook
// 请求方式： post
// 新增的固定套路
// 1.准备好后台接口所需要的数据:一定要参照接口要求生成数据，特别是数据的键
// 2.axios请求，传递参数
// 3.接收响应数据，进行用户提示，重新渲染
btnadd.addEventListener('click', function(e) {
e.preventDefault()
// 点击按钮之后再获取表单元素的数据
let data = {
bookname: bookname.value,
author: author.value,
publisher: publisher.value
}
axios({
url: 'http://www.itcbc.com:3006/api/addbook',
method: 'post',
// post,put,patch的 参数传递都是使用data选项
data
}).then(result => {
if (result.data.status == 0) {
alert(result.data.message)
bookname.value = author.value = publisher.value = ''
// 重新渲染列表结构
init()
} else {
alert('图书添加失败')
}
})
})
// 3.实现图书的删除
// url: http://www.itcbc.com:3006/api/delbook
// 请求方式： DELETE
// 参数：当前你想删除和的图书的id
// 删除的套路：准备好数据id,axios请求传递id,接收响应结果给出用户提示，重新渲染
// 动态生成的元素的事件绑定一定要使用事件委托
tbody.addEventListener('click', function(e) {
// contains:判断元素是否包含某个名称的类样式
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(result => {
if (result.data.status == 0) {
alert(result.data.message)
// 重新渲染列表结构
init()
} else {
alert('图书删除失败')
}
})
}
}
})
// 4.实现图书的修改
let id
// 4.1 弹出编辑模态框，填充默认数据
tbody.addEventListener('click', function(e) {
if (e.target.classList.contains('btnedit')) {
let data = e.target.dataset
// 将id存储到全局变量
id = data.id
// 展示模态框
$('#myModal').modal('show')
editbookname.value = data.bookname
editauthor.value = data.author
editpublisher.value = data.publisher
}
})
// 4.2 实现编辑功能：axios
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',
// post,put,patch的 参数传递都是使用data选项
data
}).then(result => {
if (result.data.status == 0) {
alert(result.data.message)
bookname.value = author.value = publisher.value = ''
$('#myModal').modal('hide')
// 重新渲染列表结构
init()
} else {
alert('图书编辑失败')
}
})
})
})
