From 36b4685fd9f9138479f721145f9baeee578fe2ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=83=9C=E6=9D=B0?= <2608607026@qq.com>
Date: Mon, 11 Dec 2023 11:11:29 +0000
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

Signed-off-by: 陈胜杰 <2608607026@qq.com>
---
 .../2023-12-08.md"                            | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 "58\351\231\210\350\203\234\346\235\260/2023-12-08.md"

diff --git "a/58\351\231\210\350\203\234\346\235\260/2023-12-08.md" "b/58\351\231\210\350\203\234\346\235\260/2023-12-08.md"
new file mode 100644
index 0000000..83d7b69
--- /dev/null
+++ "b/58\351\231\210\350\203\234\346\235\260/2023-12-08.md"
@@ -0,0 +1,111 @@
+```html
+<script src="./js/index.js"></script>
+</body>
+<script>
+    const creator = 'cheng';
+
+    //渲染的函数
+    function getBooksData() {
+        axios({
+            url: "https://hmajax.itheima.net/api/books",
+            params: {
+                creator,
+            }
+        }).then(result => {
+            const data = result.data.data;
+            const tbody = document.querySelector('tbody');
+            // console.log(data)
+            tbody.innerHTML = data.map((item, index) => {
+                const {id, bookname, author, publisher} = item;
+                return `<tr>
+          <td>${index + 1}</td>
+          <td>${bookname}</td>
+          <td>${author}</td>
+          <td>${publisher}</td>
+          <td data-id=${id}>
+            <span class="del">删除</span>
+            <span class="edit">编辑</span>
+          </td>
+        </tr>`
+            }).join("");
+        })
+    }
+
+    //  调用一次渲染函数
+    getBooksData();
+    //添加
+    const btn = document.querySelector('.add-btn');
+    const form = document.querySelector('.add-form');
+    const addModalBox=document.querySelector('.add-modal');
+    const addModal = new bootstrap.Modal(addModalBox);
+    btn.addEventListener('click', () => {
+        const book = serialize(form, {hash: true, empty: true});
+        axios({
+            url: "https://hmajax.itheima.net/api/books",
+            method:"post",
+            data:{
+                creator,
+                ...book,
+            }
+        }).then(result=>{
+            form.reset();
+            addModal.hide();
+            getBooksData();
+        }).catch(error=>{
+            alert('请输入完整')
+        })
+    })
+
+    const list = document.querySelector('.list');
+    list.addEventListener('click',e=>{
+        //    删除
+        const {target}=e;
+        if (target.className === 'del'){
+            const id=target.parentNode.dataset.id;
+            const s = confirm('是否删除！');
+            if (!s){
+                return;
+            }
+            axios({
+                url:"https://hmajax.itheima.net/api/books/"+id,
+                method: 'delete',
+            }).then(result=>{
+                getBooksData();
+                alert(result.data.message);
+                })
+        }
+        if (target.className==='edit'){
+            const form=document.querySelector('.edit-form');
+            const editModalBox=document.querySelector('.edit-modal');
+            const editModal=new bootstrap.Modal(editModalBox);
+            editModal.show();
+            const id=target.parentNode.dataset.id;
+            axios({
+                url:"https://hmajax.itheima.net/api/books/"+id,
+            }).then(result=>{
+                const data=result.data.data;
+                const{id,bookname,author,publisher}=data;
+                form.querySelector('.bookname').value=bookname;
+                form.querySelector('.author').value=author;
+                form.querySelector('.publisher').value=publisher;
+            })
+        document.querySelector('.edit-btn').addEventListener('click',function (){
+            const book=serialize(form,{hash: true,empty: true});
+            axios({
+                url:"https://hmajax.itheima.net/api/books/"+id,
+                method:"put",
+                data: {
+                    creator,
+                    ...book,
+                }
+            }).then(result=>{
+                editModal.hide();
+                getBooksData();
+            })
+        })
+        }
+    })
+
+</script>
+```
+
-- 
Gitee