first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/菜谱练习/ajax.js

@@ -0,0 +1,44 @@
+class Ajax {
+
+    constructor() {
+        this.ajax = new XMLHttpRequest
+
+    }
+
+    //Promise方法
+    get(params) {
+        return new Promise((success, error) => {
+            var str = ""
+            for (const key in params.data) {
+                //console.log("key: ", key);
+                str += `&${key}=${params.data[key]}`
+            }
+            str = str.replace("&", "?")
+            console.log(`${params.url}${str}`);
+            this.ajax.open("GET", `${params.url}${str}`)
+            this.ajax.send();
+            this.readystatechange(success, error)
+        })
+
+    }
+
+    post() { }
+
+    readystatechange(success, error) {
+        this.ajax.onreadystatechange = () => {
+            if (this.ajax.readyState == 4) {
+                if (this.ajax.status == 200) {
+                    var data = JSON.parse(this.ajax.responseText)
+                    //console.log(data);
+                    success(data)
+                } else {
+                    error(this.ajax)
+                }
+
+
+            }
+        }
+    }
+}
+
+var ajax = new Ajax()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/菜谱练习/index.html

@@ -0,0 +1,20 @@
+<!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 class="more">下一页</button>
+</body>
+<script src="./ajax.js"></script>
+<script src="./utils.js"></script>
+<script src="./index.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/菜谱练习/index.js

@@ -0,0 +1,39 @@
+class Index {
+    constructor() {
+        this.page = 1
+        this.getClassList()
+        this.bindEvent()
+    }
+
+    bindEvent() {
+        click(".more", () => {
+            console.log(1);
+            this.page += 1
+            this.getClassList()
+        })
+    }
+    async getClassList() {
+        var res = await ajax.get({
+            url: 'http://127.0.0.1:3000/api/index/class',
+            data: {
+                type: 1,
+                page: this.page
+            },
+            header: {
+                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+            },
+        })
+        var data = res.result.items
+        data.forEach(v => {
+            $("ul").innerHTML += `
+            <li>
+               <a href="./info.html?url=${v.path}">
+                 <img src="${v.img}" alt="">
+                 <p>${v.title}</p>
+               </a>
+            </li>`
+        });
+        //console.log(res.result.items);
+    }
+}
+new Index()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/菜谱练习/info.html

@@ -0,0 +1,22 @@
+<!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>
+    <div class="main">
+        <img src="" alt="">
+        <p class="posttime"></p>
+        <p class="title"></p>
+    </div>
+</body>
+<script src="./ajax.js"></script>
+<script src="./utils.js"></script>
+<script src="./info.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/菜谱练习/info.js

@@ -0,0 +1,20 @@
+class info {
+    constructor() {
+        this.getInfo()
+    }
+
+    async getInfo() {
+        var res = await ajax.get({
+            url: 'http://127.0.0.1:3000/api/index/info',
+            data: {
+                url: query("url")//("url")是index.js<a href>里面的url 如果里面的url是aaa 这里也要是aaa
+            },
+        });
+        $(".main img").src = res.result.backImg
+        $(".main .posttime").text(res.result.posttime)
+        $(".main .title").text(res.result.title)
+
+        console.log(res);
+    }
+}
+new info()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/菜谱练习/utils.js

@@ -0,0 +1,39 @@
+class Util {
+
+    inject() {
+        Element.prototype.remove = function (removeClassName) {
+            this.classList.remove(removeClassName);
+        }
+        Element.prototype.add = function (addClassName) {
+            this.classList.add(addClassName);
+        }
+        HTMLElement.prototype.text = function (text) {
+            this.innerText = text
+        }
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]); return null;
+    }
+
+
+    click(className, callback) {
+        $(className).onclick = () => {
+            callback()
+        }
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+}
+
+var { $, _, click, inject, query } = new Util()
+
+inject()