From d54e3fa53735ca7f7380d4b3501c4d960f5f3399 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E4=BA=A8=E8=80=80?= <2640788668@qq.com>
Date: Mon, 11 Dec 2023 21:58:16 +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

---
 .../HTTP \345\215\217\350\256\256.md"         | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 "21 \345\215\242\344\272\250\350\200\200/HTTP \345\215\217\350\256\256.md"

diff --git "a/21 \345\215\242\344\272\250\350\200\200/HTTP \345\215\217\350\256\256.md" "b/21 \345\215\242\344\272\250\350\200\200/HTTP \345\215\217\350\256\256.md"
new file mode 100644
index 0000000..bcb98ea
--- /dev/null
+++ "b/21 \345\215\242\344\272\250\350\200\200/HTTP \345\215\217\350\256\256.md"	
@@ -0,0 +1,120 @@
+## HTTP 协议
+
+规定了浏览器发送及服务器返回内容的==格式==
+
+**HTTP协议 - 请求报文**：浏览器发送给服务器的内容
+
+组成：请求行、请求头、空行、请求体
+
+**HTTP协议 - 响应报文**：服务器按照 HTTP 协议要求的==格式==，返回给浏览器的==内容==
+
+组成：
+
+- ==响应行（状态行）==：协议、==HTTP 响应状态码==、状态信息
+- ==响应头==：以键值对的格式携带的附加信息，比如：==Content-Type==
+- 空行：分隔响应头，空行之后的是服务器返回的资源
+- ==响应体==：返回的资源
+
+#### 作业
+
+```js
+  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
+  <script src="./lib/form-serialize.js"></script>
+  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
+  <!-- 核心逻辑 -->
+  <script src="./js/index.js"></script>
+  <script>
+    function render() {
+      const list = document.querySelector('.list')
+      axios({
+        url: 'https://hmajax.itheima.net/api/books',
+        params: {
+          creator: "卢亨耀是帅哥"
+        }
+      })
+        .then(result => {
+          //console.log(result.data.data);
+          const bookList = result.data.data
+          list.innerHTML = bookList.map((item, i) => {
+            const { id, bookname, author, publisher } = item
+
+            return `
+          <tr data-id=${id}>
+          <td>${i + 1}</td>
+          <td>${bookname}</td>
+          <td>${author}</td>
+          <td>${publisher}</td>
+          <td>
+            <span class="del">删除</span>
+            <span class="edit">编辑</span>
+          </td>
+        </tr>`
+          }).join('')
+        })
+        .catch()
+    }
+    render()
+
+
+    const form = document.querySelector('.add-form')
+    const add = document.querySelector('.add-modal')
+    const addBs = new bootstrap.Modal(add)
+    document.querySelector('.add-btn').onclick = () => {
+      const bookData = serialize(form, { hash: true, empty: true })
+      if (Object.values(bookData).some((item) => item === '')) return alert('书籍信息不能为空哦');
+      axios({
+        method: 'post',
+        url: 'https://hmajax.itheima.net/api/books',
+        data: {
+          ...bookData,
+          creator: "卢亨耀是帅哥"
+        }
+      }).then((result) => {
+        addBs.hide()
+        render()
+        form.reset()
+      })
+    }
+
+    const list = document.querySelector('.list')
+    const editForm = document.querySelector('.edit-form')
+    const edit = document.querySelector('.edit-modal')
+    const editBs = new bootstrap.Modal(edit)
+    list.onclick = e => {
+      if (e.target.className === 'edit') {
+        editBs.show()
+        document.querySelector('.edit-btn').onclick = () => {
+          const editData = serialize(editForm, { hash: true, empty: true })
+          editData.id= e.target.parentNode.parentNode.dataset.id
+          const {bookname,author,publisher} = editData
+           if (Object.values(editData).some((item) => item === '')) return alert('书籍信息不能为空哦');
+          axios({
+            method: 'put',
+            url: 'https://hmajax.itheima.net/api/books/' + editData.id,
+            data: {
+              bookname,
+              author,
+              publisher,
+              creator: "卢亨耀是帅哥"
+            }
+          })
+            .then(result => {editBs.hide(); render();})
+            .catch((error) => {
+              console.log(error);
+            })
+        }
+      }
+      if (e.target.className === 'del') {
+        if(!confirm('确定要删除吗？')) return;
+        axios({
+          method: 'delete',
+            url: 'https://hmajax.itheima.net/api/books/' + e.target.parentNode.parentNode.dataset.id,
+        })
+        .then(result=>{
+          render()
+        })
+      }
+    }
+  </script>
+```
+
-- 
Gitee