From 12bef9cfa78f524411a62c61df00cbecbfcd357d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B0=B8=E6=B7=B3?= <2678158018@qq.com>
Date: Mon, 11 Dec 2023 21:47:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=8D=81=E6=AC=A1?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231208\344\275\234\344\270\232.md"      | 123 ++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 "18 \345\276\220\346\260\270\346\267\263/20231208\344\275\234\344\270\232.md"

diff --git "a/18 \345\276\220\346\260\270\346\267\263/20231208\344\275\234\344\270\232.md" "b/18 \345\276\220\346\260\270\346\267\263/20231208\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..cefd423
--- /dev/null
+++ "b/18 \345\276\220\346\260\270\346\267\263/20231208\344\275\234\344\270\232.md"	
@@ -0,0 +1,123 @@
+```js
+<script>
+// 定义变量
+ let tbody = document.querySelector("body > div.container > table > tbody"); // 获取页面中的table的tbody元素
+ let addModal = document.querySelector("body > div.modal.fade.add-modal"); // 获取页面中的添加模态框
+ let editModal = document.querySelector("body > div.modal.fade.edit-modal"); // 获取页面中的编辑模态框
+tbody.innerHTML = ''; // 清空tbody元素的内容
+
+// 渲染函数
+function render() {
+    // 发送请求获取书籍数据
+    axios({
+        url: 'https://hmajax.itheima.net/api/books', // 请求地址
+        params: {
+            creator: 'zhc' // 请求参数
+        }
+    }).then(res => {
+        tbody.innerHTML = ''; // 清空tbody元素的内容
+        res.data.data.forEach((item, i) => { // 遍历返回的书籍数据
+            let {id, bookname, author, publisher} = item; // 解构赋值
+            let tr = document.createElement(`tr`); // 创建一个tr元素
+            tr.innerHTML = `
+            <td>${i + 1}</td>
+            <td>${bookname}</td>
+            <td>${author}</td>
+            <td>${publisher}</td>
+            <td data-id="${id}">
+            <span class="del">删除</span>
+            <span class="edit">编辑</span>
+            </td>
+            `; // 设置td元素的内容
+
+            tbody.appendChild(tr); // 将tr元素添加到tbody中
+        })
+    }).catch(err => {
+        // console.log(err);
+    })
+}
+
+render(); // 调用渲染函数
+
+// 添加书籍函数
+function addBook() {
+    let addform = addModal.querySelector('.modal-body.form-wrap .add-form'); // 获取添加模态框中的表单元素
+    let inputs = serialize(addform, {hash: true, empty: true}); // 序列化表单的输入值
+    if (inputs.bookname.trim() === '' || inputs.author.trim() === '' || inputs.publisher.trim() === '') {
+        return alert('请填写完整'); // 如果有空项，则弹出提示框
+    } else {
+        axios({
+            url: 'https://hmajax.itheima.net/api/books', // 请求地址
+            method: 'post', // 请求方法为post
+            data: {
+                creator: 'zhc', // 请求参数
+                ...inputs // 将序列化后的表单值传递给请求数据
+            }
+        }).then(res => {
+            // console.log(res);
+            bootstrap.Modal.getOrCreateInstance(addModal).hide(); // 隐藏添加模态框
+
+            addform.reset(); // 清空表单数据
+            render(); // 重新渲染数据
+        }).catch(err => {
+            // console.log(err);
+        })
+    }
+}
+
+addModal.querySelector('.btn.btn-primary.add-btn').onclick = function () { // 给添加按钮添加点击事件
+    addBook(); // 调用添加书籍函数
+}
+
+tbody.addEventListener('click', e => { // 给tbody元素添加点击事件
+    if (e.target.className === 'del') { // 如果点击的目标元素的类名为del
+        if (confirm('确定要删除吗？')) { // 如果确认删除
+            let id = e.target.parentNode.dataset.id; // 获取删除按钮所在的行的id值
+            // console.log(id);
+            axios({
+                url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+                method: 'delete' // 请求方法为delete
+            }).then(res => {
+                // console.log(res);
+                render(); // 重新渲染数据
+            }).catch(err => {
+                // console.log(err);
+            })
+        }
+    }
+    if (e.target.className === 'edit') { // 如果点击的目标元素的类名为edit
+        let id = e.target.parentNode.dataset.id; // 获取编辑按钮所在的行的id值
+        let inputs = editModal.querySelector('.edit-form'); // 获取编辑模态框中的表单元素
+        axios({
+            url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+            method: 'get' // 请求方法为get
+        }).then(res => {
+            let {id, bookname, author, publisher} = res.data.data; // 获取书籍信息
+            inputs.querySelector('.id').value = id; // 设置表单的id值
+            inputs.querySelector('.bookname').value = bookname; // 设置表单的bookname值
+            inputs.querySelector('.author').value = author; // 设置表单的author值
+            inputs.querySelector('.publisher').value = publisher; // 设置表单的publisher值
+        }).catch(err => {
+            // console.log(err);
+        })
+        bootstrap.Modal.getOrCreateInstance(editModal).show(); // 显示编辑模态框
+        editModal.querySelector('.btn.btn-primary.edit-btn').onclick = function () { // 给编辑按钮添加点击事件
+            let editform = editModal.querySelector('.edit-form'); // 获取编辑模态框中的表单元素
+            let data = serialize(editform, {hash: true, empty: true}); // 序列化表单的输入值
+            axios({
+                url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+                method: 'put', // 请求方法为put，更新数据
+                data
+            }).then(res => {
+                // console.log(res);
+                bootstrap.Modal.getOrCreateInstance(editModal).hide(); // 隐藏编辑模态框
+                render(); // 重新渲染数据
+            }).catch(err => {
+                // console.log(err);
+            })
+        }
+    }
+})
+</script>
+```
+
-- 
Gitee


From f59551eb14eafaa32d1d4c1c823458aea6678199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B0=B8=E6=B7=B3?= <2678158018@qq.com>
Date: Mon, 11 Dec 2023 21:51:35 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=8D=81=E4=B8=80?=
 =?UTF-8?q?=E6=AC=A1=E7=AC=94=E8=AE=B0=E3=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231208\347\254\224\350\256\260.md"          | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 "18 \345\276\220\346\260\270\346\267\263/20231208\347\254\224\350\256\260.md"

diff --git "a/18 \345\276\220\346\260\270\346\267\263/20231208\347\254\224\350\256\260.md" "b/18 \345\276\220\346\260\270\346\267\263/20231208\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..e1fcd4a
--- /dev/null
+++ "b/18 \345\276\220\346\260\270\346\267\263/20231208\347\254\224\350\256\260.md"	
@@ -0,0 +1,15 @@
+1. 什么是 Bootstrap 弹框？
+
+   * 不离开当前页面，显示单独内容，供用户操作
+
+     ![image-20230404105801739](E:\前端\Ajax\Ajax 资料\代码和笔记\Day02_AJAX综合案例\02-笔记\images\image-20230404105801739.png)
+
+2. 需求：使用 Bootstrap 弹框，先做个简单效果，点击按钮，让弹框出现，点击 X 和 Close 让弹框隐藏
+
+   ![image-20230404105858660](E:\前端\Ajax\Ajax 资料\代码和笔记\Day02_AJAX综合案例\02-笔记\images\image-20230404105858660.png)
+
+3. 如何使用 Bootstrap 弹框呢？
+
+   1. 先引入 bootstrap.css 和 bootstrap.js 到自己网页中
+
+   2. 准备弹框标签，确认结构（可以从 Bootstrap 官方文档的 Modal 里复制基础例子）- 运行到网页后，逐一对应标签和弹框每个部分对应关系
\ No newline at end of file
-- 
Gitee