first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/css/clear.css

@@ -0,0 +1,41 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li,
+p {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-size: 0;
+}
+
+li {
+    list-style: none;
+}
+
+input {
+    border: none;
+    outline: none;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    color: #333;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+img {
+    width: 100%;
+}

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/css/edit.css

@@ -0,0 +1,23 @@
+.title {
+    padding: 0 15px;
+    font-size: 16px;
+    font-weight: 400;
+    padding-top: 20px;
+    margin-bottom: 10px;
+}
+
+.menu_list {
+    padding: 0 15px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.menu_list li {
+    padding: 3px 10px;
+    font-size: 14px;
+    background: var(--themeColor);
+    margin-right: 10px;
+    color: #fff;
+    border-radius: 20px;
+    margin-bottom: 7px;
+}

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/css/index.css

@@ -0,0 +1,105 @@
+.header {
+    position: fixed;
+    width: 100%;
+    height: 1.6rem;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+}
+
+.header .header_logo {
+    background: var(--themeColor);
+    height: 0.88rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+}
+
+.header .header_logo i {
+    font-size: 0.45rem;
+    color: var(--whiteColor);
+}
+
+.header .header_logo .search {
+    flex: 1;
+    background: var(--whiteColor);
+    height: 0.6rem;
+    border-radius: 0.6rem;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.header .header_logo .search span {
+    font-size: var(--fontSize12);
+    color: var(--textColor);
+}
+
+.header .header_logo .search i {
+    color: var(--textColor) !important;
+    font-size: 0.26rem !important;
+    margin-right: 0.1rem;
+    padding-top: 0.02rem;
+    margin-left: 0.26rem;
+}
+
+.header_menu {
+    height: 0.72rem;
+    display: flex;
+    align-items: center;
+    background: #fe7fa2;
+}
+
+.header_menu a {
+    color: #fff;
+    text-decoration: none;
+    width: 0.8rem;
+    height: 0.72rem;
+    text-align: center;
+    line-height: 0.72rem;
+}
+
+.header_menu ul {
+    display: flex;
+    flex: 1;
+    overflow-x: scroll;
+    padding-left: 0.3rem;
+}
+
+.header_menu ul li {
+    font-size: 0.26rem;
+    margin-right: 0.26rem;
+    color: #d3d2d2;
+    flex-shrink: 0;
+}
+
+.header_menu ul .active {
+    color: var(--whiteColor) !important;
+}
+
+.content {
+    margin-top: 1.6rem;
+    margin-bottom: 1rem;
+}
+
+
+.swiper-container {
+    width: 100%;
+}
+
+.content {
+    margin-top: 1.6rem;
+    margin-bottom: 1rem;
+}
+
+.swiper {
+    width: 100%;
+}
+
+.swiper-slide {
+    height: calc(100vh - 1.6rem - 1rem);
+    overflow-y: scroll;
+}

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/css/my.css

@@ -0,0 +1,46 @@
+.my_top {
+    font-size: 20px;
+    height: 200px;
+    width: 100%;
+    background-color: #fe7fa2;
+    color: aliceblue;
+}
+
+.my_top i {
+    color: aliceblue;
+    font-size: 70px;
+    position: absolute;
+    left: 152.6px;
+    line-height: 200px;
+}
+
+.wode {
+    position: absolute;
+    left: 167.6px;
+    top: 135px;
+
+}
+
+ul {
+    font-size: 20px;
+    margin-top: 5px;
+    color: #868181;
+}
+
+li {
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.my_list {
+    width: 100%;
+    margin-left: 5px;
+}
+
+li i {
+    height: 20px;
+    width: 20px;
+    margin-right: 5px;
+    line-height: 26.4px;
+}

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/css/public.css

@@ -0,0 +1,147 @@
+:root {
+    --themeColor: #fb7299;
+    --whiteColor: #fff;
+    --blackColor: #000;
+    --textColor: #999;
+    --fontSize12: 0.24rem;
+    --fontSize13: 0.26rem;
+    --fontSize14: 0.28rem;
+    --fontSize15: 0.3rem;
+    --fontSize16: 0.32rem;
+    --fontSize17: 0.34rem;
+    --fontSize18: 0.36rem;
+    --fontSize19: 0.38rem;
+    --fontSize20: 0.4rem;
+    --fontSize21: 0.42rem;
+}
+
+
+
+.footer {
+    justify-content: space-around;
+    display: flex;
+    height: 1rem;
+    align-items: center;
+    position: fixed;
+    border-top: 0.02rem solid #e2e2e2;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    background: var(--whiteColor);
+}
+
+.footer li {
+    text-align: center;
+}
+
+.footer li p {
+    font-size: 0.24rem;
+    margin-top: 0.04rem;
+}
+
+.footer .active a {
+    color: var(--themeColor);
+}
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.pub-header {
+    height: 0.9rem;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    background: var(--themeColor);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.pub-header i {
+    font-size: 0.4rem;
+}
+
+.pub-header .text {
+    font-size: 0.36rem;
+    flex: 1;
+    margin-left: 0.28rem;
+}
+
+.content {
+    margin-top: 1rem;
+}
+
+.list {
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.list .item {
+    width: 48%;
+    flex-shrink: 0;
+    margin-bottom: 0.24rem;
+}
+
+.list .item_top {
+    position: relative;
+}
+
+.list .item_top img {}
+
+.list .item_top span {
+    bottom: 0.1rem;
+    right: 0.16rem;
+    position: absolute;
+    font-size: 0.24rem;
+    background: var(--themeColor);
+    color: #fff;
+    padding: 0.02rem 0.12rem;
+    border-radius: 0.16rem;
+}
+
+.list .item_text {}
+
+.list .item_text .title {
+    font-size: 0.34rem;
+    font-weight: 400;
+    margin-top: 0.2rem;
+}
+
+.list .item_text .model {
+    font-size: 0.28rem;
+    color: #bdb7b7;
+}
+
+.list .item_text .source {
+    font-size: 0.28rem;
+    color: #bdb7b7;
+}
+
+.list .item_tag {
+    margin-top: 0.1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.list .item_tag a {
+    font-size: 0.24rem;
+    flex-shrink: 0;
+    padding: 0.08rem 0.18rem;
+    background: var(--themeColor);
+    margin-right: 0.1rem;
+    color: #fff;
+    border-radius: 0.2rem;
+    margin-bottom: 0.1rem;
+}

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

@@ -0,0 +1,63 @@
+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", `${config.checkUrl()}${params.url}${str}`);
+            this.ajax.send();
+            this.readystatechange(success, error)
+        })
+
+    }
+
+    post() { }
+
+    readystatechange(success, error) {
+        this.ajax.onreadystatechange = () => {
+            // 4：ajax状态码
+            if (this.ajax.readyState == 4) {
+                // 200：http状态码
+                if (this.ajax.status == 200) {
+                    var data = JSON.parse(this.ajax.responseText)
+                    //console.log(data);
+                    success(this.checkStatus(data))
+                } else {
+                    error(this.ajax)
+                }
+
+
+            }
+        }
+    }
+
+    checkStatus(data) {
+        switch (data.status) {
+            case 200://是num类型200 写200   是字符串"200" 写"200" 
+                return data.result
+                break;
+            // 200、400 是后端状态码（status）可以随便定义数字 
+            case 404:
+                alert(data.msg);
+                // throw是让浏览器抛出一个错误
+                // new Error是新建一个错误信息
+                // 抛出一个新的错误信息 会把浏览器运行打断 不会再运行
+                throw new Error(data.msg)
+                break;
+            default:
+                break;
+        }
+    }
+}
+

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/config/index.js

@@ -0,0 +1,40 @@
+var config = {
+    // 基地址
+    devBaseUrl: 'http://127.0.0.1:3000/api/json/', // 开发阶段
+    testBaseUrl: 'http://127.0.0.1:3000/api/test', // 测试阶段
+    prodBaseUrl: 'http://172.20.10.4:3000/api/json', // 上线阶段
+
+    stage: 'dev', //dev    test    prod 
+
+    apiList: {//把接口短地址放在这里
+        index: '/index',
+        info: '/info',
+        ClassList: '/class',
+        ClassListDetails: '/classList',
+    },
+
+    // 底部导航条数据 可以增加删除
+    footerList: [
+        { title: '首页', icon: 'icon-home', url: 'index.html' },
+        { title: '机构', icon: 'icon-jigou', url: 'mechanism.html' },
+        { title: '模特', icon: 'icon-me', url: 'model.html' },
+        { title: '我的', icon: 'icon-wo', url: 'my.html' },
+    ],
+
+    checkUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl
+                break;
+            case "test":
+                return this.testBaseUrl
+                break;
+            case "prod":
+                return this.prodBaseUrl
+                break;
+
+            default:
+                break;
+        }
+    }
+}

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/collect.js

@@ -0,0 +1,9 @@
+class Collect {
+    constructor() {
+        header("我的收藏")
+    }
+    like() {
+        localStorage.setItem("like", "")
+    }
+}
+new Collect()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/edit.js

@@ -0,0 +1,74 @@
+class Edit {
+    constructor() {
+        header("分类编辑")
+        // 从本地取出数据
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+        this.renderPrincipal()
+        this.renderAdditional()
+    }
+
+    // 渲染已选菜单
+    renderPrincipal() {
+        // 把title渲染到已选菜单
+        this.principal.forEach(v => {
+            $(".principal").html(`
+               <li>${v.title}</li>
+            `)
+        });
+        this.principalClick()
+    }
+    // 已选菜单点击事件
+    principalClick() {
+        var self = this
+        click(_(".principal li"), function () {
+            if (this.index != 0) {
+
+                // 向未选标签追加一个数据
+                self.additional.push(self.principal[this.index])
+                // 删除一个已选标签
+                var deleteAItem = self.principal.splice(this.index, 1)
+
+                // 提取数据转化为字符串
+                localStorage.setItem("principal", JSON.stringify(self.principal))
+                localStorage.setItem("additional", JSON.stringify(self.additional))
+
+                $(".additional").html(`
+                <li>${deleteAItem[0].title}</li>
+            `)
+                self.additionalClick()
+                $(".principal").removeChild(this)
+                self.principalClick()
+            }
+        })
+    }
+
+    // 渲染未选菜单
+    renderAdditional() {
+        this.additional.forEach(v => {
+            $(".additional").html(`
+               <li>${v.title}</li>
+            `)
+        });
+        this.additionalClick()
+    }
+
+    additionalClick() {
+        var self = this
+        click(_(".additional li"), function () {
+            self.principal.push(self.additional[this.index])
+            var deleteAItem = self.additional.splice(this.index, 1)
+
+            localStorage.setItem("principal", JSON.stringify(self.principal))
+            localStorage.setItem("additional", JSON.stringify(self.additional))
+
+            $(".principal").html(`
+            <li>${deleteAItem[0].title}</li>
+        `)
+            self.principalClick();
+            $(".additional").removeChild(this)
+            self.additionalClick()
+        })
+    }
+}
+new Edit()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/index.js

@@ -0,0 +1,143 @@
+
+class Index {
+    constructor() {
+        this.index = 0
+        // 全局变量
+        this.principal = []
+        footer()//每个页面都要调用
+        this.getClassList()
+    }
+
+
+    async getClassList() {
+        var self = this;
+        if (localStorage.getItem("principal") == null) {
+            // 调用sever里的indexsever中的ClassList方法
+            var res = await indexSever.ClassList()
+            console.log(res);
+            this.principal = res.principal
+            localStorage.setItem("principal", JSON.stringify(this.principal))
+            localStorage.setItem("additional", JSON.stringify(res.additional))
+        } else {
+            this.principal = JSON.parse(localStorage.getItem("principal"))
+        }
+
+        // 把数据principal循环放在首页上 渲染页面
+        this.principal.forEach((v, i) => {
+            $(".header_menu ul").html(`
+             // 默认首页激活
+             <li class="${i == 0 ? 'active' : ''}">${v.title}</li>`)
+            $(".page_wrapper").html(`
+            <div class="swiper-slide">//这个div相当于li
+                  <div class="list">
+                  </div>             
+            </div>`)
+
+            _(".swiper-wrapper .swiper-slide").forEach(v => {
+                v.onscroll = () => {
+                    const { clientHeight, scrollHeight, scrollTop } = v;
+                    // console.log(clientHeight, scrollHeight, scrollTop);
+                    const distance = scrollHeight - scrollTop - clientHeight;
+                    if (distance <= 1) {
+                        console.log("到底部了");
+                        // 首页
+                        if (this.index == 0) {
+                            this.getIndex()
+                        } else {
+                            this.principal[this.index].page += 1
+                            if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                                this.GetClassListDetails("more")
+                            } else {
+                                console.log("已经没有数据了！！！");
+                            }
+                        }
+                    }
+                }
+            })
+        });
+
+        click($('.header_menu a'), function () {
+            console.log(this);
+        })
+        click(_(".header_menu ul li"), function () {
+            self.changeActive(this.index)
+        })
+
+        // _(".header_menu ul li").forEach()
+        this.getIndex()
+        this.initPage()
+    }
+
+    //除首页外的分类接口
+    async GetClassListDetails(type = "click") {
+        var getData = async () => {
+            var res = await indexSever.ClassListDetails({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id,
+            })
+
+            this.principal[this.index].total_page = res.total_page
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ];
+
+            item(_(".swiper-slide .list")[this.index], res.data)
+
+            console.log(res);
+        }
+
+        if (type == "click") {
+            if (this.principal[this.index].id != -1) {
+                if (this.principal[this.index].content.length == 0) {
+                    getData()
+                }
+            }
+        } else {
+            getData()
+        }
+
+    }
+
+    changeActive(index) {
+        this.index = index
+        _(".header_menu ul li").forEach(v => v.remove("active"))
+        _(".header_menu ul li")[index].add("active")
+        // 轮播图滑动
+        this.mySwiper.slideTo(index)
+    }
+
+    // 请求的首页数据
+    async getIndex() {
+        // 调用sever里的indexsever中的index方法
+        var res = await indexSever.index();//sever数据回返回到这里
+        console.log(res);
+        // 首页总的数据（把里面的所有对象取出来变成一个新数组）
+        this.principal[this.index].content = [
+            // 把最开始20条变成对象
+            ...this.principal[this.index].content,
+            // 追加数据也变成对象   
+            ...res.list//list是存数据的地方
+        ]
+        console.log(this.principal[this.index].content);
+        item(_(".swiper-slide .list")[this.index], res.list)
+    }
+
+    //轮播图
+    initPage() {
+        var self = this;
+        this.mySwiper = new Swiper('.swiper-container', {
+            direction: 'horizontal',
+            on: {
+                slideNextTransitionEnd: function () {
+                    self.changeActive(this.activeIndex)
+                    self.GetClassListDetails()
+                    console.log(this.activeIndex);
+                }
+            }
+        })
+    }
+
+}
+new Index()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/info.js

@@ -0,0 +1,94 @@
+class Info {
+    constructor() {
+        header("详情", `<i id="collection" class="iconfont icon-xin"></i>`)
+        this.getInfo();
+        this.Like()
+    }
+
+
+    /**
+        * 对收藏数组的localStorage中进行操作
+        */
+    //    存数据
+    setLike(id) {
+        const like = this.getLike()
+        if (!!like && Array.isArray(like)) {
+            like.push(id)
+            localStorage.setItem("like", JSON.stringify(like))
+        } else {
+            localStorage.setItem("like", JSON.stringify([id]))
+        }
+    }
+    // 读取数据
+    getLike() {
+        const like = JSON.parse(localStorage.getItem("like"))
+        if (!!like && Array.isArray(like)) {
+            return like
+        }
+        return []
+    }
+    // 删除数据
+    removeLinke(id) {
+        let like = this.getLike()
+        like = like.filter(v => v !== id)
+        localStorage.setItem("like", JSON.stringify(like))
+    }
+
+    /**
+     * 根据本地存储的数据判断当前详情是否已被收藏
+     * 如果已经收藏则改变样式
+     */
+    changeLikeStyle() {
+        const collectionDom = $("#collection")
+        // 读取id参数
+        const id = query("id")
+        const like = this.getLike()
+        // 如果id=-1 那么为空 没有收藏 否则已收藏
+        if (like.indexOf(id) === -1) {
+            collectionDom.remove("icon-aixin")
+            collectionDom.add("icon-xin")
+        } else {
+            collectionDom.remove("icon-xin")
+            collectionDom.add("icon-aixin")
+        }
+    }
+
+    /**
+     * 根据本地存储的数据判断当前详情
+     * 如果已有数据则删除数据 对应效果 取消收藏
+     * 如果没有数据则添加  添加收藏
+     */
+    onLinke() {
+        const id = query("id")
+        const like = this.getLike()
+        // 如果id=-1 那么为空 没有数据存数据 否则删除数据
+        if (like.indexOf(id) === -1) {
+            this.setLike(id)
+            this.changeLikeStyle()
+        } else {
+            this.removeLinke(id)
+            this.changeLikeStyle()
+        }
+    }
+
+    Like() {
+        const collectionDom = $("#collection")
+        this.changeLikeStyle()
+        click(collectionDom, () => {
+            this.onLinke()
+        })
+    }
+
+
+    async getInfo() {
+        var res = await indexSever.info({
+            id: query("id"),
+            quantity: query("total")
+        });
+
+        res.forEach(v => {
+            $(".content").html(`<img src="${v}" alt="">`)
+        });
+    }
+}
+new Info();

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/mechanism.js

@@ -0,0 +1,6 @@
+class Mechanism {
+    constructor() {
+        footer()
+    }
+}
+new Mechanism()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/model.js

@@ -0,0 +1,6 @@
+class Model {
+    constructor() {
+        footer()
+    }
+}
+new Model()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/my.js

@@ -0,0 +1,6 @@
+class My {
+    constructor() {
+        footer()
+    }
+}
+new My()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/page/tag.js

@@ -0,0 +1,26 @@
+
+class Model {
+    constructor() {
+        this.page = 1
+        header("分类")
+        this.tag = []
+        this.getTagList()
+    }
+
+    async getTagList() {
+        var res = await indexSever.ClassListDetails({
+            page: this.page,
+            id: query("id")
+        })
+        item($(".tag"), res.data)
+
+        this.tag.content = [
+            ...this.tag,
+            ...res.data
+        ];
+
+    }
+
+
+}
+new Model()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/sever/index.js

@@ -0,0 +1,65 @@
+// 首页接口
+class IndexSever {
+    // index接口封装
+    async index(data = {}) {
+        var ajax = new Ajax()
+        var res = await ajax.get({
+            url: config.apiList.index,
+            // data是由页面传过来的 当没有data时，data可以默认为空
+            data: data
+        })
+        ajax = null;
+        return res
+    }
+
+    // class接口封装
+    async ClassList(data = {}) {
+        // 定义一个变量 先对数据进行保存
+        var res = await (new Ajax()).get({
+            url: config.apiList.ClassList,
+            data: data
+        })
+
+        // 中间可以对数据进行处理
+        res.principal.unshift({//增加一个首页 
+            //unshift往数组前面追加 push往数组后面追加
+            id: -1,
+            page: 1,
+            title: "首页",
+        })
+        // 给每个li增加一个content 把各自的数据存到content里面
+        res.principal.forEach(v => {
+            v.content = []
+            v.page = 1
+            v.total_page = 0
+        });
+
+        res.additional.forEach(v => {
+            v.content = []
+            v.page = 1
+            v.total_page = 0
+        });
+
+        // 最后返回数据
+        return res
+    }
+
+    // classlist接口封装
+    async ClassListDetails(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.ClassListDetails,
+            data: data
+        })
+    }
+
+    // info接口封装
+    async info(data = {}) {
+        return await (new Ajax()).get({
+            url: config.apiList.info,
+            data: data,
+        });
+    }
+
+}
+// 定义一个变量保存new 
+var indexSever = new IndexSever()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/util/index.js

@@ -0,0 +1,137 @@
+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
+        }
+        HTMLElement.prototype.html = function (text) {
+            this.innerHTML += text;
+        }
+    }
+
+    header(title = " ", icon) {
+        $("body").html(`
+           <div class="pub-header">
+               <i class="iconfont icon-back1"></i>
+               <div class="text">${title}</div>
+              //${icon}
+           </div>
+        `)
+
+        click($(".icon-back1"), function () {
+            history.back()
+        })
+    }
+
+
+
+    item(father, data) {
+        data.forEach(v => {
+            father.html(`
+            <div class="item">
+                <a href="./info.html?id=${v.id}&total=${v.total || v.shuliang}">
+                    <div class="item_top">
+                         <img src="${v.img_src || v.preview}"
+                         alt="">
+                         <span>${v.shuliang || v.total}</span>
+                    </div>
+                    <div class="item_text">
+                         <div class="title ellipsis">${v.title}</div>
+                         <div class="model ellipsis">模特：${v.user || v.renwulist[0].name}</div>
+                         <div class="source ellipsis">${v.source || v.jigoulist[0].name}</div>
+                    </div>
+                </a>
+                <div class="item_tag">
+                ${(v.tags || v.biaoqianlist).map(a => {
+                return ` <a class="tag_item" href="./tag.html?id=${v.id}">${a.name || a.title}</a>`
+            }).toString().replaceAll(",", "")
+                }
+                </div>
+            </div>
+            `)
+        })
+    }
+
+    // 
+    // getQueryVariable(variable) {
+    //     var query = window.location.search.substring(1);
+    //     var vars = query.split("&");
+    //     for (var i = 0; i < vars.length; i++) {
+    //         var pair = vars[i].split("=");
+    //         if (pair[0] == variable) { return pair[1]; }
+    //     }
+    //     return (false);
+    // }
+
+    // 底部导航条
+    footer() {
+        var ul = `
+        <ul class="footer">
+           ${config.footerList.map((v, i) => {
+            // 判断地址是否包括url的短地址 包括为（true）class加active 不包括为（false）空
+            return `<li class="${location.href.includes(v.url) ? 'active' : ''}">
+                            <a href="${v.url}">
+                                <i class="iconfont ${v.icon}"></i>
+                                <p>${v.title}</p>
+                            </a>
+                        </li>`
+        }).toString().replaceAll(",", "")
+            }
+        </ul>
+        `;
+        //console.log(ul);
+        // body里面插入ul
+        $("body").html(ul)
+    }
+
+    // 获取url参数中的key
+    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()
+    //     }
+    // }
+
+    click(className, callback) {
+        var domArr = Array.from(className);
+        if (domArr.length != 0) {
+            className.forEach((v, i) => {
+                v.onclick = function (e) {
+                    v.index = i;
+                    v.e = e;
+                    callback.call(this)
+                }
+            })
+        } else {
+            className.onclick = function (e) {
+                className.e = e;
+                callback.call(this)
+            }
+        }
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+}
+
+var { $, _, click, inject, query, footer, item, header, //getQueryVariable 
+} = new Util()
+
+inject()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/js/util/rem.js

@@ -0,0 +1,12 @@
+; (function (doc, win, undefined) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
+        recalc = function () {
+            var clientWidth = docEl.clientWidth;
+            if (clientWidth === undefined) return;
+            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+        };
+    if (doc.addEventListener === undefined) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false)
+})(document, window);

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/collect.html

@@ -0,0 +1,27 @@
+<!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="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/collect.css">
+</head>
+
+<body>
+
+
+</body>
+
+<script src="../js/util/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/collect.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/edit.html

@@ -0,0 +1,33 @@
+<!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="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/edit.css">
+</head>
+
+<body>
+    <div class="content">
+        <div class="title ">已选菜单</div>
+        <ul class="menu_list principal">
+        </ul>
+        <div class="title ">未选菜单</div>
+        <ul class="menu_list additional">
+        </ul>
+    </div>
+</body>
+
+<script src="../js/util/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/edit.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/index.html

@@ -0,0 +1,55 @@
+<!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 href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/index.css">
+</head>
+
+<body>
+    <div class="header">
+        <div class="header_logo">
+            <i class="iconfont icon-taozi1"></i>
+            <div class="search">
+                <i class="iconfont icon-search"></i>
+                <span>200万张图，有你想要的...</span>
+            </div>
+            <i class="iconfont icon-wo"></i>
+        </div>
+        <div class="header_menu">
+            <ul></ul>
+            <a class="iconfont icon-edit" href="./edit.html"></a>
+        </div>
+    </div>
+
+    <div class="content">
+        <div class="swiper-container">
+            <!-- 相当于ul -->
+            <div class="swiper-wrapper page_wrapper">
+            </div>
+        </div>
+    </div>
+
+    <ul>
+        <li>
+            <i></i>
+            <span></span>
+        </li>
+    </ul>
+</body>
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.3.0/js/swiper.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/util/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/index.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/info.html

@@ -0,0 +1,30 @@
+<!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="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/info.css">
+</head>
+
+<body>
+
+    <div class="content">
+    </div>
+
+
+</body>
+
+<script src="../js/util/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/info.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/mechanism.html

@@ -0,0 +1,27 @@
+<!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="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/mechanism.css">
+</head>
+
+<body>
+
+
+</body>
+
+<script src="../js/util/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/mechanism.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/model.html

@@ -0,0 +1,27 @@
+<!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="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/model.css">
+</head>
+
+<body>
+
+
+</body>
+
+<script src="../js/util/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/model.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/my.html

@@ -0,0 +1,74 @@
+<!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="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/my.css">
+</head>
+
+<body>
+    <div class="my_top">
+        <i class="iconfont icon-wo"></i>
+        <span class="wode">我的</span>
+    </div>
+    <ul class="my_bottom">
+        <li>
+            <div class="my_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>最近更新</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        <li>
+            <div class="my_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>单图收藏</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        <li>
+            <a href="./collect.html" class="my_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>写真收藏</span>
+            </a>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        <li>
+            <div class="my_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>关于我们</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        <li>
+            <div class="my_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>用户协议</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        <li>
+            <div class="my_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>检测升级</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+        <li>
+            <div class="my_list">
+                <i class="iconfont icon-wushuju"></i>
+                <span>清除缓存</span>
+            </div>
+            <i class="iconfont icon-qianjin-tongyong"></i>
+    </ul>
+
+</body>
+
+<script src="../js/util/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/my.js"></script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/枸杞社/page/tag.html

@@ -0,0 +1,31 @@
+<!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="http://at.alicdn.com/t/font_2124975_xxjerwhwts.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/tag.css">
+</head>
+
+<body>
+    <div class="content">
+        <div class="tag list">
+        </div>
+    </div>
+
+
+</body>
+
+<script src="../js/util/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/ajax/ajax.js"></script>
+<script src="../js/sever/index.js"></script>
+<script src="../js/page/tag.js"></script>
+
+</html>