Trouble which big boss help answer the question, homework urgent online, etc.
What's wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css" />
</head>
<body style="padding: 15px">
<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 iptBookname"
id="iptBookname"
placeholder="请输入书名"
/>
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input
type="text"
class="form-control iptAuthor"
id="iptAuthor"
placeholder="请输入作者"
/>
</div>
<div class="input-group ">
<div class="input-group-addon">出版社</div>
<input
type="text"
class="form-control iptPublisher"
id="iptPublisher"
placeholder="请输入出版社"
/>
</div>
<button id="btnAdd" class="btn btn-primary">添加</button>
</div>
</div>
<tablel class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
<script src="lib/axios.js"></script>
<script>
function loadtable() {
let table = document.querySelector('#tb')
axios
.get('http://nllcoder.com:8002/api/v1/books')
.then(function (res) {
// 1.2 渲染列表
// 遍历数组拼接列表
for (let i = 0; i < res.data.data.length; i++) {
// 取出每一个数据
let table = res.data.data[i]
table.innerHTML += `
${table.id}
${table.bookname}
${table.author}
${table.publisher}
删除
`
}
})
}
loadtable()
// 3. 添加图书
// 3.1 找到提交按钮，注册点击事件
let btn = document.querySelector('#btn')
btn.onclick = function () {
let booknameInput = document.querySelector('.bookname')
let authortInput = document.querySelector('.author')
let publisherInput = document.querySelector('.publisher')
// 3.2 判断文本框是否输入了，没有输入不提交，提示用户输入
if (booknameInput.value == '') {
alert('请输入书名')
return
}
if (authortInput.value == '') {
alert('请输入作者')
return
}
if (publisherInput.value == '') {
alert('请输入出版社')
return
}
// 3.3 文本框输入内容，发送请求，提交留言数据
axios
.post('http://nllcoder.com:8002/api/v1/books', {
bookname: booknameInput.value,
author:authorInput.value,
publisher:publisherInput.value
})
.then(function (res) {
// post成功，此处status是201
if (res.status == 201) {
// 3.4 判断提交是否成功，如果成功，重新加载列表，清空文本框
// loadtable()
booknameInput.value = ''
authorInput.value = ''
publisher.value = ''
} else {
alert('添加失败')
}
})
}
loadtable()
//删除列表
// 1.1使用事件委托的方式给删除按钮注册点击事件
let table = document.querySelector('.table')
table.onclick = function (e) {
// 判断当前点击的是否是删除按钮
if (e.target.matches('.del')){
// 1.2 点删除按钮弹出提示
if (confirm('确认删除该图书？')) {
//1.3 如果确认删除。向服务器发送请求删除数据（携带要删除的id）
let id = e.target.dataset.id
axios
.delete('http://nllcoder.com:8002/api/v1/books/'+id )
.then(function (res) {
// 判断删除是否成功
if (res.status == 200) {
alert('删除成功')
// 2.4 重新加载列表
loadtable()
} else {
alert('删除失败')
}
})
}
}
}
</script>
</html>
0 Answer
这家伙很懒，什么都没留下...
