From 2aa682cf4791b2b2c845a9f371027af59930ae91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=8F=AD=E9=98=B3=E4=B8=BD?= <2431466589@qq.com>
Date: Mon, 11 Dec 2023 23:55:39 +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

---
 .../20231208 \344\275\234\344\270\232.txt"    | 159 ++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 "37 \346\217\255\351\230\263\344\270\275/20231208 \344\275\234\344\270\232.txt"

diff --git "a/37 \346\217\255\351\230\263\344\270\275/20231208 \344\275\234\344\270\232.txt" "b/37 \346\217\255\351\230\263\344\270\275/20231208 \344\275\234\344\270\232.txt"
new file mode 100644
index 0000000..ecf9e61
--- /dev/null
+++ "b/37 \346\217\255\351\230\263\344\270\275/20231208 \344\275\234\344\270\232.txt"	
@@ -0,0 +1,159 @@
+图书管理系统
+
+```js
+/**
+ * 目标1：渲染图书列表
+ *  1.1 获取数据
+ *  1.2 渲染数据
+ */
+
+//调用的是父亲
+// const tbody = document.querySelector('.list')
+
+const creator = '毛毛'
+//封装。获取并渲染图书列表函数
+function getBooksList(){
+//1.1获取数值
+axios({
+    url:'https://hmajax.itheima.net/api/books',
+    params:{
+        //外号，获取对应数据
+        creator
+    }
+}).then(result =>{
+    // console.log(result);
+    const bookLiist = result.data.data;
+    // console.log(bookLiist);
+    //渲染数据
+    const htmlStr = bookLiist.map((item,index) => {
+      // const { author,bookname,publisher,id} = item;
+        return `
+        <tr>
+        <td>${index+ 1}</td>
+        <td>${item.bookname}</td>
+        <td>${item.author}</td>
+        <td>${item.publisher}</td>
+        <td data-id=${item.id}>
+          <span class="del">删除</span>
+          <span class="edit">编辑</span>
+        </td>
+      </tr>
+        `;
+    }).join('')
+    document.querySelector('.list').innerHTML = htmlStr 
+}).catch(error =>{
+      console.log(error);
+})
+  
+
+
+}
+
+//打开网页就要先调用一次
+getBooksList()
+
+
+// 目标2:实现图书的添加功能
+// 2.1 新增弹框=>显示和隐藏
+// 2.2 收集表单数据，并提交到服务器保存
+// 2.3 刷新图书列表
+
+//创建弹窗对象
+//2.新增图书
+
+    const addModalDom = document.querySelector('.add-modal');
+    const addModal = new bootstrap.Modal(addModalDom);
+    const addBtn = document.querySelector('.add-btn');
+
+    addBtn.addEventListener('click',()=>{
+      //手机表单数据，并提交到服务器保存
+      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 =>{
+
+        //添加成功后，重新渲染图书列表
+        getBooksList();
+        //重置表单
+        addForm.reset();
+        //隐藏弹框
+        addModal.hide();
+      })
+
+    })
+    //删除操作
+    document.querySelector('.list').addEventListener('click',e =>{
+       if (e.target.classList.contains('del')) {
+             const theId = e.target.parentNode.dataset.id 
+             //调用删除接口
+             axios({
+              url:`http://hmajax.itheima.net/api/books/${theId}`,
+              method : 'DELETE'
+             }).then(()=>{
+              getBooksList()
+             })
+       }
+
+    })
+
+   // 创建弹窗对象
+const editBox=document.querySelector('.edit-modal')   // 添加图书的弹窗对象
+const editmodal=new bootstrap.Modal(editBox)     // modal对象，可以控制addBox显示或隐藏
+// 获取要收集的表单对象
+const editForm=document.querySelector('.edit-form')
+// 保存按钮点击事件
+document.querySelector('.edit-btn').addEventListener('click',()=>{
+// 3.收集表单数据
+ const book=serialize(editForm,{hash:true,empty:true})
+   console.log(book);
+       // 4.调用接口提交数据
+  axios({
+        url:'http://hmajax.itheima.net/api/books',
+        method:'post',
+        data:{
+            ...book,
+            creator
+        }
+    }).then(reault=>{
+        console.log(reault);
+        // 隐藏弹窗
+        editmodal.hide()
+        // 清空表单项
+       editForm.reset()
+        // 成功的话，获取新数据并渲染
+        getBooksList()
+    })
+})
+document.querySelector('.list').addEventListener('click',(e)=>{
+    if (e.target.className==='edit') {
+        editmodal.show() //显示
+        //获取图书的id
+        const id=e.target.parentNode.dataset.id
+        //通过id调用接口，获取对应的图书数据，回显到表单
+        axios({
+            url:'https://hmajax.itheima.net/api/books/'+ id  //拼接字符串的形式
+
+        }).then(result=>{
+ //console.log(result.data.data);
+            const book=result.data.data;
+            const {id,author,bookname,publisher}=book
+            editForm.querySelector('.publisher').value=publisher;
+            editForm.querySelector('.bookname').value=bookname;
+            editForm.querySelector('.author').value=author;
+            editForm.querySelector('.id').value=id;
+
+        })
+
+    }
+})
+```
+
-- 
Gitee