本节目标
完成图书管理案例
- form-serialize
- Bootstrap
- 图书管理
form-serialize
form-serialize插件,帮助我们快速收集表单元素值
<body>
<script src="./lib/form-serialize.js"></script>
<form action="javascript:;" class="example-form">
<input type="text" name="uname">
<br>
<input type="text" name="pwd">
<br>
<input type="button" class="btn" value="提交">
</form>
<!--
目标:在点击提交时,使用form-serialize插件,快速收集表单元素值
-->
<script>
//
// 使用步骤
// 1引入JS
// 2使用serialize()函数
// > 参数1: 表单对象
// > 表单的name属性作为对象的属性名
// > 建议把name属性与接口文档参数名保持一致
//
// > 参数2: 配置对象
// > hash: 设置获取到的数据格式 (true->JS对象格式, false->查询字符串格式)
// > empty: 设置是否过滤空值 (true->获取空值, false->不获取空值)
// 建议获取空值,这样数据结构与标签结构保持一致
document.querySelector('.btn').addEventListener('click', () => {
const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true })
console.log(data);1
})
</script>
</body>
Bootstrap
Bootstrap是一款简洁、直观、强悍的前端开发框架,让web开发更迅速、简单
官网: Modal · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网
弹框组件
使用步骤
- 引入bootstrap.css 和 bootstrap.js
- 准备弹框标签,确认结构
- 通过自定义属性,控制弹框的显示和隐藏(很方便)
- 通过JS,控制弹框的显示和隐藏(更灵活)
<!-- 引入bootstrap.css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<body>
<!--
使用说明:
data-bs-toggle="modal" => 通过官方的自定义属性,实现切换
data-bs-target="#exampleModal" => 传入css选择器, 指定切换的弹窗元素
-->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".modal">
显示弹框
</button>
<!--
弹窗标签
通过modal类名控制弹框的显示和隐藏
-->
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<!-- 标题 -->
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 内容 -->
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<!-- 按钮 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
</body>
<body>
<!--
使用说明:
1. 先创建弹框对象
2. 在调用弹框对象内置方法
.show() 显示
.hide() 隐藏
-->
<button type="button" class="btn btn-primary edit-btn">
编辑姓名
</button>
<div class="modal name-box" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">请输入姓名</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="">
<span>姓名:</span>
<input type="text" class="username">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary save-btn">保存</button>
</div>
</div>
</div>
</div>
<!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
<script>
// 创建弹框对象
const modalDom = document.querySelector('.name-box')
const modal = new bootstrap.Modal(modalDom)
const input = document.querySelector('.username')
document.querySelector('.edit-btn').addEventListener('click', function () {
input.value = '回显的数据'
// 显示弹框
modal.show()
})
document.querySelector('.save-btn').addEventListener('click', function () {
console.log('拿到数据', input.value);
// 隐藏弹框
modal.hide()
})
</script>
</body>
轻提示组件
<body>
<!-- toast 提示框 -->
<div class="toast my-toast" data-bs-delay="1500">
<div class="toast-body">
<div class="alert alert-success info-box">
操作成功
</div>
</div>
</div>
<secript>
const totalEml = document.querySelector('.my-toast')
const total = new bootstrap.Toast(totalEml)
// 显示提示框
total.show()
</secript>
</body>
图书管理
本课程的接口文档 欢迎使用 - B站-AJAX和黑马头条-数据管理平台
1渲染列表
/**
* 目标1:渲染图书列表
* 1.1 获取数据
* 1.2 渲染数据
*/
const creator = 'wangzhen'
// 渲染函数
const render = () => {
axios({
url: 'http://hmajax.itheima.net/api/books',
params: {
creator,
}
}).then(({ data }) => {
const res = data.data
const htmlStr = res.map((item, index) => {
return `<tr>
<td>${index + 1}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<span class="del">删除</span>
<span class="edit">编辑</span>
</td>
</tr>`
}).join('')
// 渲染内容
document.querySelector('.list').innerHTML = htmlStr
})
}
render()
2新增图书
/**
* 目标2:新增图书
* 2.1 新增弹框 ->显示隐藏->自定义属性控制
* 2.2 收集表单数据
* 2.3 刷新列表, 清空输入框
*/
const addModalDom = document.querySelector('.add-modal')
const modal = new bootstrap.Modal(addModalDom)
document.querySelector('.add-btn').addEventListener('click', function () {
// 获取表单数据
const addForm = document.querySelector('.add-form')
const formData = serialize(addForm, { hash: true, empty: true })
console.log(formData);
// 发请求
axios({
url: 'http://hmajax.itheima.net/api/books',
method: 'post',
data: {
...formData,
creator
}
}).then(() => {
// 清空数据
addForm.reset()
// 刷新列表
render()
// 关闭弹框
modal.hide()
})
})
3删除图书
/**
* 目标3: 删除图书
* 3.1 删除按钮绑定事件
* 3.2 调用接口删除
* 3.3 刷新图书列表
*
* 知识点:
* -> 事件委托注册事件
* -> 自定义属性拿到删除项id
*/
// 动态列表, 使用事件委托的形式注册事件
document.querySelector('.list').addEventListener('click', function (e) {
if (e.target.classList.contains('del')) {
// id在父节点身上
const id = e.target.parentNode.dataset.id
axios({
url: `http://hmajax.itheima.net/api/books/${id}`,
method: 'delete',
}).then(() => {
render()
})
}
})
4编辑图书
/**
* 目标4: 编辑图书
* 4.1 编辑弹窗的显示和隐藏
* 4.2 获取详情数据回显
* 4.3 发请求保存修改, 刷新列表
*/
const editModalDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editModalDom)
document.querySelector('.list').addEventListener('click', function (e) {
if (e.target.classList.contains('edit')) {
editModal.show()
const id = e.target.parentNode.dataset.id
axios({
url: `http://hmajax.itheima.net/api/books/${id}`
}).then(({ data }) => {
const res = data.data
// 数据对象"属性"和标签"类名"一致
// 遍历数据对象, 使用属性名作为类名,获取标签, 快速赋值
const keys = Object.keys(res)
keys.forEach((k) => {
document.querySelector(`.edit-form .${k}`).value = res[k]
})
})
}
})
document.querySelector('.edit-btn').addEventListener('click', function () {
// 保存修改
const editForm = document.querySelector('.edit-form')
const { id, author, bookname, publisher } = serialize(editForm, { hash: true, empty: true })
// 报错正在编辑的图书id, 隐藏起来的, 无需用户感知,
// 回显的时候自动创建出来的, 因为keys数组中有id属性
// <input type="hidden" class="id" name="id" value="402042">
axios({
url: `http://hmajax.itheima.net/api/books/${id}`,
method: 'put',
data: {
author,
bookname,
publisher,
creator
}
}).then(() => {
render()
editModal.hide()
})
})