From 63fa90bb737b526206f2cf4618eca5a484675fe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=83=9C=E6=9D=B0?= <2608607026@qq.com>
Date: Tue, 12 Dec 2023 14:46:52 +0000
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

Signed-off-by: 陈胜杰 <2608607026@qq.com>
---
 .../2023-12-12.md"                            | 160 ++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 "58\351\231\210\350\203\234\346\235\260/2023-12-12.md"

diff --git "a/58\351\231\210\350\203\234\346\235\260/2023-12-12.md" "b/58\351\231\210\350\203\234\346\235\260/2023-12-12.md"
new file mode 100644
index 0000000..828302e
--- /dev/null
+++ "b/58\351\231\210\350\203\234\346\235\260/2023-12-12.md"
@@ -0,0 +1,160 @@
+1.axios
+
+```js
+axios({
+    url: 'https://hmajax.itheima.net/api/city',
+    params: {
+        pname: '福建省'
+    }
+}).then(result => {
+    console.log(result)
+}).catch(error => {
+    console.log(error)
+})
+
+function axios(config) {
+    return new Promise((ok, error) => {
+        const xhr = new XMLHttpRequest();
+
+        let params = config.params ? new URLSearchParams(config.params).toString() : '';
+        const method = config.method || 'get';
+        const url = config.url +=`?${params}`;
+        xhr.open(method, url);
+
+        if (config.data) {
+            xhr.setRequestHeader('Content-Type', 'application/json');
+            const data = JSON.stringify(config.data);
+            xhr.send(data);
+        } else {
+            xhr.send();
+        }
+
+        xhr.addEventListener('loadend', function () {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                ok(JSON.parse(xhr.response))
+            } else {
+                error(new Error(xhr.response))
+            }
+        })
+    })
+}
+```
+
+2.图书管理系统
+
+```js
+const creator = 'cheng';
+const tbody = $('tbody')[0];
+
+function render() {
+    axios({
+        url: 'https://hmajax.itheima.net/api/books',
+        params: {
+            creator,
+        }
+    }).then(result => {
+        const data = result.data.data;
+        tbody.innerHTML =
+            data.map((item, index) => {
+                const {id, bookname, author, publisher} = item;
+                return `<tr>
+              <td>${index + 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('')
+
+    }).catch(error => {
+        console.log(error)
+    })
+}
+
+render();
+const addModal = $('.add-modal')[0];
+const newAddModal = new bootstrap.Modal(addModal)
+//添加里的保存单机事件
+$('.add-btn').click(() => {
+
+    const form = $('.add-form')[0];
+    const book = serialize(form, {hash: true, empty: true});
+
+    axios({
+        url: 'https://hmajax.itheima.net/api/books',
+        method: 'post',
+        data: {
+            creator,
+            ...book
+        }
+    }).then(() => {
+        form.reset();
+        newAddModal.hide();
+        render();
+    }).catch(error => {
+        console.log(error)
+    })
+})
+//删除单机事件
+
+tbody.addEventListener('click', e => {
+    const {className} = e.target;
+    const del = className === 'del';
+    const edit = className === 'edit'
+    if (del || edit) {
+        const id = e.target.parentNode.dataset.id;
+
+        if (del) {
+            if (!confirm('是否要删除')) {
+                return;
+            }
+            axios({
+                url: 'https://hmajax.itheima.net/api/books/' + id,
+                method: 'delete',
+            }).then(() => {
+                render();
+            }).catch(error => {
+                console.log(error)
+            })
+        }
+        //编辑事件
+        if (edit) {
+            const editModal = $('.edit-modal')[0];
+            const newModal = new bootstrap.Modal(editModal);
+            newModal.show();
+            const form = $('.edit-form')[0];
+            axios({
+                url: 'https://hmajax.itheima.net/api/books/' + id,
+            }).then(result => {
+                const {bookname,author,publisher}=result.data.data
+                $('.bookname')[1].value=bookname;
+                $('.author')[1].value=author;
+                $('.publisher')[1].value=publisher;
+            }).catch(error=>{
+                console.log(error)
+            })
+            $('.edit-btn')[0].addEventListener('click',()=>{
+
+                const book=serialize(form,{hash: true,empty: true});
+                axios({
+                    url:"https://hmajax.itheima.net/api/books/"+id,
+                    method:'put',
+                    data: {
+                        creator,
+                        ...book,
+                    }
+                }).then(()=>{
+                        newModal.hide();
+                        render();
+                    }).catch(error=>{
+                        console.log(error);
+                    })
+
+            })
+        }
+    }
+})
+```
\ No newline at end of file
-- 
Gitee