主要实现功能如下：
① 请求并渲染图书列表的数据
② 添加图书
③ 删除图书
初始效果图：
成果图:
代码展示：
<!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>
<!-- 添加按钮 -->
<button class="btn btn-dark" type="submit">添加</button>
</form>
</div>
</div>
</div>
</div>
<!-- 引入 lib 目录下的 jQuery 和 axios -->
<script src="./lib/jquery-v3.6.0.js"></script>
<script src="./lib/axios.js"></script>
<script>
$(function() {
console.log('ok')
})
// 渲染页面 S
function initBookList() {
// 获取图书列表
axios.get('http://www.liulongbin.top:3006/api/getbooks').then(({
data: res
}) => {
console.log(res.data);
// 渲染数据
// 循环数组
// 定义保存渲染结果数组
let arr = []
for (let i = 0; i < res.data.length; i++) {
let item = res.data[i]
// 准备好的模板
// 把每一个循环项中的数据填充到模板
// 将结果保存
arr.push(`
<tr>
<th scope="row">${item.id}</th>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<button type="button" class="btn btn-link btn-sm" data-id="${item.id}">删除</button>
</td>
</tr>
`)
}
// 等循环完毕后，将所有结果一口气渲染导表格中
let tbody = document.querySelector('tbody')
tbody.innerHTML = arr.join('')
})
}
initBookList()
// 渲染页面 E
// 添加图书 S
let form = document.querySelector('form')
form.addEventListener('submit', function(e) {
// 阻止form跳转默认行为
e.preventDefault()
// 发送给后台
axios.post('http://www.liulongbin.top:3006/api/addbook', $('#addForm').serialize())
.then(({
data
}) => {
if (data.code === 201) {
// 成功
// 重新渲染
initBookList()
// 清空
// 调用form DOM对象的reset方法就可以清空表单内的所有输入
form.reset()
}
// 不管成功还是失败提示用户
console.log(data.msg);
})
})
// 添加图书 E
// 删除图书 S
tbody.addEventListener('click',function(e){
// console.log(e.target);
axios({
methods:'POST',
url:'http://www.liulongbin.top:3009/api/delbook',
params:{
id:e.target.dataset.id
}
}).then((res)=>{
// console.log(res);
bookIntList()
})
})
// 删除图书 E
</script>
</body>
</html>
1205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
