From 386843e3a012a79d08e2338167101a37b5c3eea8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=98=89=E9=B9=8F?= <1796111977@qq.com>
Date: Thu, 5 Dec 2024 07:34:23 +0800
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

---
 .../20241202/\344\275\234\344\270\232.md"     | 129 +++++++++++
 .../20241203/\344\275\234\344\270\232.md"     | 202 ++++++++++++++++++
 2 files changed, 331 insertions(+)
 create mode 100644 "06 \345\274\240\345\230\211\351\271\217/20241202/\344\275\234\344\270\232.md"
 create mode 100644 "06 \345\274\240\345\230\211\351\271\217/20241203/\344\275\234\344\270\232.md"
diff --git "a/06 \345\274\240\345\230\211\351\271\217/20241202/\344\275\234\344\270\232.md" "b/06 \345\274\240\345\230\211\351\271\217/20241202/\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..2dbed2c
--- /dev/null
+++ "b/06 \345\274\240\345\230\211\351\271\217/20241202/\344\275\234\344\270\232.md"	
@@ -0,0 +1,129 @@
+```javascript
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .left {
+            width: 500px;
+            float: left;
+            background-color: lightblue;
+        }
+
+        .right {
+            margin-left: 20px;
+            width: 500px;
+            float: left;
+            background-color: pink;
+        }
+        span{
+            width: 80px;
+            float: right;
+        }
+        li{
+            list-style:none;
+            line-height: 30px;
+            height: 30px;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+
+<body>
+    <div class="left">
+        <h1>图书列表</h1>
+        <ul>
+            <li>获取中... <a href="./books2.html?id=1111">修改</a> </li>
+        </ul>
+    </div>
+
+    <div class="right">
+        <h2>添加图书</h2>
+        <ul>
+            <li>图书名称：<input type="text" name="bookname" id=""></li>
+            <li>图书作者：<input type="text" name="author" id=""></li>
+            <li>书出版社：<input type="text" name="publisher" id=""></li>
+            <li>书创建者：<input type="text" name="creator" id=""></li>
+            <li><button>提交</button></li>
+        </ul>
+    </div>
+    <script>
+        // 1。添加、修改、删除、都要重新渲染页面，所以封装成一个函数
+        function showData(creator) {
+            axios
+                .get('https://hmajax.itheima.net/api/books?creator='+creator)
+                .then((res) => {
+                    // console.log(a.data.data);
+                    const arr = res.data.data;
+                    document.querySelector('ul').innerHTML = arr.map((book) => {
+                        return `<li>编号：${book.id} , 书名：${book.bookname}<span><button data-id='${book.id}'>删除</button></span></li>`
+                    }).join('')
+
+                }).catch(function () { })
+        }
+        showData('qq');
+
+        //  添加模块
+        const button = document.querySelector('button')
+        const bookname = document.querySelector('[name="bookname"]')
+        const author = document.querySelector('[name="author"]')
+        const publisher = document.querySelector('[name="publisher"]')
+        const creator = document.querySelector('[name="creator"]')
+
+        button.addEventListener('click',function(){
+            const book ={
+            "bookname": bookname.value,
+            "author": author.value,
+            "publisher": publisher.value,
+            "creator": creator.value
+            }
+             // 利用axios提交这个对象
+            addBook(book)
+        })
+         function addBook(book){
+             // 利用axios提交这个对象
+             axios.post('https://hmajax.itheima.net/api/books',book)
+            .then((res)=>{
+                console.log(res);
+                alert(res.data.message)
+                bookname.value=''
+                author.value=''
+                publisher.value=''
+                creator.value=''
+                showData('qq')
+            })
+            .catch()
+         }
+
+        // 删除模块
+        const ul=document.querySelector('.left ul')
+        // 委托
+        ul.addEventListener('click',function(e){
+            if(e.target.tagName==='BUTTON'){
+                const id=e.target.dataset.id;
+                deleBook(id)
+
+            }
+        })
+
+        function deleBook(id){
+            axios
+            .delete(`https://hmajax.itheima.net/api/books/${id}`)
+            .then((response)=>{
+                alert(response.data.message)
+                showData('qq')
+            })
+            .catch((response)=>{
+                console.log(response);
+                
+            })
+        }
+
+    </script>
+</body>
+
+</html>
+```
+
diff --git "a/06 \345\274\240\345\230\211\351\271\217/20241203/\344\275\234\344\270\232.md" "b/06 \345\274\240\345\230\211\351\271\217/20241203/\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..0f5ce76
--- /dev/null
+++ "b/06 \345\274\240\345\230\211\351\271\217/20241203/\344\275\234\344\270\232.md"	
@@ -0,0 +1,202 @@
+```javascript
+<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 list = document.querySelector('.list')
+    // 1. 遍历
+    list.innerHTML = goodsList.map(goods => {
+      // 解构对象
+      const {name, price, picture, count, spec, gift} = goods;
+      // 处理规格，拼接成文本
+      const text = Object.values(spec).join('/');
+      //  处理奖品
+      // split 是分割符，可使字符串变数组
+      const giftText = gift ? gift.split(',').map(item => 
+        ` <span class="tag">【赠品】${item}</span>`
+      ).join('') : '';
+
+      // 2. 返回处理好的格式
+      return `<div class="item">
+        <img
+          src="${picture}"
+          alt=""
+        />
+        <p class="name">
+        ${name}
+        ${giftText}
+        </p>
+        <p class="spec">${text}</p>
+        <p class="price">${price.toFixed(2)}</p>
+        <p class="count">x${count}</p>
+        <p class="sub-total">${count * price.toFixed(2)}</p>
+      </div>
+      `;
+
+    }).join('')
+    //   3.合计
+    // reudce用于累加求和
+    document.querySelector('.amount').innerHTML = goodsList.reduce((prev,items)=>{
+      return prev + item.price * item.count;
+    },0).toFixed(2)
+  </script>
+</body>
+
+</html>
+```
+
-- 
Gitee

