first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.3/ajax练习.htm
+++ b/历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.3/ajax练习.htm
@@ -0,0 +1,56 @@
+<!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>
+</head>
+
+<body>
+    <ul>
+
+    </ul>
+</body>
+<script>
+
+    // 拿出手机， 创建一个ajax 类实例
+    var xhr = new XMLHttpRequest()
+
+    // 设置拨号的号码  设置请求方式和请求的地址
+    xhr.open("GET", "http://127.0.0.1:3000/api/json/index")
+
+
+    // 拨打电话 发送请求
+    xhr.send()
+
+
+    //  状态监听
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                var data = JSON.parse(xhr.response)
+                console.log(data.result.list);
+
+                data.result.list.forEach(v => {
+                    document.querySelector("ul").innerHTML +=
+                        ` <li>
+                          <div class="title">${v.title}</div>
+                          <img src="${v.img_src}" alt="">
+                      </li>`
+                });
+            }else{
+                alert("当前网络不佳，请稍后再试！")
+            }
+
+        }
+    }
+
+
+
+
+
+</script>
+
+</html>
--- a/历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.3/tiaozhuan.html
+++ b/历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.3/tiaozhuan.html
@@ -0,0 +1,70 @@
+<!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>
+</head>
+<style>
+    img{
+        width: 100px;
+    }
+</style>
+<body>
+    <div class="img">
+        
+    </div>
+</body>
+<script>
+    
+
+    function getData() {
+        var xhr = new XMLHttpRequest()
+        xhr.open("GET", `http://127.0.0.1:3000/api/json/info?id=${query("id")}&quantity=${query("sl")}`)
+        xhr.send()
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState == 4) {
+                if (xhr.status == 200) {
+                    var data = JSON.parse(xhr.response)
+                    rendList(data)
+                } else {
+                    alert("当前网络不佳，请稍后再试！")
+                }
+
+            }
+        }
+
+    }
+
+    function  rendList(list){
+        console.log(list);
+        list.result.forEach(v => {
+            $(".img").innerHTML += `
+            <img src="${v}" alt="">
+            `
+
+        });
+    }
+
+    getData() 
+   
+
+    function query(name) {
+        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        let r = window.location.search.substr(1).match(reg);
+        if (r != null) {
+            return unescape(r[2]);
+        };
+        return null;
+    }
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+</script>
+</html>
--- a/历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.3/小案例.html
+++ b/历届学生/front-end-team-10/项目练习/学生项目/薛涛/3.3/小案例.html
@@ -0,0 +1,72 @@
+<!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>
+</head>
+
+<body>
+    <ul>
+
+    </ul>
+    <button>下一页</button>
+</body>
+<script>
+
+    var page = 1
+
+    function getData() {
+        var xhr = new XMLHttpRequest()
+        xhr.open("GET", `http://127.0.0.1:3000/api/json/mechanismList?id=82&page=${page}`)
+        xhr.send()
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState == 4) {
+                if (xhr.status == 200) {
+                    var data = JSON.parse(xhr.response)
+                    rendList(data)
+                } else {
+                    alert("当前网络不佳，请稍后再试！")
+                }
+
+            }
+        }
+
+    }
+    function rendList(list) {
+        console.log(list.result.data);
+        list.result.data.forEach(v => {
+            $("ul").innerHTML += `
+                      <li>
+                        <a href="./tiaozhuan.html?id=${v.id}&sl=${v.total}">
+                            <div class="title">${v.title}</div>
+                            <img src="${v.preview}" alt="">
+                            
+                            </a>
+                      </li>`
+
+        });
+    }
+
+
+    $("button").onclick = () => {
+        page += 1
+        getData()
+    }
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className)
+    }
+
+    getData()
+
+</script>
+
+</html>