From 564713d669107a5de41da7768175e8adaedbf9fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=8E=E5=87=BD?= <3084917167@qq.com>
Date: Mon, 11 Dec 2023 23:34:59 +0000
Subject: [PATCH] =?UTF-8?q?02=20=E9=99=88=E6=98=8E=E5=87=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈明函 <3084917167@qq.com>
---
 .../1208\347\254\224\350\256\260.md"          | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 "02 \351\231\210\346\230\216\345\207\275/1208\347\254\224\350\256\260.md"

diff --git "a/02 \351\231\210\346\230\216\345\207\275/1208\347\254\224\350\256\260.md" "b/02 \351\231\210\346\230\216\345\207\275/1208\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..e4b9e24
--- /dev/null
+++ "b/02 \351\231\210\346\230\216\345\207\275/1208\347\254\224\350\256\260.md"	
@@ -0,0 +1,148 @@
+````javascript
+#  笔记：
+
+```
+// bootstrap对象
+const modal = new bootstrap.Modal(元素)
+// 显示的方法
+modal.show()
+// 关闭的方法
+modal.hide()
+
+confirm('提示框文案') // 弹出提示窗判断是否执行操作，返回true/false
+```
+
+作业：
+
+```
+/**
+ * 目标1：渲染图书列表
+ *  1.1 获取数据
+ *  1.2 渲染数据
+ */
+const list=document.querySelector('.list')
+const creator='会上树的猪'
+function render(){
+axios({
+    url:'https://hmajax.itheima.net/api/books',
+    params:{
+        creator
+    }
+ }).then(result=>{
+    console.log(result.data.data)
+    const test=result.data.data
+  
+    list.innerHTML= test.map((e,i)=>{
+        const{author,bookname,id,publisher}=e
+    return ` 
+    <tr>
+    <td>${i+1}</td>
+    <td>${bookname}</td>
+    <td>${author}</td>
+    <td>${publisher}</td>
+    <td>
+      <span class="del" data-id=${id}>删除</span>
+      <span class="edit"data-id=${id}>编辑</span>
+    </td>
+  </tr>`} 
+  ).join('')
+  
+   
+ })
+}
+render()
+
+//2.添加
+const add=document.querySelector('.add-modal')
+// const addm = new bootstrap.Modal(add)
+const addm = new bootstrap.Modal(add)
+
+    
+  
+    const abtn=document.querySelector('.add-btn')
+    abtn.addEventListener('click',()=>{
+        const form=document.querySelector('.add-form')
+        const book=serialize(form,{hash:true,empty:true})
+        axios({
+            url: 'http://hmajax.itheima.net/api/books',
+            method: 'POST',
+            data:{
+            ...book,
+            creator
+            }
+        }).then(result=>{
+            console.log(result)
+            render()
+            form.reset()
+            addm.hide()
+        })
+
+
+    })
+   
+//3.删除
+list.addEventListener('click',function(e){
+        if(e.target.className==='del'){
+           const id= e.target.dataset.id
+                console.log(e.target.dataset.id)
+        axios({
+            url: `https://hmajax.itheima.net/api/books/${id}`,
+            method:'DELETE'
+        }).then(result=>{
+            render()
+        })
+        }
+})
+//修改
+const edit=document.querySelector('.edit-modal')
+const editm = new bootstrap.Modal(edit)
+
+list.addEventListener('click',function(e){
+    if(e.target.className==='edit'){
+        editm.show()
+       const id= e.target.dataset.id
+            console.log(e.target.dataset.id)
+    axios({
+        url: `https://hmajax.itheima.net/api/books/${id}`,
+       
+    }).then(result=>{
+        console.log(result.data.data)
+        let re=result.data.data
+        const{author,bookname,id,publisher}=re
+        console.log(author)
+        const editForm=document.querySelector('.edit-form')
+       const bookName1= editForm.querySelector('[name=bookname]')
+       const author1= editForm.querySelector('[name=author]')
+       const publisher1= editForm.querySelector('[name=publisher]')
+    //    console.log(bookName1)
+       bookName1.value=bookname
+       author1.value=author
+       publisher1.value=publisher
+       
+      
+       const ebtn=document.querySelector('.edit-btn')
+       ebtn.addEventListener('click',function(e){
+       console.log(1)
+       const book=serialize(editForm,{hash:true,empty:true})
+       axios({
+           url:`https://hmajax.itheima.net/api/books/${id}`,
+           method:'put',
+           data:{
+           ...book,
+           creator
+           }
+       }).then(result=>{
+           console.log(result)
+           editm.hide()
+           render()
+       })
+       
+       })
+    })
+
+    }
+
+})
+
+````
+
-- 
Gitee