diff --git "a/50 \345\274\240\350\265\267\347\221\236/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" "b/50 \345\274\240\350\265\267\347\221\236/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" new file mode 100644 index 0000000000000000000000000000000000000000..6feb01d441d65b9df57c35bd5f4cbca236dcae1b --- /dev/null +++ "b/50 \345\274\240\350\265\267\347\221\236/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" @@ -0,0 +1,273 @@ + + + + +1. 什么是 Bootstrap 弹框？ + + * 不离开当前页面，显示单独内容，供用户操作 + + ![image-20230404105801739](images/image-20230404105801739.png) + +2. 需求：使用 Bootstrap 弹框，先做个简单效果，点击按钮，让弹框出现，点击 X 和 Close 让弹框隐藏 + + ![image-20230404105858660](images/image-20230404105858660.png) + +3. 如何使用 Bootstrap 弹框呢？ + + 1. 先引入 bootstrap.css 和 bootstrap.js 到自己网页中 + + 2. 准备弹框标签，确认结构（可以从 Bootstrap 官方文档的 Modal 里复制基础例子）- 运行到网页后，逐一对应标签和弹框每个部分对应关系 + + 3. 通过自定义属性，通知弹框的显示和隐藏，语法如下： + + ```html + + + + ``` + + + +4. 去代码区实现一下 + + ```html + + + + + + + + Bootstrap 弹框 + + + + + + + + + +
+
+ +
+ +
+
Modal title
+ +
+ +
+

Modal body text goes here.

+
+ +
+ + +
+
+
+
+ + + + + + + ``` + +```javascript + // 2.1 创建弹框对象 + const addModalDom = document.querySelector('.add-modal') + const addModal = new bootstrap.Modal(addModalDom) + // 保存按钮->点击->隐藏弹框 + document.querySelector('.add-btn').addEventListener('click', () => { + // 2.2 收集表单数据，并提交到服务器保存 + const addForm = document.querySelector('.add-form') + const bookObj = serialize(addForm, { hash: true, empty: true }) + // console.log(bookObj) + // 提交到服务器 + axios({ + url: 'http://hmajax.itheima.net/api/books', + method: 'POST', + data: { + ...bookObj, + creator + } + }).then(result => { + // console.log(result) + // 2.3 添加成功后，重新请求并渲染图书列表 + getBooksList() + // 重置表单 + addForm.reset() + // 隐藏弹框 + addModal.hide() + }) + }) + ``` + +``` + +```javascript +* 目标1：渲染图书列表 + * 1.1 获取数据 + * 1.2 渲染数据 + */ +const creator = '张泡泡' +// 封装-获取并渲染图书列表函数 +function getBooksList() { + // 1.1 获取数据 + axios({ + url: 'http://hmajax.itheima.net/api/books', + params: { + // 外号：获取对应数据 + creator + } + }).then(result => { + // console.log(result) + const bookList = result.data.data + // console.log(bookList) + // 1.2 渲染数据 + const htmlStr = bookList.map((item, index) => { + return ` + ${index + 1} + ${item.bookname} + ${item.author} + ${item.publisher} + + 删除 + 编辑 + + ` + }).join('') + document.querySelector('.list').innerHTML = htmlStr + }) +} +// 网页加载运行,获取并渲染列表一次 +getBooksList() +/** + * 目标2：新增图书 + * 2.1 新增弹框 显示影藏 + * 2.2 收集表单数据，并提交服务器保存 + * 刷新图书列表 + */ +// 2.1 创建弹框对象 +const addModalDom = document.querySelector('.add-modal') +const addModal = new bootstrap.Modal(addModalDom) +// 保存按钮 点击 隐藏弹框 +document.querySelector('.add-btn').addEventListener('click', () => { + // 2.2 收集表单数据，并提交到服务器保存 + const addForm = document.querySelector('.add-form') + const bookObj = serialize(addForm, { hash: true, empty: true }) + // 提交到服务器 + axios({ + url: 'http://hmajax.itheima.net/api/books', + method: 'POST', + data: { + ...bookObj, + creator + } + }).then(result => { + console.log(result); + // 2.3 添加成功后，重新请求并渲染图书列表 + getBooksList() + // 重置表单 + addForm.reset() + // 隐藏弹框 + addModal.hide() + }) +}) + +/** + * 目标3：删除图书 + * 3.1 删除元素绑定点击事件-> 获取图书id + * 3.2 调用删除接口 + * 3.3 刷新图书列表 + */ +// 3.1 删除元素 ->点击（事件委托） +document.querySelector('.list').addEventListener('click', e => { + // 获取触发事件目标元素 + // 判断点击的是删除元素 + if (e.target.classList.contains('del')) { + // 获取图书id（自定义属性id） + const theId = e.target.parentNode.dataset.id + // 3.2 调用删除接口 + axios({ + url: `http://hmajax.itheima.net/api/books/${theId}`, + method: 'DELETE' + }).then(() => { + // 3.3 刷新图书列表 + getBooksList() + }) + } +}) + +/** + * 目标4：编辑图书 + * 4.1 编辑弹框 ->显示和隐藏 + * 4.2 获取当前编辑图书数据 -> 回显到编辑表单中 + * 4.3 提交保存修改，刷新列表 + */ +// 4.1 编辑弹框 显示 和隐藏 +const editDom = document.querySelector('.edit-modal') +const editModal = new bootstrap.Modal(editDom) +// 编辑元素 点击 弹框显示 +document.querySelector('.list').addEventListener('click', e => { + // 判断点击是否为编辑元素 + if (e.target.classList.contains('edit')) { + // 4.2 获取当前编辑图书数据->回显到编辑表单中 + const theId = e.target.parentNode.dataset.id + axios({ + url: `http://hmajax.itheima.net/api/books/${theId}` + }).then(result => { + const bookObj = result.data.data + // document.querySelector('.edit-form .bookname').value = bookObj.bookname + // document.querySelector('.edit-form .author').value = bookObj.author + // 数据对象“属性”和标签“类名”一致 + // 遍历数据对象，使用属性去获取对应的标签，快速赋值 + const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher'] + keys.forEach(key => { + document.querySelector(`.edit-form .${key}`).value = bookObj[key] + }) + }) + editModal.show() + } +}) +// 修改按钮->点击->隐藏弹框 +document.querySelector('.edit-btn').addEventListener('click', () => { + // 4.3 提交保存修改，并刷新列表 + const editForm = document.querySelector('.edit-form') + // console.log(editForm); + const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true }) + // 保存正在编辑的图书id，隐藏起来：无需让用户修改 + // + axios({ + url: `http://hmajax.itheima.net/api/books/${id}`, + method: 'PUT', + data: { + creator, + ...book + } + }).then((result) => { + console.log(result); + // 修改成功以后，重新获取并刷新列表 + getBooksList() + // 隐藏弹框 + editModal.hide() + }) +}) +``` +