From e4f9130d713d8affc0a88d6d44eafd0e12fbb306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BD=AD=E9=A1=BA?= <3024235926@qq.com>
Date: Tue, 3 Dec 2024 10:19:10 +0800
Subject: [PATCH 1/3] 1

---
 ...\344\271\246\347\256\241\347\220\206.html" | 233 ++++++++++++++++++
 1 file changed, 233 insertions(+)
 create mode 100644 "02 \345\275\255\351\241\272/20241202 ajax/\345\233\276\344\271\246\347\256\241\347\220\206.html"
diff --git "a/02 \345\275\255\351\241\272/20241202 ajax/\345\233\276\344\271\246\347\256\241\347\220\206.html" "b/02 \345\275\255\351\241\272/20241202 ajax/\345\233\276\344\271\246\347\256\241\347\220\206.html"
new file mode 100644
index 0000000..764049e
--- /dev/null
+++ "b/02 \345\275\255\351\241\272/20241202 ajax/\345\233\276\344\271\246\347\256\241\347\220\206.html"	
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<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: 600px;
+        
+    }
+    .li{
+        height: 80px;
+    }
+    span{
+        width: 300px;
+        float: right;
+    }
+</style>
+
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+</head>
+<body>
+    <div class="left">
+        <h1>图书列表</h1>
+        <ul>
+            <li class="li">获取中.... <a href="./books2.html?id=1111">修改</a></li>
+        </ul>
+    </div>
+
+    <div class="right">
+        <h2>添加图书</h2>
+        <ul>
+            <li>图书名称：<input type="text" name="bookname"></li>
+            <li>图书作者：<input type="text" name="author"></li>
+            <li>书出版社：<input type="text" name="publisher"></li>
+            <li>书创建者：<input type="text" name="creator"></li>
+            <li><button>提交</button></li>
+        </ul>
+
+      <!-- <script src="index.js"></script> -->
+
+    </div>
+    <script>
+        // 添加 ， 删除 ， 修改， 都要重新渲染页面，所以封装成一个函数
+        // 通过creator 渲染页面
+        function showData(creator){
+            // 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> <a href = ./books.html?id=${book.id} ">修改</a></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 提交这个对象
+//            axios.post('https://hmajax.itheima.net/api/books',user)
+//            .then((res)=>{
+//            //    console.log(res)
+//                alert(res.data.message)
+//                bookname.value=''
+//                author.value=''
+//                publisher.value=''
+//                creator.value=''
+//                // 添加后，要重新渲染
+//                showData('qq')
+//        })
+//            .catch()
+            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'){
+             //   console.log(e.target.dataset.id)
+                const id = e.target.dataset.id
+                //调用axios删除
+                deleteBookById(id)
+                // 重新渲染
+        //        showData('qq')
+            }
+        })
+
+       
+
+        // 根据ID删除图书的函数
+        function deleteBookById(id){
+        axios
+        .delete(`https://hmajax.itheima.net/api/books/${id}`)
+        .then((Response)=>{
+            console.log(Response.data.message)
+            // 重新渲染
+                showData('qq')
+        })
+        .catch((Response)=>{
+            console.log(Response)
+        })
+    }
+
+
+
+
+     //委托修改
+     ul.addEventListener('click',function(e){
+        if(e.target.tagName === 'BUTTON'){
+         //   console.log(e.target.dataset.id)
+            const id = e.target.dataset.id
+            //调用axios修改
+            selectBookById(id)
+
+            localStorage.setItem('id',id)
+            // 重新渲染
+    //        showData('qq')
+        }
+    })
+
+     // 根据ID获取图书的函数
+     function selectBookById(id){
+        axios
+        .get(`https://hmajax.itheima.net/api/books/${id}`)
+        .then((Response)=>{
+            console.log(Response.data.message)
+            // 重新渲染
+                showData('qq')
+        })
+        .catch((Response)=>{
+            console.log(Response)
+        })
+    }
+
+
+
+//       axios.get('https://hmajax.itheima.net/api/books?creator=qq').then((a)=>{
+//           console.log(a.data.data)
+//           const arr = a.data.data;
+//           document.querySelector('ul').innerHTML = arr.map((a)=>{
+//               return `<li>${e.bookname}</li>`
+//           }).join('')
+//       }).catch(function(){})
+
+
+        // 箭头函数用来代替匿名函数，用来回调函数时
+//       (a)=>{
+//           console.log(a.data.data)
+//           const arr = a.data.data;
+//           document.querySelector('ul').innerHTML = arr.map(function(e){
+//               return `<li>${e.title}</li>`
+//       }
+
+
+
+
+
+
+
+
+
+
+
+
+     // const xhr =  new XMLHttpRequest()
+     // 语法    axios.请求的方法('请求的地址',要传其它参数).then(function（响应的变量).catch()
+
+//     axios.get('http://127.0.0.1:5500/AJAX2/data.json1').then(function(){
+//        console.log(Response.data);
+//
+//     }).catch(function(Response){
+//        console.log('失败')
+//     })
+//
+//
+//
+//     //
+//     const user = {
+//        "name": "张三",
+//        "age":"18"
+//     }
+//     
+//     axios.post('http://www.a.com/addBook',user).then(function(){
+//        console.log('成功了');
+//     }).then(function(){
+//        console.log('失败了')
+//     }) 
+
+
+    </script>
+</body>
+</html>
-- 
Gitee


From 62ea58fb591e219a3768116dfc8e9b850dcc01e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BD=AD=E9=A1=BA?= <3024235926@qq.com>
Date: Tue, 3 Dec 2024 11:51:07 +0800
Subject: [PATCH 2/3] 1

---
 .../index.html"                               | 180 ++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 "02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html"

diff --git "a/02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html" "b/02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html"
new file mode 100644
index 0000000..99df9d8
--- /dev/null
+++ "b/02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html"	
@@ -0,0 +1,180 @@
+<!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 en = document.querySelector('.list')
+       console.log(Object.values(goodsList));
+       
+    goodsList.map((item)=>{
+      return  `<div class="item">
+        <img
+          src="${picture}"
+          alt=""
+        />
+        <p class="name">
+        ${name}
+          <span class="tag">【赠品】10优惠券</span>
+        </p>
+        <p class="spec">${spec}</p>
+        <p class="price">${price}</p>
+        <p class="count">${count}</p>
+        <p class="sub-total">${count*price}</p>
+      </div>`
+    }).join('')
+    </script>
+  </body>
+</html>
-- 
Gitee


From 4b112a3a03058b662eaf2d244cf54523e5291b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BD=AD=E9=A1=BA?= <3024235926@qq.com>
Date: Thu, 5 Dec 2024 00:08:37 +0800
Subject: [PATCH 3/3] 1

---
 .../index.html"                               | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git "a/02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html" "b/02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html"
index 99df9d8..af9b3cb 100644
--- "a/02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html"	
+++ "b/02 \345\275\255\351\241\272/20241203 \350\264\255\347\211\251\350\275\246/1124_\350\264\255\347\211\251\350\275\246/index.html"	
@@ -158,22 +158,29 @@
       ];
        const en = document.querySelector('.list')
        console.log(Object.values(goodsList));
+    en.innerHTML= goodsList.map (item=>{
+      const {picture,name,count,price,spec,gift}=item
        
-    goodsList.map((item)=>{
-      return  `<div class="item">
+       const spec1 = Object.values(spec).join('/')
+    const s = gift ? gift.split(',').map(item=> `<span class="tag">【赠品】${item}</span>`).join(''):''
+      return  `
+       <div class="item">
         <img
           src="${picture}"
           alt=""
         />
         <p class="name">
         ${name}
-          <span class="tag">【赠品】10优惠券</span>
+        ${s}
         </p>
-        <p class="spec">${spec}</p>
-        <p class="price">${price}</p>
-        <p class="count">${count}</p>
-        <p class="sub-total">${count*price}</p>
-      </div>`
+        <p class="spec">${spec1}</p>
+        <p class="price">${price.toFixed(2)}</p>
+        <p class="count">x${count}</p>
+        <p class="sub-total">${(count*price).toFixed(2)}</p>
+      </div>
+    </div>
+    <div class="total">
+      <div>合计：<span class="amount">${count*price}</span></div> `
     }).join('')
     </script>
   </body>
-- 
Gitee

