<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="./lib/template-web.js"></script>
<script src="./lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bigBox {
width: 800px;
margin: 100px auto;
}
.nav {
width: 100%;
height: 60px;
position: relative;
}
h2 {
position: absolute;
top: 10px;
left: 0;
}
.add {
position: absolute;
top: 10px;
right: 10px;
width: 80px;
height: 35px;
outline: none;
border: 1px solid grey;
border-radius: 5px;
cursor: pointer;
line-height: 15px;
}
td {
white-space: nowrap;
overflow: hidden;
text-align: center;
font-size: 16px;
line-height: 40px;
width: 200px;
height: 40px;
}
.th-color th {
width: 200px;
height: 40px;
color: white;
background-color: grey;
text-align: center;
line-height: 40px;
}
</style>
</head>
<!-- 表单html代码 -->
<form action="" class="bigBox">
<div class="nav">
<h2>图书管理</h2>
<button type="button" class="btn btn-primary add" data-bs-toggle="modal" data-bs-target=".myBox">+添加</button>
</div>
<table>
<thead>
<tr class="th-color">
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<!-- 弹窗html代码（结构直接从给出的模板样式上面cv） -->
<!-- 修改的html代码 -->
<div class="modal myBox" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<!-- 头部 -->
<div class="modal-header">
<h5 class="modal-title title">添加图书</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 内容 -->
<div class="modal-body">
<form action="" class="collect">
<div class="item">书名 <input class="form-control bookname form-bookname" type="text"
placeholder="请输入书籍名称" name="bookname" autocomplete="off">
</div>
<div class="item">作者 <input class="form-control author form-bookname" type="text"
placeholder="请输入作者名称" name="author" autocomplete="off">
</div>
<div class="item">出版社 <input class="form-control publisher form-bookname" type="text"
placeholder="请输入出版社名称" name="publisher" autocomplete="off">
</div>
</form>
</div>
<!-- 尾部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary save">保存</button>
</div>
</div>
</div>
</div>
<!-- 编辑图书弹窗 -->
<div class="modal editTable" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<!-- 头部 -->
<div class="modal-header">
<h5 class="modal-title title">编辑图书</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 内容 -->
<div class="modal-body">
<form action="" class="collect editCollect">
<input type="hidden" class="id" name="id" value="">
<div class="item ">
书名 <input class="form-control bookname form-bookname" type="text" placeholder="请输入书籍名称"
name="bookname" autocomplete="off" class="bookname">
</div>
<div class="item ">
作者 <input class="form-control author form-bookname" type="text" placeholder="请输入作者名称"
name="author" autocomplete="off" class="author">
</div>
<div class="item ">
出版社 <input class="form-control publisher form-bookname" type="text" placeholder="请输入出版社名称"
name="publisher" autocomplete="off" class="publisher">
</div>
</form>
</div>
<!-- 尾部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary newSave">修改</button>
</div>
</div>
</div>
</div>
<script>
// 封装函数：
const creator = '黄志民'
// 获取输入款元素
// const tbody = document.querySelectorAll('tbody tr')
function getBooksList() {
axios({
url: 'http://hmajax.itheima.net/api/books',
params: {
creator
}
}).then(result => {
const booksList = result.data.data
const htmlStr = booksList.map((item, index) => {
return `
<tr>
<td>${index + 1}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td data-id=${item.id}>
<span class="del">删除</span>
<span class="edit">编辑</span>
</td>
</tr> `
}).join('')
document.querySelector('tbody').innerHTML = htmlStr
})
}
getBooksList()
// 创建弹窗对象
const addModalDom = document.querySelector('.modal')
const addModal = new bootstrap.Modal(addModalDom)
// 绑定保存按钮点击事件
document.querySelector('.save').addEventListener('click', () => {
// 收集表单数据
const addForm = document.querySelector('.collect')
const bookObj = serialize(addForm, { hash: true, empty: true })
axios({
url: 'http://hmajax.itheima.net/api/books',
method: 'post',
data: {
...bookObj,
creator
}
}).then(result => {
getBooksList()
// 提交以后重置表单
addForm.reset()
// 隐藏
addModal.hide()
})
})
// 删除模块
document.querySelector('tbody').addEventListener('click', e => {
if (e.target.classList.contains('del')) {
const theId = e.target.parentNode.dataset.id
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
