实现需求
- 页面刷新时请求数据渲染
- 搜索书名的功能
- 新增图书功能
- 删除图书功能
- 编辑图书功能
- 进度条功能
实现步骤
- 封装渲染数据函数（获取数据时get请求）
- 根据书名搜索数据然后再渲染出来
- 新增功能：弹出模态框（运用boostrap模态框）新增使用post请求
- 删除功能：使用事件委托 和 事件对象实现点击到删除按钮 根据id删除数据
- 编辑功能：：弹出模态框（运用boostrap模态框）同新增功能 模态框赋值有使用对象for in遍历赋值给模态框
- NProgress进度条功能：使用了axios拦截器 再拦截器里增加进度条实现代码
运用知识
- boostrap模态框运用
- NProgress进度条运用
- axios请求
- jq方法快速获取表单数据 需要给button增加form属性连接form表单获取的数据
- axios拦截器
- 基地址
- 数组方法的基本运用
分步骤实现功能
封装渲染数据函数（获取数据时get请求） 封装函数是为了能多次调用，简洁代码、可复用性
给函数参数query设定默认值是判断是否会根据参数进行查询数据
query && (query = “&bookname=” + query);
function getbooks(query = "") {
// 判断形参的值是否真实传入
query && (query = "&bookname=" + query);
axios.get("/api/getbooks?appkey=maomao12138" + query).then((res) => {
let arr = res.data.data;
const htmlStr = arr
.map(
(item) => `
<tr>
<td>${item.id}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<button class="btn btn-primary update" data-id=${item.id}>编辑</button>
<button class="btn btn-danger del" data-id=${item.id}>删除</button>
</td>
</tr>
`
)
.join("");
tbody.innerHTML = htmlStr;
});
}
根据书名搜索数据然后再渲染出来
// 搜索数据
searchBtn.addEventListener("click", function () {
if (!$(".sbookName").val()) {
getbooks();
return alert("请输入书名");
}
getbooks($(".sbookName").val());
});
新增功能：弹出模态框（运用boostrap模态框）新增使用post请求 运用监听表单submit事件，快速获取表单数据
// 新增操作
// 显示模态框
btnShowModel.addEventListener("click", function () {
// 显示模态框
$("#myModal").modal("show");
});
// 获取模态框数据 并添加sumbit事件提交数据
addForm.addEventListener("submit", function (e) {
e.preventDefault();
// 快速获取表单数据 使用jq
let data = $(this).serialize();
console.log(data);
// 表单重置
addForm.reset()
// 隐藏模态框
$("#myModal").modal("hide");
// 发起post请求提交数据
axios.post("/api/addbook", data + "&appkey=maomao12138").then((res) => {
getbooks();
});
});
删除功能：使用事件委托 和 事件对象实现点击到删除按钮 根据id删除数据
// 删除操作 用到事件委托 delete请求
tbody.addEventListener("click", function (e) {
if (e.target.classList.contains("del") && confirm("您确认要删除吗")) {
let id = e.target.dataset.id;
console.log(id);
axios.delete("/api/delbook?appkey=maomao12138&id=" + id).then((res) => {
alert("删除成功");
getbooks();
});
}
});
编辑图书功能
跟新增功能差不多
运用要模态框 快速获取表单数据
put请求
if (e.target.classList.contains("update")) {
// 显示模态框
$("#update-modal").modal("show");
// 获取点击的Id所对应的数据 赋值给模态框
let id = e.target.dataset.id;
axios.get("/api/getbooks?appkey=maomao12138&id=" + id).then((res) => {
let obj = res.data.data[0];
for (let key in obj) {
document.querySelector(`#update-form [name=${key}]`).value = obj[key];
}
});
}
// 编辑模态框 监听事件 put请求
updateForm.addEventListener('submit', function(e) {
e.preventDefault()
// 快速获取表单数据
let data = $(this).serialize()
// 隐藏模态框
$("#update-modal").modal("hide");
axios.put('/api/updatebook', data + "&appkey=maomao12138").then((res) => {
getbooks();
});
})
总代码
html布局
<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>
<!-- 引入boostrap.css -->
<link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<!-- 引入Nprogress.css -->
<link rel="stylesheet" href="./lib/nprogress/nprogress.css">
<!-- 引入自己页面的css文件 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container">
<!-- 搜索栏 -->
<div class="my-tool">
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control sbookName" placeholder="请输入书名" />
<span class="input-group-btn">
<button class="btn btn-warning" type="button" id="searchBtn">搜索</button>
</span>
</div>
</div>
<div class="col-xs-6">
<button class="btn btn-success" id="btnShowModel">新增</button>
</div>
</div>
</div>
<!-- 表格 -->
<table class="table table-striped table-bordered text-center">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr> -->
</tbody>
</table>
</div>
<!-- 新增-模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">新增图书</h4>
</div>
<div class="modal-body">
<form id="addForm" autocomplete="off">
<div class="form-group">
<label for="bookname">书名</label>
<input type="text" class="form-control" name="bookname" id="bookname" placeholder="书名" />
</div>
<div class="form-group">
<label for="author">作者</label>
<input type="text" class="form-control" name="author" id="author" placeholder="作者" />
</div>
<div class="form-group">
<label for="publisher">出版社</label>
<input type="text" class="form-control" name="publisher" id="publisher" placeholder="出版社" />
</div>
</form>
</div>
<div class="modal-footer">
<button form="addForm" type="reset" class="btn btn-default" data-dismiss="modal">
取消
</button>
<button form="addForm" type="submit" class="btn btn-primary">确认</button>
</div>
</div>
</div>
</div>
<!-- 新增-模态框 -->
<!-- 编辑模态框 -->
<div class="modal fade" id="update-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">编辑书籍</div>
<div class="modal-body">
<form id="update-form">
<input type="hidden" name="id">
<div class="form-group">
<label for="updatebookname">书名</label>
<input type="text" name="bookname" class="form-control" id="updatebookname"
placeholder="书名" />
</div>
<div class="form-group">
<label for="updateauthor">作者</label>
<input type="text" name="author" class="form-control" id="updateauthor" placeholder="作者" />
</div>
<div class="form-group">
<label for="updatepublisher">出版社</label>
<input type="text" name="publisher" class="form-control" id="updatepublisher"
placeholder="出版社" />
</div>
</form>
</div>
<div class="modal-footer">
<button form="update-form" type="reset" class="btn btn-default" data-dismiss="modal">
取消
</button>
<button form="update-form" type="submit" class="btn btn-primary">
确定
</button>
</div>
</div>
</div>
</div>
<!-- 编辑模态框 -->
<!-- 引入jquery.js -->
<script src="./lib/jquery.js"></script>
<!-- 引入bootstrap.min.js -->
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<!-- 引入nprogress.js-->
<script src="./lib/nprogress/nprogress.js"></script>
<!-- 引入axios.js-->
<script src="./lib/axios.js"></script>
<!-- 添加拦截器 -->
<script src="./js/common.js"></script>
<!-- 引入页面自己的Js-->
<script src="./js/crud.js"></script>
</body>
js
// 获取元素
const tbody = document.querySelector("tbody");
const searchBtn = document.querySelector("#searchBtn");
const btnShowModel = document.querySelector("#btnShowModel");
const addForm = document.querySelector("#addForm");
const updateForm = document.querySelector("#update-form");
// 渲染数据通过get请求
// 传参设置默认值
function getbooks(query = "") {
// 判断形参的值是否真实传入
query && (query = "&bookname=" + query);
axios.get("/api/getbooks?appkey=maomao12138" + query).then((res) => {
let arr = res.data.data;
const htmlStr = arr
.map(
(item) => `
<tr>
<td>${item.id}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<button class="btn btn-primary update" data-id=${item.id}>编辑</button>
<button class="btn btn-danger del" data-id=${item.id}>删除</button>
</td>
</tr>
`
)
.join("");
tbody.innerHTML = htmlStr;
});
}
// 页面刷新渲染全部数据 不需要传参
getbooks();
// 搜索数据
searchBtn.addEventListener("click", function () {
if (!$(".sbookName").val()) {
getbooks();
return alert("请输入书名");
}
getbooks($(".sbookName").val());
});
// 新增操作
// 显示模态框
btnShowModel.addEventListener("click", function () {
// 显示模态框
$("#myModal").modal("show");
});
// 获取模态框数据 并添加sumbit事件提交数据
addForm.addEventListener("submit", function (e) {
e.preventDefault();
// 快速获取表单数据 使用jq
let data = $(this).serialize();
console.log(data);
// 表单重置
addForm.reset()
// 隐藏模态框
$("#myModal").modal("hide");
// 发起post请求提交数据
axios.post("/api/addbook", data + "&appkey=maomao12138").then((res) => {
getbooks();
});
});
// 删除操作 用到事件委托 delete请求
tbody.addEventListener("click", function (e) {
if (e.target.classList.contains("del") && confirm("您确认要删除吗")) {
let id = e.target.dataset.id;
console.log(id);
axios.delete("/api/delbook?appkey=maomao12138&id=" + id).then((res) => {
alert("删除成功");
getbooks();
});
} else if (e.target.classList.contains("update")) {
// 显示模态框
$("#update-modal").modal("show");
// 获取点击的Id所对应的数据 赋值给模态框
let id = e.target.dataset.id;
axios.get("/api/getbooks?appkey=maomao12138&id=" + id).then((res) => {
let obj = res.data.data[0];
for (let key in obj) {
document.querySelector(`#update-form [name=${key}]`).value = obj[key];
}
});
}
});
// 编辑模态框 监听事件 put请求
updateForm.addEventListener('submit', function(e) {
e.preventDefault()
// 快速获取表单数据
let data = $(this).serialize()
// 隐藏模态框
$("#update-modal").modal("hide");
axios.put('/api/updatebook', data + "&appkey=maomao12138").then((res) => {
getbooks();
});
})
3186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
