From 4bcd1e350991767807ef1518d91fccc4ba3d537e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E5=85=88=E4=BC=98?= <1967671450@qq.com>
Date: Tue, 3 Dec 2024 13:23:43 +0800
Subject: [PATCH 1/2] test

---
 .../20241202 AJAX/index.html"                 | 208 ++++++++++++++++++
 .../20241202 AJAX/update.html"                | 184 ++++++++++++++++
 2 files changed, 392 insertions(+)
 create mode 100644 "\345\255\231\345\205\210\344\274\230/20241202 AJAX/index.html"
 create mode 100644 "\345\255\231\345\205\210\344\274\230/20241202 AJAX/update.html"
diff --git "a/\345\255\231\345\205\210\344\274\230/20241202 AJAX/index.html" "b/\345\255\231\345\205\210\344\274\230/20241202 AJAX/index.html"
new file mode 100644
index 0000000..3717d27
--- /dev/null
+++ "b/\345\255\231\345\205\210\344\274\230/20241202 AJAX/index.html"	
@@ -0,0 +1,208 @@
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>axios使用</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: center;
+            /* 水平居中 */
+            align-items: center;
+            /* 垂直居中 */
+        }
+
+        .module {
+            background-color: #f0f0f0;
+            padding: 10px;
+            border: 1px solid #ccc;
+        }
+
+        .module button,
+        .module a {
+            margin: 10px;
+        }
+
+        /* 仅对第一个模块应用右边距 */
+        .module:first-child {
+            margin-right: 200px;
+        }
+
+        .module {
+            width: 500px;
+            background-color: #f0f0f0;
+            padding: 50px;
+            margin: 20px auto;
+            text-align: center;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .module h1 {
+            margin-bottom: 20px;
+        }
+
+        .module form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .module label {
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        .module input {
+            width: 100%;
+            padding: 10px;
+            margin-top: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .module input[type="submit"] {
+            width: 100%;
+            padding: 10px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        .module input[type="submit"]:hover {
+            background-color: #0056b3;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="module">
+            <h1>查询模块</h1>
+            <div>
+                <ul>
+                    <li>加载中···</li>
+                </ul>
+            </div>
+        </div>
+        <div class="module">
+            <h1>新增模块</h1>
+            <form action="/submit_book" method="POST">
+                <label for="bookname">图书名称:</label><br>
+                <input type="text" id="bookname" name="bookname" required><br>
+
+                <label for="author">作者:</label><br>
+                <input type="text" id="author" name="author" required><br>
+
+                <label for="publisher">出版社:</label><br>
+                <input type="text" id="publisher" name="publisher" required><br>
+
+                <label for="creator">创建者:</label><br>
+                <input type="text" id="creator" name="creator" required value="cai"><br>
+
+                <input type="submit" value="提交">
+            </form>
+        </div>
+    </div>
+
+    <script>
+        // 获取标签
+        const showModule = document.querySelector('.module').firstElementChild.nextElementSibling.firstElementChild;
+        const insertModule = document.querySelectorAll('.module')[1];
+        const form = insertModule.firstElementChild.nextElementSibling;
+
+        showBook('cai')
+
+        // 查询书本
+        function showBook(creator) {
+            const config = {
+                method: 'get',
+                url: `https://hmajax.itheima.net/api/books?creator=${creator}`,
+            };
+            axios(config)
+                .then(function (response) {
+                    // 正常
+                    const books = response.data.data
+
+                    showModule.innerHTML = books.map(function (book) {
+                        return `<li>书名：${book.bookname}，作者：${book.author}，出版社：${book.publisher}<button data-id=${book.id}>删除</button><a href="./update.html?id=${book.id}&creator=${creator}">修改</a></li>`;
+                    }).join('');
+                })
+                .catch(function (error) {
+                    // 报错的
+                    console.log(error);
+                });
+        }
+
+        // 新增书本
+        function insertBook() {
+            const childrens = form.children;
+            const book = {};
+            for (let i = 0; i < childrens.length; i++) {
+                if (childrens[i].name) {
+                    book[childrens[i].name] = childrens[i].value;
+                }
+            }
+
+            // 把书对象给接口
+            const config = {
+                method: 'post',
+                url: 'https://hmajax.itheima.net/api/books',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                data: book
+            };
+
+            axios(config)
+                .then(function (response) {
+                    showBook('cai');
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+
+        }
+
+        // 给每个按钮一个点击事件
+        showModule.addEventListener('click', function (e) {
+            if (e.target.dataset.id) {
+                deleteBook(e.target.dataset.id);
+            }
+        })
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            insertBook();
+            this.reset();
+        })
+
+        // 删除书本
+        function deleteBook(id) {
+            var config = {
+                method: 'delete',
+                url: 'https://hmajax.itheima.net/api/books/' + id,
+                headers: {}
+            };
+
+            axios(config)
+                .then(function (response) {
+                    showBook('cai');
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
+```
\ No newline at end of file
diff --git "a/\345\255\231\345\205\210\344\274\230/20241202 AJAX/update.html" "b/\345\255\231\345\205\210\344\274\230/20241202 AJAX/update.html"
new file mode 100644
index 0000000..4f77c5d
--- /dev/null
+++ "b/\345\255\231\345\205\210\344\274\230/20241202 AJAX/update.html"	
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <!DOCTYPE html>
+    <html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>修改模块</title>
+        <style>
+            .module {
+                width: 500px;
+                background-color: #f0f0f0;
+                padding: 50px;
+                margin: 20px auto;
+                text-align: center;
+                border-radius: 8px;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .module h1 {
+                margin-bottom: 20px;
+            }
+
+            .module form {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .module label {
+                font-weight: bold;
+                margin-top: 10px;
+            }
+
+            .module input {
+                width: 100%;
+                padding: 10px;
+                margin-top: 5px;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+                box-sizing: border-box;
+            }
+
+            .module input[type="submit"] {
+                width: 100%;
+                padding: 10px;
+                background-color: #007BFF;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                margin-top: 20px;
+            }
+
+            .module input[type="submit"]:hover {
+                background-color: #0056b3;
+            }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    </head>
+
+    <body>
+        <div class="module">
+            <h1>修改模块</h1>
+            <form action="/submit_book" method="POST">
+                <label for="bookname">图书名称:</label><br>
+                <input type="text" id="bookname" name="bookname" required><br>
+
+                <label for="author">作者:</label><br>
+                <input type="text" id="author" name="author" required><br>
+
+                <label for="publisher">出版社:</label><br>
+                <input type="text" id="publisher" name="publisher" required><br>
+
+                <label for="creator">创建者:</label><br>
+                <input type="text" id="creator" name="creator" readonly><br>
+
+                <input type="submit" value="修改">
+            </form>
+        </div>
+
+        <script>
+            // 获取标签
+            const form = document.querySelector('.module').firstElementChild.nextElementSibling;
+            // 获取input        
+            const childrens = form.children;
+            const inputs = [];
+            for (let i = 0; i < childrens.length; i++) {
+                if (childrens[i].name) {
+                    inputs.push(childrens[i]);
+                }
+            }
+            // 获取 id 和 creator
+            const url = new URLSearchParams(location.search)
+            const id = url.get('id');
+            const creator = url.get('creator');
+
+            showBook();
+
+            // 查询书本
+            function showBook() {
+                const config = {
+                    method: 'get',
+                    url: `https://hmajax.itheima.net/api/books?creator=${creator}`,
+                };
+                axios(config)
+                    .then(function (response) {
+                        // 正常
+                        const books = response.data.data
+                        // 书本对象
+                        let book;
+
+                        for (let i = 0; i < books.length; i++) {
+                            if (books[i].id == id) {
+                                book = books[i];
+                                break;
+                            }
+                        }
+
+                        // 开始给input插入具体的值了
+                        inputs[0].value = book.bookname;
+                        inputs[1].value = book.author;
+                        inputs[2].value = book.publisher;
+                        inputs[3].value = creator;
+                    })
+                    .catch(function (error) {
+                        // 报错的
+                        console.log(error);
+                    });
+            }
+
+
+            // 修改书本
+            function updateBook() {
+                // 书本对象
+                const book = {};
+                for (let i = 0; i < childrens.length; i++) {
+                    if (childrens[i].name) {
+                        book[childrens[i].name] = childrens[i].value;
+                    }
+                }
+
+                var config = {
+                    method: 'put',
+                    url: `https://hmajax.itheima.net/api/books/${id}`,
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    data: book
+                };
+
+                axios(config)
+                    .then(function (response) {
+                        // 回到上一个页面
+                        location.href = './index.html';
+                    })
+                    .catch(function (error) {
+                        console.log(error);
+                    });
+            }
+
+            form.addEventListener('submit', function (e) {
+                e.preventDefault();
+
+                // 用当前input里面的valu来修改
+                updateBook();
+            })
+        </script>
+    </body>
+
+    </html>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee


From df5d51b4abacc468efbe6f492b0ba078c18e1beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E5=85=88=E4=BC=98?= <1967671450@qq.com>
Date: Thu, 5 Dec 2024 13:24:22 +0800
Subject: [PATCH 2/2] test

---
 .../index.html"                               | 200 ++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 "\345\255\231\345\205\210\344\274\230/20241203 \350\247\243\346\236\204/1124_\350\264\255\347\211\251\350\275\246/index.html"

diff --git "a/\345\255\231\345\205\210\344\274\230/20241203 \350\247\243\346\236\204/1124_\350\264\255\347\211\251\350\275\246/index.html" "b/\345\255\231\345\205\210\344\274\230/20241203 \350\247\243\346\236\204/1124_\350\264\255\347\211\251\350\275\246/index.html"
new file mode 100644
index 0000000..0751b4e
--- /dev/null
+++ "b/\345\255\231\345\205\210\344\274\230/20241203 \350\247\243\346\236\204/1124_\350\264\255\347\211\251\350\275\246/index.html"	
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .list {
+      width: 990px;
+      margin: 100px auto 0;
+    }
+
+    .item {
+      padding: 15px;
+      transition: all 0.5s;
+      display: flex;
+      border-top: 1px solid #e4e4e4;
+    }
+
+    .item:nth-child(4n) {
+      margin-left: 0;
+    }
+
+    .item:hover {
+      cursor: pointer;
+      background-color: #f5f5f5;
+    }
+
+    .item img {
+      width: 80px;
+      height: 80px;
+      margin-right: 10px;
+    }
+
+    .item .name {
+      font-size: 18px;
+      margin-right: 10px;
+      color: #333;
+      flex: 2;
+    }
+
+    .item .name .tag {
+      display: block;
+      padding: 2px;
+      font-size: 12px;
+      color: #999;
+    }
+
+    .item .price,
+    .item .sub-total {
+      font-size: 18px;
+      color: firebrick;
+      flex: 1;
+    }
+
+    .item .price::before,
+    .item .sub-total::before,
+    .amount::before {
+      content: "¥";
+      font-size: 12px;
+    }
+
+    .item .spec {
+      flex: 2;
+      color: #888;
+      font-size: 14px;
+    }
+
+    .item .count {
+      flex: 1;
+      color: #aaa;
+    }
+
+    .total {
+      width: 990px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: flex-end;
+      border-top: 1px solid #e4e4e4;
+      padding: 20px;
+    }
+
+    .total .amount {
+      font-size: 18px;
+      color: firebrick;
+      font-weight: bold;
+      margin-right: 50px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="list">
+    <!-- <div class="item">
+        <img
+          src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg"
+          alt=""
+        />
+        <p class="name">
+          称心如意手摇咖啡磨豆机咖啡豆研磨机
+          <span class="tag">【赠品】10优惠券</span>
+        </p>
+        <p class="spec">白色/10寸</p>
+        <p class="price">289.90</p>
+        <p class="count">x2</p>
+        <p class="sub-total">579.80</p>
+      </div> -->
+  </div>
+  <div class="total">
+    <div>合计：<span class="amount">1000.00</span></div>
+  </div>
+  <script>
+    // 数据
+    const goodsList = [
+      {
+        id: "4001172",
+        name: "称心如意手摇咖啡磨豆机咖啡豆研磨机",
+        price: 289.9,
+        picture:
+          "https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg",
+        count: 2,
+        spec: { color: "白色" },
+      },
+      {
+        id: "4001009",
+        name: "竹制干泡茶盘正方形沥水茶台品茶盘",
+        price: 109.8,
+        picture:
+          "https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png",
+        count: 3,
+        spec: { size: "40cm*40cm", color: "黑色" },
+      },
+      {
+        id: "4001874",
+        name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
+        price: 488,
+        picture:
+          "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
+        count: 1,
+        spec: { color: "青色", sum: "一大四小" },
+      },
+      {
+        id: "4001649",
+        name: "大师监制龙泉青瓷茶叶罐",
+        price: 139,
+        picture:
+          "https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png",
+        count: 8,
+        spec: { size: "小号", color: "紫色" },
+        gift: "50g茶叶,清洗球,礼盒",
+      },
+    ];
+
+    const newGoods = goodsList.map(function (item) {
+      const spec = Object.values(item.spec).join('/')
+      let gift = ''
+      if (item.gift) {
+        gift = item.gift.split(',').map(function (item) {
+          return `
+                          <span class="tag">【赠品】${item}</span>
+                `
+        }).join('')
+      } else {
+        gift = ''
+      }
+      return `
+      <div class="item">
+        <img
+          src="${item.picture}"
+          alt=""
+        />
+        <p class="name">
+          ${item.name}
+          ${gift}
+        </p>
+        <p class="spec">${spec}</p>
+        <p class="price">${(item.price).toFixed(2)}</p>
+        <p class="count">X${item.count}</p>
+        <p class="sub-total">${(item.price * item.count).toFixed(2)}</p>
+      </div>
+      `
+    })
+    const body = document.querySelector('.list')
+    body.innerHTML = newGoods.join('')
+
+    const amount = document.querySelector('.amount')
+    const sum = goodsList.reduce((old, now) => old + now.price * now.count, 0)
+    amount.innerText = `${sum.toFixed(2)}`
+  </script>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

