From 576a714f46ad08e327267746b5867080f9a4e9d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=96=E5=BF=83=E5=A6=8D?= <2392642810@qq.com>
Date: Mon, 11 Dec 2023 20:46:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...76\344\271\246\347\256\241\347\220\206.md" | 125 ++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 "03 \350\265\226\345\277\203\345\246\215/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md"

diff --git "a/03 \350\265\226\345\277\203\345\246\215/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" "b/03 \350\265\226\345\277\203\345\246\215/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md"
new file mode 100644
index 0000000..172e941
--- /dev/null
+++ "b/03 \350\265\226\345\277\203\345\246\215/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md"	
@@ -0,0 +1,125 @@
+图书管理
+
+```html
+<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