一.form-serialize插件
作用:快速收集表单元素的值
const form = document.querySelector('.example-form')
const data = serialize(form,{hash:true,empty:true})
*参数1:要获取哪个表单的数据
表单元素设置name属性,值会作为对象的属性名
建议name属性的值,最好和接口文档参数名一致
*参数2:配置对象
hash设置获取数据结构
-true:JS对象(推荐)一般请求体里提交给服务器
-false:查询字符串
empty设置是否获取空值
二.使用Bootstrap弹框
1.引入bootstrap.css和bootstrap.js
2.准备弹框标签,确认结构
3.通过自定义属性,控制弹框的显示和隐藏
<button data-bs-toggle="modal" data-bs-target="css选择器">显示弹框</button>
<button data-bs-dismiss="modal">Close</button>
Bootstrap弹框
1.通过属性控制,弹框显示或隐藏
2.通过JS控制,弹框显示或隐藏
// 创建弹框对象
const modalDom = document.querySelector('css选择器')
const modal = new bootstrap.Modal(modalDom)
// 显示弹框
modal.show()
// 隐藏弹框
modal.hide()
三.案例_图书管理_总结
核心步骤—渲染数据
核心步骤—新增数据
核心步骤—删除数据
核心步骤—编辑数据