From 6799ef4142d8360e1686e6f1d896b7f197fc6bf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=A2=A6=E6=A2=A6?= <3195337478@qq.com>
Date: Mon, 11 Dec 2023 15:39:21 +0000
Subject: [PATCH] =?UTF-8?q?=E9=99=88=E6=A2=A6=E6=A2=A6=E7=9A=84=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈梦梦 <3195337478@qq.com>
---
 ...76\344\271\246\347\256\241\347\220\206.md" | 184 ++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 "01 \351\231\210\346\242\246\346\242\246/20231207Ajax \345\233\276\344\271\246\347\256\241\347\220\206.md"

diff --git "a/01 \351\231\210\346\242\246\346\242\246/20231207Ajax \345\233\276\344\271\246\347\256\241\347\220\206.md" "b/01 \351\231\210\346\242\246\346\242\246/20231207Ajax \345\233\276\344\271\246\347\256\241\347\220\206.md"
new file mode 100644
index 0000000..727dfbd
--- /dev/null
+++ "b/01 \351\231\210\346\242\246\346\242\246/20231207Ajax \345\233\276\344\271\246\347\256\241\347\220\206.md"	
@@ -0,0 +1,184 @@
+
+
+
+//通用的父类
+const tbody = document.querySelector('.list')
+
+
+//通用外号
+const creater = '梦梦';
+
+//封装一个先获取列表数据再渲染数据的函数
+function getBookListAndShow (){
+
+    //获取数据
+axios({
+    url :'https://hmajax.itheima.net/api/books',
+    params:{
+       // creator:'梦梦'
+       //creator:creater
+       creater
+    }
+}).then(result =>{
+   // console.log(result.data.data);
+   //渲染数据 删除添加那些都i要渲染 所以给他打包封装起来
+   const trHtml =  result.data.data.map((item,i) =>{
+    //每次都要加item 这给他结构一下
+    const {id,author,bookname,publisher} = item;
+        return `
+        <tr>
+          <td>${i+1}</td>
+          <td>${author}</td>
+          <td>${bookname}</td>
+          <td>${publisher}</td>
+          <td data-id=${id}>
+            <span class="del">删除</span>
+            <span class="edit">编辑</span>
+          </td>
+        </tr>
+     `;
+      //到这步就要给这些进行填充 去找父类
+    }).join('')//数组变字符串 用join  再塞进去
+    tbody.innerHTML = trHtml;
+    console.log(trHtml);
+})
+}
+//每打开网页就要调用一次
+getBookListAndShow();
+
+
+/*
+目标2:实现图书的添加功能
+2.1 按钮显示和隐藏 保存按钮点击事件 关闭这个弹窗，采集表单数据
+2.2 将数据用axios调用接口 提交服务器
+2.3 保存按钮点击事件 成交提交就关闭弹窗
+2.4 重新获取列表并渲染
+*/
+const form = document.querySelector('.add-form');
+//为了控制的这个弹窗先获取
+const addModalBox =   document.querySelector('.add-model')
+const addModel = document.querySelector(addModalBox)
+
+//给保存点击事件
+document.querySelector('.add-btn').addEventListener('click',()=>{
+    //采集数据
+    //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
+    // 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
+    // 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
+    //.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，
+    //比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些
+    const book =  serializer(from,{hash:true,empty:true})//只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。
+    //如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。
+    console.log(book);
+
+    //2.2 将数据用axios调用接口 提交服务器
+axios({
+    url:'https://hmajax.itheima.net/api/books',
+    method:'post',
+    data:{
+        creater,
+        ...book
+    }
+}).then (result=>{
+// console.log(result);
+    //清空表单
+    from.reset()
+    //关闭弹窗
+    addModel.hide()
+    //重新获取列表并且渲染
+    getBookListAndShow()
+})
+
+})
+
+
+
+/*
+目标3：删除图书
+3.1 给删除点击事件
+3.2 获取要删除的id
+3.3 通过id调用接口删除服务器中的数据
+3.4 成功就获取重新获取新列表并且渲染
+*/ 
+
+///将点击事件委托给tbody
+tbody.addEventListener('click',(e)=>{
+    console.log(e.target);
+    //两种方法可以确定点到的删除按钮
+    //className === 'del'
+    //classList.contains('del') 包含的意思
+    if(e.target.className === 'del'){
+        console.log('你删除了图书');
+    }
+  //  3.2 获取要删除的id
+  console.log(e.target.parentNode.dataset.id);
+  const id = e.target.parentNode.dataset.id
+  //3.3 通过id调用接口删除服务器中的数据
+  axios({
+    //url:`https://hmajax.itheima.net/api/books/`+id
+    url:`https://hmajax.itheima.net/api/books/${id}`,
+    method:'delete'
+  }).then(result=>{
+    //console.log(result);
+    //3.4 成功就获取重新获取新列表并且渲染
+    getBookListAndShow()
+  })
+
+})
+
+/**
+ * 目标4：编辑图书
+ * 4.1 编辑弹框 ->显示和隐藏
+ * 4.2 获取当前编辑图书数据 -> 回显到编辑表单中
+ * 4.3 提交保存修改，刷新列表
+ */
+// 4.1 编辑弹框 显示 和隐藏
+const editDom = document.querySelector('.edit-modal')
+const editModal = new bootstrap.Modal(editDom)
+
+// 编辑元素 点击   弹框显示
+document.querySelector('.list').addEventListener('click', e => {
+    // 判断点击是否为编辑元素
+    if (e.target.classList.contains('edit')) {
+        // 4.2 获取当前编辑图书数据->回显到编辑表单中
+        const theId = e.target.parentNode.dataset.id
+        axios({
+            url: `http://hmajax.itheima.net/api/books/${theId}`
+        }).then(result => {
+            const bookObj = result.data.data
+            // document.querySelector('.edit-form .bookname').value = bookObj.bookname
+            // document.querySelector('.edit-form .author').value = bookObj.author
+            // 数据对象“属性”和标签“类名”一致
+            // 遍历数据对象，使用属性去获取对应的标签，快速赋值
+            const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
+            keys.forEach(key => {
+                document.querySelector(`.edit-form .${key}`).value = bookObj[key]
+            })
+        })
+        editModal.show()
+    }
+})
+
+// 修改按钮->点击->隐藏弹框
+document.querySelector('.edit-btn').addEventListener('click', () => {
+    // 4.3 提交保存修改，并刷新列表
+    const editForm = document.querySelector('.edit-form')
+    // console.log(editForm);
+    const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
+    // 保存正在编辑的图书id，隐藏起来：无需让用户修改
+    // <input type="hidden" class="id" name="id" value="84783">
+    axios({
+        url: `http://hmajax.itheima.net/api/books/${id}`,
+        method: 'PUT',
+        data: {
+            creator,
+            ...book
+        }
+    }).then((result) => {
+        console.log(result);
+        // 修改成功以后，重新获取并刷新列表
+        getBooksList()
+        // 隐藏弹框
+        editModal.hide()
+    })
+})
\ No newline at end of file
-- 
Gitee