From 4b5d6e6ddfe4be95df427cb49406a3ab51a151a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=8E=E5=81=A5?= <2161737470@qq.com>
Date: Mon, 11 Dec 2023 21:51:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=8D=81=E4=BA=8C=E6=AC=A1?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231210 HTTP\345\215\217\350\256\256.md" | 198 ++++++++++++++++++
 1 file changed, 198 insertions(+)
 create mode 100644 "04 \346\235\216\346\230\216\345\201\245/20231210 HTTP\345\215\217\350\256\256.md"

diff --git "a/04 \346\235\216\346\230\216\345\201\245/20231210 HTTP\345\215\217\350\256\256.md" "b/04 \346\235\216\346\230\216\345\201\245/20231210 HTTP\345\215\217\350\256\256.md"
new file mode 100644
index 0000000..f8f06a3
--- /dev/null
+++ "b/04 \346\235\216\346\230\216\345\201\245/20231210 HTTP\345\215\217\350\256\256.md"	
@@ -0,0 +1,198 @@
+## HTTP 协议
+
+规定了浏览器发送及服务器返回内容的==格式==
+
+**HTTP协议 - 请求报文**：浏览器发送给服务器的内容
+
+组成：请求行、请求头、空行、请求体
+
+**HTTP协议 - 响应报文**：服务器按照 HTTP 协议要求的==格式==，返回给浏览器的==内容==
+
+组成：
+
+- ==响应行（状态行）==：协议、==HTTP 响应状态码==、状态信息
+- ==响应头==：以键值对的格式携带的附加信息，比如：==Content-Type==
+- 空行：分隔响应头，空行之后的是服务器返回的资源
+- ==响应体==：返回的资源
+
+## 作业
+
+~~~ js
+/**
+  *  目标一： 获取接口数据并渲染
+  *  1.1 定义自己的外号
+  *  1.2 通过自己的外号，发送异步请求，获取数据
+  *  1.3 将获取的数据渲染
+ */
+
+// 获取标签元素
+const tbody = document.querySelector('tbody')
+
+// 1.1 定义自己的外号
+const creator = '墨下皆是心酸'
+
+// 因为，添加、删除、编辑后都要渲染一遍，所有分装一个渲染函数
+function getBooksList() {
+    // 1.2 通过自己的外号，发送异步请求，获取数据
+    axios({
+        url: 'https://hmajax.itheima.net/api/books',
+        params: {
+            creator
+        }
+    }).then(result => {
+        // 1.3 将获取的数据渲染
+        // console.log(result.data.data);
+        const list = result.data.data
+        tbody.innerHTML = list.map((item, i) => {
+            // 解构数据
+            const { id, bookname, author, publisher } = item
+            // console.log(id, bookname, author, publisher);
+            return `
+        <tr>
+            <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>
+        </tr>
+      `
+        }).join('')
+    })
+}
+getBooksList()
+
+
+/**
+ *  目标二：添加图书
+ *  2.1 获取添加弹框d对象
+ *  2.2 给保存按钮添加点击事件，收集表单信息，隐藏弹框
+ *  2.3 通过获取的表单内容，发送异步请求
+ *  2.4 清空表单，刷新图书列表
+*/
+
+// 2.1 获取 添加弹框 对象
+const addModalDom = document.querySelector('.add-modal')
+const addModal = new bootstrap.Modal(addModalDom)
+
+// 2.2 给保存按钮添加点击事件，收集表单信息，隐藏弹框
+document.querySelector('.add-btn').addEventListener('click', () => {
+    // 获取添加弹框中的表单对象
+    const addForm = document.querySelector('.add-form')
+    // console.log(addForm);
+    // 使用表单插件，获取表单信息
+    const objBook = serialize(addForm, { hash: true, empty: true })
+    // console.log(objBook);
+    // 2.3 通过获取的表单内容，发送异步请求
+    axios({
+        url: "https://hmajax.itheima.net/api/books",
+        method: 'post',
+        data: {
+            creator,
+            ...objBook
+        }
+    }).then(result => {
+        // 2.4 清空表单，刷新图书列表
+        // console.log(result);
+        // 刷新图书列表
+        getBooksList()
+        // 隐藏 添加弹框
+        addModal.hide()
+        // 清空表单
+        addForm.reset()
+    })
+})
+
+/**
+ *  目标三：删除图书
+ *  3.1 给 tbody 添加点击事件（事件委托）
+ *  3.2 通过自定义属性，向接口发送异步请求，删除图书
+ *  3.3 刷新图书列表
+ */
+
+tbody.addEventListener('click', e => {
+
+    // 判断点击的是不是删除
+    if (e.target.className === 'del') {
+        // 是否删除弹框（提高数据安全性）
+        if (!confirm('你确定要删除吗？')) {
+            return
+        }
+        // console.log('你点击的是删除'); 
+        // 获得父级身上的自定义属性
+        const id = e.target.parentNode.dataset.id
+
+        // 3.2 通过自定义属性，向接口发送异步请求，删除图书
+        axios({
+            url: 'https://hmajax.itheima.net/api/books/' + id,
+            method: 'delete'
+        }).then(result => {
+            // 3.3 刷新图书列表
+            getBooksList()
+        })
+    }
+})
+
+/**
+ *  目标四：修改图书
+ *  4.1 给 tbody 添加点击事件（事件委托），显示弹框
+ *  4.2 通过 id 发送异步请求，获取当前图书的信息，回显在表单上
+ *  4.3 点击 修改 将修改后的数据提交给异步请求，隐藏弹框，刷新表单页面
+ */
+
+// 获取 编辑弹框对象
+const editModalDOM = document.querySelector('.edit-modal')
+const editModal = new bootstrap.Modal(editModalDOM)
+// 4.1 给 tbody 添加点击事件（事件委托），显示弹框
+tbody.addEventListener('click', e => {
+    // 判断点击的是不是编辑
+    if (e.target.className === 'edit') {
+        // console.log('你点击的是编辑');
+        // 获得父级身上的自定义属性
+        const id = e.target.parentNode.dataset.id
+        // 4.2 通过 id 发送异步请求，获取当前图书的信息，回显在表单上
+        axios({
+            url: 'https://hmajax.itheima.net/api/books/' + id,
+        }).then(result => {
+            // console.log(result.data.data);
+            // 因为，获取到的数据的 key 名刚好是每个表单的 类名
+            // 所以，可以先获取响应数据中的所有 key，遍历回显
+            const bookInfo = result.data.data
+            const keys = Object.keys(bookInfo)
+            // console.log(keys);
+            keys.forEach(key => {
+                document.querySelector(`.edit-form .${key}`).value = bookInfo[key]
+            })
+            // 显示弹框
+            editModal.show()
+        })
+    }
+})
+
+// 获取编辑弹框中的表单对象
+const editForm = document.querySelector('.edit-form')
+// 4.3 点击 修改 将修改后的数据提交给异步请求，隐藏弹框，刷新表单页面
+document.querySelector('.edit-btn').addEventListener('click', () => {
+    // 使用插件获取表单信息,并解构
+    const objBook = serialize(editForm, { hash: true, empty: true })
+    // console.log(objBook);
+    // 将修改后的数据提交给异步请求
+    axios({
+        url: 'https://hmajax.itheima.net/api/books/' + objBook.id,
+        method: 'put',
+        data: {
+            creator,
+            ...objBook
+        }
+    }).then(result => {
+        // console.log(result);
+        // 隐藏弹框
+        editModal.hide()
+        // 刷新图书列表
+        getBooksList()
+    })
+})
+~~~
+
-- 
Gitee