该图书管理系统利用axios库发送ajax请求，与服务器进行联系，动态的实现图书的增删改查操作。该系统还使用了另一个JS插件，serialize插件，可以获取整个表单的数据。
注：html骨架已经搭好，本次主要负责JS部分的逻辑代码，本次使用的接口地址如下。
接口地址：https://apifox.com/apidoc/project-1937884/doc-1695440
<!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>案例-图书管理</title>
<!-- 字体图标 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css">
<!-- 引入bootstrap.css -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<!-- 核心样式 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 主体区域 -->
<div class="container">
<!-- 头部标题和添加按钮 -->
<div class="top">
<h3>图书管理</h3>
<button type="button" class="btn btn-primary plus-btn" data-bs-toggle="modal" data-bs-target=".add-modal"> + 添加
</button>
</div>
<!-- 数据列表 -->
<table class="table">
<thead class="table-light">
<tr>
<th style="width: 150px;">序号</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th style="width: 180px;">操作</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td>1</td>
<td>JavaScript程序设计</td>
<td>马特·弗里斯比</td>
<td>人民邮电出版社</td>
<td>
<span class="del">删除</span>
<span class="edit">编辑</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 新增-弹出框 -->
<div class="modal fade add-modal">
<!-- 中间白色区域 -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header top">
<span>添加图书</span>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body form-wrap">
<!-- 新增表单 -->
<form class="add-form">
<div class="mb-3">
<label for="bookname" class="form-label">书名</label>
<input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname">
</div>
<div class="mb-3">
<label for="author" class="form-label">作者</label>
<input type="text" class="form-control author" placeholder="请输入作者名称" name="author">
</div>
<div class="mb-3">
<label for="publisher" class="form-label">出版社</label>
<input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher">
</div>
</form>
</div>
<div class="modal-footer btn-group">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button>
<button type="button" class="btn btn-primary add-btn"> 保存 </button>
</div>
</div>
</div>
</div>
<!-- 编辑-弹出框 -->
<div class="modal fade edit-modal">
<!-- 中间白色区域 -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header top">
<span>编辑图书</span>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body form-wrap">
<!-- 编辑表单 -->
<form class="edit-form">
<input type="hidden" class="id" name="id">
<div class="mb-3">
<label for="bookname" class="form-label">书名</label>
<input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname">
</div>
<div class="mb-3">
<label for="author" class="form-label">作者</label>
<input type="text" class="form-control author" placeholder="请输入作者名称" name="author">
</div>
<div class="mb-3">
<label for="publisher" class="form-label">出版社</label>
<input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher">
</div>
</form>
</div>
<div class="modal-footer btn-group">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button>
<button type="button" class="btn btn-primary edit-btn"> 修改 </button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
<script src="./lib/form-serialize.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
<!-- 核心逻辑 -->
<!-- <script src="./js/index.js"></script> -->
<script src="./js/index01.js"></script>
</body>
</html>
为实现该图书系统的完整功能，可以划分为以下几个业务进行操作
- 查询业务
通过发送ajax请求获取数据，在封装一个渲染函数，将获取过来的数据渲染到页面中
// 查询业务
// 外号
const creator = '桂其鑫';
// 1. 封装一个渲染函数
function renderData (){
// 发送ajax请求
axios.get('http://hmajax.itheima.net/api/books', { params: {creator}}).then(res =>{
console.log(res);
document.querySelector('.list').innerHTML = res.data.data.map(item =>`
<tr>
<td>${item.id}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<span class="del" data-id='${item.id}'>删除</span>
<span class="edit" data-id='${item.id}'>编辑</span>
</td>
</tr>
`).join('')
})
}
renderData()
- 新增业务
该处业务还涉及到了一个css库bootstrap，可以自定义生成模态框，完成图书的添加后利用serialize插件获取表单的数据发送给服务器完成存储，在进行请求数据和渲染页面
// 新增业务
// 2.1点击添加按钮
const addModal = new bootstrap.Modal('.add-modal');
document.querySelector('.plus-btn').addEventListener('click',function(){
addModal.show();
})
// 点击保存关闭模态框 + 表单提交
document.querySelector('.add-btn').addEventListener('click',function(){
// 获取表单数据
//serialize(获取数据的表单，配置对象)
const FormData = serialize(document.querySelector('.add-form'),{ hash:true , empty: true });
// 非空校验
if(Object.values(FormData).some(item=>!item)){
alert('输入框不能为空')
return;
}
// 发送ajax请求
axios.post('http://hmajax.itheima.net/api/books',{...FormData,creator}).then(res =>{
console.log(res);
// (4)重新加载列表
// 此处不传参直接从服务器拿取数据，完美的解决了post响应回来的数据格式与get响应回来的数据格式不同的难题
renderData();
addModal.hide();
document.querySelector('.add-form').reset()
})
})
- 编辑业务
该业务涉及到一个经典的业务处理—数据回显，主要是从服务器获取数据再渲染到表单上。将修改后的数据发送给服务器存储，再使用渲染函数从新渲染
// 编辑业务
const editModal = new bootstrap.Modal('.edit-modal');
// 使用事件委托绑定
document.querySelector('.list').addEventListener('click',function(e){
if(e.target.classList.contains('edit')){
// 显示模态框
editModal.show();
// 数据回显 ----从服务器获取数据 ，渲染到表单上
// 路径参数：不需要?来分隔，而是直接在url后面使用/来链接参数
axios.get(`http://hmajax.itheima.net/api/books/${e.target.dataset.id}`).then( res =>{
console.log(res);
// 服务器返回的对象的属性名，和表单的类名一样，可以使用循环回显数据
// Object.keys() 获取对象的所有属性名
Object.keys(res.data.data).forEach(item =>{
// console.log(item);
document.querySelector(`.edit-form .${item}`).value = res.data.data[item]
})
})
document.querySelector('.edit-btn').addEventListener('click',function(){
// 修改后，发送ajax + 页面渲染
// 1. 获取表单数据
// 2. 非空校验
// 3. 发送ajax
// 4. 响应成功，从新渲染
const FormDataBack = serialize(document.querySelector('.edit-form'),{ hash:true,empty:true});
// 非空校验
// 取得对象的值，some()将对象值转为字符串
if(Object.values(FormDataBack).some(item=>!item)){
alert('输入框不能为空')
return;
}
axios.post('http://hmajax.itheima.net/api/books',{...FormDataBack,creator}).then(res=>{
renderData();
editModal.hide();
document.querySelector('.edit-form').reset()
})
})
}
- 删除业务
利用自定义属性和事件委托获取要删除的图书，直接在服务器的数据里删除，在从新渲染即可
// 删除业务
if(e.target.classList.contains('del')){
// 获取id，发送ajax
axios.delete(`http://hmajax.itheima.net/api/books/${e.target.dataset.id}`).then(res=>{
console.log(res);
// 重新渲染页面
renderData();
})
}
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
