在软件开发中，增、删、改、查这几个业务非常常见
增
基于axios从服务器拿到需要数据，进行渲染、封装，新增数据并不是一条一条渲染，而是整体重新渲染；
对于该系统新增数据：收集表单数据、提交服务器保存 ->重新获取列表
删
对于删除数据，事件委托，请求服务器删除数据，重新渲染界面
获取id ->调用删除接口->重新渲染
改
调用删除接口，需要id信息，但不能更改（最好隐藏）；收集修改信息，提交给接口
<!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 rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
<link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?au9n7q');
src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?au9n7q') format('truetype'),
url('fonts/icomoon.woff?au9n7q') format('woff'),
url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
thead {
background-color: rgba(119, 119, 119, 0.746);
color: #fff;
}
.box {
width: 900px;
margin: 50px auto;
position: relative;
}
.btn1 {
width: 50px;
height: 20px;
background-color: #2d4acd;
color: #fff;
position: absolute;
right: 0px;
padding: 0;
font-size: 10px;
line-height: 8px;
top: 9px;
}
.del {
color: red;
}
.edit {
color: rgb(11, 196, 196);
}
.del,
.edit {
cursor: pointer;
}
.form-control {
width: 80%;
}
.box1 {
margin: 12px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="modal fade myModal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">添加图书</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="modal-body">
<div class="box1">
<label class="form-label" style="font-weight: bold;">书名</label>
<input type="text" name="bookname" class="form-control">
</div>
<div class="box1">
<label class="form-label" style="font-weight: bold;">作者</label>
<input type="text" name="author" class="form-control">
</div>
<div class="box1">
<label class="form-label" style="font-weight: bold;">出版社</label>
<input type="text" name="publisher" class="form-control">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn_save btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="box">
<button type="button" class="btn1 btn-primary" data-toggle="modal" data-target="#exampleModal">
+添加
</button>
<h2 class="sub-header">图书管理</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th style="width: 180px;">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade myModal2" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">编辑图书</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="save_modal-body">
<input type="hidden" name="id" class="form-control">
<div class="box1">
<label class="form-label" style="font-weight: bold;">书名</label>
<input type="text" name="bookname" class="form-control bookname" value="">
</div>
<div class="box1">
<label class="form-label" style="font-weight: bold;">作者</label>
<input type="text" name="author" class="form-control author" value="">
</div>
<div class="box1">
<label class="form-label" style="font-weight: bold;">出版社</label>
<input type="text" name="publisher" class="form-control publisher" value="">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn edit_btn_save btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="../form-serialize.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="../bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<script>
const save = document.querySelector('.btn_save')
const myModal = document.querySelector('.myModal')
const modal = new bootstrap.Modal(myModal)
const add = document.querySelector('.btn1')
const tbody = document.querySelector('tbody')
const form = document.querySelector('.modal-body')
const creator = 'wwx'
const save_form = document.querySelector('.save_modal-body')
const myModal2 = document.querySelector('.myModal2')
const modal2 = new bootstrap.Modal(myModal2)
const edit_save = document.querySelector('.edit_btn_save')
function render() {
axios({
url: 'http://hmajax.itheima.net/api/books',
params: {
creator
}
}).then(result => {
console.log(result)
const booklist = result.data.data.map((item, index) => {
return `
<tr>
<td class="b_id">${index + 1}</td>
<td class="b_name">${item.bookname}</td>
<td class="writer">${item.author}</td>
<td class="press">${item.publisher}</td>
<td data-id="${result.data.data[index].id}">
<span class="del">删除</span>
<span class="edit">编辑</span>
</td>
</tr>
`
}).join('')
tbody.innerHTML = booklist
})
}
render()
//添加图书
add.addEventListener('click', function () {
modal.show()
})
tbody.addEventListener('click', function (e) {
if (e.target.classList.contains('del')) {
const id = e.target.parentNode.dataset.id
axios({
url: `http://hmajax.itheima.net/api/books/${id}`,
method: 'delete'
}).then(result => {
render()
})
}
})
save.addEventListener('click', function () {
const bookobj = serialize(form, { hash: true, empty: true })
axios({
url: 'http://hmajax.itheima.net/api/books',
method: 'post',
data: {
...bookobj,
creator
}
}).then(result => {
render()
form.reset()
modal.hide()
})
})
//编辑图书
tbody.addEventListener('click', function (e) {
if (e.target.classList.contains('edit')) {
const id = e.target.parentNode.dataset.id
document.querySelector('[name=id]').value = id
axios({
url: `http://hmajax.itheima.net/api/books/${id}`
}).then(result => {
const bookobj = result.data.data
document.querySelector('.save_modal-body .bookname').value = bookobj.bookname
document.querySelector('.save_modal-body .author').value = bookobj.author
document.querySelector('.save_modal-body .publisher').value = bookobj.publisher
})
modal2.show()
}
})
edit_save.addEventListener('click', function (e) {
const bookobj = serialize(save_form, { hash: true, empty: true })
const { id } = bookobj
console.log(bookobj)
axios({
url: `http://hmajax.itheima.net/api/books/${id}`,
method: 'put',
data: {
...bookobj,
creator
}
}).then(result => {
render()
modal2.hide()
})
})
</script>
</body>
</html>效果：
