first commit

历届学生/zheng-yuqing/项目练习/上课项目/caipu/css/clear.css

@@ -0,0 +1,28 @@
+/* 清楚浏览器默认样式 */
+
+ul,li,p,h1,h2,h3,h4,h5,h6,body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: #eeeef3;
+    font-size: 0;
+}
+
+.content {
+    margin-top: 0.9rem;
+}
+
+a {
+    text-decoration: none;
+}
+
+li {
+    list-style: none;
+}
+
+input {
+    outline: none;
+    border: none;
+}

历届学生/zheng-yuqing/项目练习/上课项目/caipu/css/public.css

@@ -0,0 +1,13 @@
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.padd {
+    padding-left: 0.37rem;
+    padding-right: 0.41rem;
+}

历届学生/zheng-yuqing/项目练习/上课项目/caipu/js/ajax/index.js

@@ -0,0 +1,63 @@
+class AJAX {
+    constructor() {
+        this.baseUrl = config.checkBaseUrl();
+        this.http = new XMLHttpRequest();
+    }
+
+    /**
+     *
+     * @param {*object} parmas
+     */
+    get(parmas) {
+        return new Promise((success, error) => {
+            // 将data 参数转化为 ?key=value&key=value
+            var str = ""
+            for (const key in parmas.data) {
+                str += `&${key}=${parmas.data[key]}`
+            }
+            str = str.replace("&", "?")
+
+            this.http.open("GET", `${this.baseUrl}${parmas.url}${str}`);
+            this.http.send();
+
+            this.readyState(success, error)
+        })
+    }
+
+    post(parmas) {
+        this.http.open("POST", `${this.baseUrl}${parmas.url}`);
+        this.http.setRequestHeader('Content-type', 'application/json; charset="utf-8"');
+        this.http.send(JSON.stringify(parmas.data));
+
+        this.readyState(parmas.success, parmas.error)
+    }
+
+
+    put() { }
+    delete() { }
+
+    // 给 get post put delete 进行状态监听的封装
+    readyState(success, error) {
+        this.http.onreadystatechange = () => {
+            if (this.http.readyState == 4) {
+                if (this.http.status == 200) {
+                    var data = JSON.parse(this.http.response);
+                    switch (data.status) {
+                        case 200:
+                            success(data.result)
+                            break;
+                        case 404:
+                            alert(data.message)
+                            throw new Error(data.message)
+                            break;
+                    }
+                    // success(data)
+                } else {
+                    error(this.http)
+                }
+            }
+        }
+    }
+}
+
+var http = new AJAX();

历届学生/zheng-yuqing/项目练习/上课项目/caipu/js/config/index.js

@@ -0,0 +1,30 @@
+var config = {
+    devBaseUrl: "http://127.0.0.1:3000/api", // 开发阶段的请求基本地址
+    testBaseUrl: "http://127.0.0.1:3000/api/test", // 测试阶段的请求基本地址
+    prodBaseUrl: "http://127.0.0.1:3000/api/prod", // 上线阶段的请求基本地址
+
+    stage: "dev", // dev开发  test测试  prod上线
+    apiList: {
+        iclass: '/index/class',
+        hot: '/index/hot'
+    },
+
+    // 检查使用什么阶段的接口地址
+    checkBaseUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl
+                break;
+            case "test":
+                return this.testBaseUrl
+                break;
+
+            case "prod":
+                return this.prodBaseUrl
+                break;
+            default:
+                break;
+        }
+    }
+
+}

历届学生/zheng-yuqing/项目练习/上课项目/caipu/js/page/index.js

@@ -0,0 +1,16 @@
+class Index {
+    constructor () {
+        this.getIndexData()
+    }
+
+
+    async getIndexData() {
+       var res = await index.iclass({
+            type: 1,
+            page: 1
+        })
+        console.log(res)
+    }
+}
+
+new Index();

历届学生/zheng-yuqing/项目练习/上课项目/caipu/js/service/index.js

@@ -0,0 +1,18 @@
+class IndexService {
+
+     async hot(data) {
+        await http.get({
+            url: config.apiList.hot,
+            data: data
+        })
+    }
+
+    async iclass(data) {
+        return await http.get({
+            url: config.apiList.iclass,
+            data: data
+        })
+    }
+}
+
+var index = new IndexService()

历届学生/zheng-yuqing/项目练习/上课项目/caipu/js/service/笔记.txt

@@ -0,0 +1,7 @@
+请求中间层
+
+  作用？
+
+  [1,2,3,4,5]
+
+  [{id:1},{id:2},{},{}]

历届学生/zheng-yuqing/项目练习/上课项目/caipu/js/util/rem.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+    getRem(750, 100)
+};
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/zheng-yuqing/项目练习/上课项目/caipu/page/index.html

@@ -0,0 +1,25 @@
+<!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>
+    <script src="../js/util/rem.js"></script>
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/index.css">
+
+</head>
+
+<body>
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/util/index.js"></script>
+<script src="../js/page/index.js"></script>
+
+</html>

历届学生/zheng-yuqing/项目练习/上课项目/caipu/笔记.txt

@@ -0,0 +1,13 @@
+Promise:  是es6中新更新的方法
+
+  作用：用来把异步编程转为同步编程
+
+
+
+接口数据格式：
+
+  {
+    code: 201  // 状态码
+    result: [] // 数据
+    message: "恭喜，删除成功" // 操作的具体信息
+  }