first commit

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/clear.css

@@ -0,0 +1,59 @@
+/* 清除浏览器默认的css样式 */
+:root {
+    --themeColor: #fb7299;
+    --whiteColor: #fff;
+    --blackColor: #000;
+
+    --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;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li,
+p {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    -webkit-user-select: none;
+    -moz-user-focus: none;
+    -moz-user-select: none;
+}
+input,
+button,
+textarea {
+    outline: none;
+    border: none;
+}
+
+body {
+    font-size: 0px;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/edit.css

@@ -0,0 +1,21 @@
+.select {
+    padding: 0.4rem 0.3rem;
+}
+.title {
+    font-size: var(--fontSize18);
+    font-weight: 500;
+}
+.select ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.2rem;
+}
+.select ul li {
+    font-size: 0.28rem;
+    background: var(--themeColor);
+    padding: 0.06rem 0.22rem;
+    margin-right: 0.1rem;
+    color: var(--whiteColor);
+    border-radius: 0.2rem;
+    margin-bottom: 0.2rem;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/index.css

@@ -0,0 +1,81 @@
+.header {
+    position: fixed;
+    width: 100%;
+    height: 1.6rem;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+}
+.header .header_search{
+    background: var(--themeColor);
+    height: 0.88rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+}
+.header .header_search i {
+    font-size: 0.45rem;
+    color: var(--whiteColor);
+}
+.search {
+    flex: 1;
+    background: var(--whiteColor);
+    height: 0.6rem;
+    border-radius: 0.6rem;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+}
+.search i {
+    color: #999 !important;
+    font-size: 0.26rem !important;
+    margin-right: 0.1rem;
+    padding-top: 0.02rem;
+    margin-left: 0.26rem;
+}
+.search span {
+    font-size: 0.24rem;
+    color: #999;
+}
+.header .header_menu {
+    position: relative;
+    height: 0.72rem;
+    display: flex;
+    align-items: center;
+    background: #fe7fa2;
+}
+.header .header_menu a {
+    width: 0.8rem;
+    height: 0.72rem;
+    text-align: center;
+    line-height: 0.72rem;
+}
+.header .header_menu i {
+
+    color: #e3e3e3;
+}
+
+.header .header_menu ul{
+    display: flex;
+    flex: 1;
+    overflow-x: scroll;
+    padding-left: 0.3rem;
+}
+.header .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;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/info.css

@@ -0,0 +1,3 @@
+.content img {
+    width: 100%;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/mechanism.css

@@ -0,0 +1,34 @@
+.content{
+   
+    
+}
+ul{
+    display: flex;
+    justify-content: space-around;
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    margin-top: 1rem;
+    flex-wrap: wrap;
+}
+ul li{
+    flex-shrink: 0;  
+    width: 25%;
+    text-align: center;
+    margin-bottom: .54rem;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    
+    
+}
+ul li a{
+    font-size: .3rem;
+   
+    
+
+}
+ul li p{
+         font-size: 0.1rem;
+         color: var--themeColor;
+         margin-top: 0.5rem;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/medolHome.css

@@ -0,0 +1,3 @@
+.content img {
+    width: 100%;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/model.css

@@ -0,0 +1,25 @@
+
+
+
+.content{
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 15px;
+    
+}
+.content li{
+    width: 25%;
+    padding-top: .2rem;
+}
+.content  li  img{
+    width: 1rem;
+    height: 1rem;
+    border-radius: 100%;
+}
+.content li p{
+    font-size: .28rem;
+    color: var(--blackColor);
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/public.css

@@ -0,0 +1,127 @@
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.content {
+    margin-top: 0.9rem;
+    margin-bottom: 1rem;
+}
+.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 .active a {
+    color: var(--themeColor);
+}
+.footer li i{}
+.footer li p{
+    font-size: 0.24rem;
+    margin-top: 0.04rem;
+}
+
+.swiper-slide {
+   display: flex;
+    justify-content: space-between;
+    padding: 0.3rem;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+
+    height: calc(100vh - 80px - 51px) !important;
+    overflow-y: scroll;
+}
+.list_item {
+    flex-shrink: 0;
+    width: 48%;
+    margin-bottom: 0.3rem;
+}
+.list_img {
+    position: relative;
+    height: 4.9677999999999995rem;
+}
+.list_img img {
+    width: 100%;
+    border-radius: 0.14rem;
+    height: 100%;
+}
+.list_img 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_title {
+    font-size: 0.34rem;
+    font-weight: 400;
+    margin-top: 0.2rem;
+}
+.list_model,
+.list_source{
+    font-size: 0.28rem;
+    color: #bdb7b7;
+}
+.list_source {
+}
+.list_tags {
+    margin-top: 0.1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+.list_tags .list_tags_item {
+    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;
+}
+
+.pub_header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: var(--themeColor);
+    height: 0.9rem;
+    display: flex;
+    align-items: center;
+    padding: 0 0.3rem;
+    box-sizing: border-box;
+    justify-content: space-between;
+    z-index: 999;
+}
+.pub_header .left {
+    width: 93%;
+    display: flex;
+    align-items: center;
+}
+.pub_header i {
+    color: var(--whiteColor);
+}
+.pub_header span {
+    font-size: 15px;
+    color: var(--whiteColor);
+    margin-left: 11px;
+    flex: 1;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/search.css

@@ -0,0 +1,26 @@
+.search{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: var(--themeColor);
+    height: 0.9rem;
+    display: flex;
+    align-items: center;
+    padding: 0px 0.3rem;
+    box-sizing: border-box;
+    justify-content: space-between;
+    z-index: 999;
+}
+.search i{
+    color: var(--whiteColor);
+}
+.search input{
+    border-radius: 0.2rem;
+    width: 3.2rem;
+    height: 0.5rem;
+    flex: 1;
+    margin-left: 0.4rem;
+    margin-right: 0.4rem;
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/css/tagList.css

@@ -0,0 +1,12 @@
+.content{}
+.content li{
+    display: flex;
+    align-items: center;
+  
+}
+.content  li  img{
+    width: 4rem;
+    margin-bottom: .02rem;
+}  
+.content .text{
+    font-size: 14px;}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/ajax/index.js

@@ -0,0 +1,69 @@
+class ajax {
+    constructor() {  // 类的参数初始化
+        this.baseUrl = config.checkBaseUrl();
+        this.xhr = new XMLHttpRequest();
+    }
+
+
+    /**
+     * 
+     * @param {*} params 
+     * {
+     *   url: 'http://127.0.0.1:3000/api/index/threeMeals',
+     *   data: {
+     *     page: 1,
+     *     id: 1
+     *   },
+     *   success: function() {}
+     * }
+     */
+    get(params) {
+        return new Promise((resolve, reject) => {
+            if (params.hasOwnProperty("data")) {
+                var str = ""
+                for (const key in params.data) {
+                    str += `&${key}=${params.data[key]}`
+                }
+                str = str.replace("&", "?")
+
+                // 设置请求地址
+                this.xhr.open("GET", `${this.baseUrl}${params.url}${str}`)
+                //
+                this.xhr.send();
+
+                // 状态监听
+                return this.onreadystatechange(resolve,reject)
+
+
+            } else {
+                throw new Error("data参数必传")
+            }
+        })
+    }
+
+
+
+    onreadystatechange(resolve,reject) {
+        this.xhr.onreadystatechange = () => {
+
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var res = JSON.parse(this.xhr.response);
+                    switch (res.status) {
+                        case 200:
+                            resolve(res.result)
+                            break;
+                        case 404:
+                            alert(res.msg);
+                            throw new Error(res.msg);
+                            break;
+                    }
+                } else {
+                    alert("网络请求错误")
+                }
+            }
+        }
+    }
+}
+
+var http = new ajax();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/config/index.js

@@ -0,0 +1,32 @@
+var config = {
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',  // 开发阶段地址
+    testBaseUrl: 'http://127.0.0.1:3000/api/json/test', // 测试阶段地址
+    prodBaseUrl: 'http://127.0.0.1:3000/api/json/prod', // 正式阶段地址
+    stage: 'dev', // dev  test   prod
+    checkBaseUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl;
+                break;
+            case "test":
+                return this.testBaseUrl;
+                break;
+            case "prod":
+                return this.prodBaseUrl;
+                break;
+        }
+    },
+
+    // 项目中的所有接口短地址
+    apiList: {
+        mechanismList: "/mechanismList",
+        mechanism: "/mechanism",
+        classApi: "/class",
+        index: '/index',
+        classList: '/classList',
+        info: '/info',
+        medolHome: '/medolHome',
+        allModel: '/allModel',
+        search : '/search',
+    }
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/config/笔记.txt

@@ -0,0 +1,3 @@
+存放全局配置的地方
+
+  一般存放 接口配置地址等

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/edit.js

@@ -0,0 +1,70 @@
+class Edit {
+    constructor() {
+        this.principal = JSON.parse(localStorage.getItem("principal"));
+        this.additional = JSON.parse(localStorage.getItem("additional"));
+        header("分类编辑")
+        // console.log(this.principal)
+        // console.log(this.additional)
+        this.renderPrincipal();
+        this.renderAdditional();
+    }
+
+    // 已选菜单
+    renderPrincipal() {
+        $(".you_select ul").innerHTML = ""
+        this.principal.forEach((v,i) => {
+            $(".you_select ul").innerHTML += `
+               <li>${v.title}</li>
+            `
+        });
+
+        _(".you_select ul li").forEach((v,i) => {
+            v.onclick = () => {
+                if (i != 0) {
+                    this.additional.push(this.principal[i])
+                    localStorage.setItem("additional", JSON.stringify(this.additional))
+                    this.renderAdditional()
+
+
+                    this.principal = this.principal.filter((item,index) => {
+                        if (this.principal[i].id != item.id) {
+                            return item
+                        }
+                    })
+                    localStorage.setItem("principal", JSON.stringify(this.principal))
+                    this.renderPrincipal();
+                }
+            }
+        })
+    }
+
+
+    // 未选菜单
+    renderAdditional() {
+        $(".wait_select ul").innerHTML = ""
+        this.additional.forEach((v,i) => {
+            $(".wait_select ul").innerHTML += `
+                   <li>${v.title}</li>
+                `
+        });
+
+
+        _(".wait_select ul li").forEach((v,i) => {
+            v.onclick = () => {
+                this.principal.splice(1,0,this.additional[i])
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                this.renderPrincipal()
+
+                this.additional = this.additional.filter((item,index) => {
+                    if (this.additional[i].id != item.id) {
+                        return item
+                    }
+                })
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+                this.renderAdditional();
+            }
+        })
+    }
+}
+
+new Edit()

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/index.js

@@ -0,0 +1,139 @@
+class Index {
+    constructor() {
+        // 横向菜单的下标
+        this.index = 0;
+        // 默认横向菜单的数据
+        this.principal = []
+        footer()
+        this.getClassApi();
+    }
+
+    async getClassApi() {
+        // 第一次打开app，本地没有缓存，发送请求获取菜单
+        if (localStorage.getItem("principal") == null) {
+            // 请求横向 菜单的数据
+            var res = await index.classApi();
+            localStorage.setItem("principal", JSON.stringify(res.principal));
+            localStorage.setItem("additional", JSON.stringify(res.additional));
+            this.principal = res.principal
+
+        // 第二次打开，本地已经有缓存了， 直接使用本地缓存过的菜单数据
+        } else {
+            this.principal = JSON.parse(localStorage.getItem("principal"))
+        }
+
+        // 渲染生成横向菜单和对应的内容
+        this.principal.forEach((v,i) => {
+
+            // 生成横向菜单
+            $(".header_menu ul").innerHTML += `
+               <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `;
+
+            // 生成横向菜单对应列表内容
+            if (i > 0) {
+                $(".swiper-wrapper").innerHTML += `
+                   <div class="swiper-slide">${v.title}</div>
+                `
+            }
+            
+        });
+
+
+        // 为每一个内容绑定滚动事件
+        var slide = _(".swiper-wrapper .swiper-slide");
+        var self = this;
+        slide.forEach((v, i) => {
+            if (i > 0) {
+                v.addEventListener('scroll', function () {
+                    if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                        self.principal[self.index].page += 1;
+                        if (self.principal[self.index].page <= self.principal[self.index].total_page) {
+                            console.log("请求数据")
+                            self.getClassList("loadMore")
+                        }
+                    }
+                })
+            }
+        })
+
+
+        // 初始化页面内容的轮播图
+        var self = this;
+        var mySwiper = new Swiper ('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionEnd: function(){
+                    self.changeActive(this.activeIndex)
+                    self.getClassList();
+                },
+            },
+        })
+
+        // 为菜单的li标签绑定点击事件
+        var liArr = _(".header_menu ul li")
+        liArr.forEach((v,i) => {
+            v.onclick = () => {
+                this.changeActive(i)
+                mySwiper.slideTo(i)
+            }
+        })
+
+        this.getIndex();
+    }
+
+    async getIndex() {
+        var res = await index.indexList();
+
+        var slide = _(".swiper-wrapper .swiper-slide");
+
+        item(slide[this.index],res.list)
+    }
+
+    async getClassList(type = "click") {
+
+        var loadData = async () => {
+            var res = await index.classList({
+                id: this.principal[this.index].id,
+                page: this.principal[this.index].page
+            })
+
+            this.principal[this.index].total_page = res.total_page;
+            // res.data.forEach(v => {
+            //     this.principal[this.index].content.push(v)
+            // })
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ];
+
+            console.log("this.principal[this.index]: ", this.principal[this.index])
+            var slide = _(".swiper-wrapper .swiper-slide");
+            item(slide[this.index], res.data)
+        }
+
+        if (this.principal[this.index].id != -1) {
+            // 滚动加载更多
+            if (type == "loadMore") {
+                loadData();
+            // 点击 和 滑动页面
+            } else  {
+                if (this.principal[this.index].content.length == 0) {
+                    loadData();
+                }
+            }
+        }
+
+    }
+
+    changeActive(index) {
+        this.index = index;
+        var liArr = _(".header_menu ul li")
+        liArr.forEach(item => item.classList.remove("active"))
+        liArr[index].classList.add("active")
+    }
+}
+
+
+new Index();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/info.js

@@ -0,0 +1,22 @@
+class Info {
+    constructor() {
+        header(query("title"),`<i class="iconfont icon-xin"></i>`);
+        this.getInfo();
+    }
+
+    async getInfo() {
+        var res = await index.info({
+            id: query("id"),
+            quantity: query("quantity")
+        })
+
+        res.forEach(v => {
+            $(".content").innerHTML+= `
+                <img src="${v}" alt="">
+            `
+        })
+    }
+
+}
+
+new Info();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/mechanism.js

@@ -0,0 +1,23 @@
+class Mechanism {
+    constructor() {
+        footer()
+        header("机构")
+        this.getMechanism()
+    }
+
+
+    async getMechanism() {
+        var res = await index.mechanism();
+        res.forEach(v => {
+            $(".content ul").innerHTML += `
+            <li>
+                <a href="">${v.title}</a>
+            </li>
+            `
+        });
+    }
+}
+
+
+
+new Mechanism();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/medolHome.js

@@ -0,0 +1,29 @@
+ class MedolHome{
+     constructor(){ 
+         this.MedolHome()
+         this.total_page = 0
+         page = 1
+     }
+
+     async getMedolHome(){
+         var res = MedolHome({
+             id:query("id"),
+             page:this.page
+         })
+         this.total_page = res.res
+         console.log(res)
+
+
+
+        var self = this;
+         $(className: "content").addEventListener('scroll', function () {
+            if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                self.page += 1;
+                if (self.page <= self.principal[self.index].total_page) {
+                    console.log("请求数据")
+                    self.getClassList("loadMore") 
+                }
+            }
+        })
+     }
+ }

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/model.js

@@ -0,0 +1,32 @@
+
+class Model {
+    constructor() {
+        footer()
+        header("模特")
+        this.allModel();
+    }
+
+
+    async allModel() {
+        var res = await index.allModel({
+            id: query("id"),
+            quantity: query("quantity")
+        })
+        console.log( res);
+
+
+        
+        res.forEach(v => {
+            $(".content").innerHTML += `
+        <li>
+            <a href="">
+                <img src="${v.img}" alt="">
+                <p class="ellipsis">${v.title}</p>
+            </a>
+        </li> 
+            `
+        })
+    }
+}
+
+new Model();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/my.js

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

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/search.js

@@ -0,0 +1,21 @@
+class Search {
+    constructor() {
+        this.getsearch();
+    }
+
+    async getsearch() {
+        $(".icon-search").onclick = async () => {
+            var res = await index.search({
+                keyword: $("input").value
+            })  
+
+            console.log(res);
+        }
+        
+       
+    }
+}
+
+
+
+new Search();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/tagList.js

@@ -0,0 +1,41 @@
+class indexJump {
+    constructor() {
+        header(query("title"));
+        this.page = 1
+        this.classList();
+        
+    }
+
+    more(){
+        this.page += 1
+        console.log(this.page);
+        this.classList()
+    }
+    async classList() {
+        var res = await index.classList({
+            page: this.page,
+            id: query("id"),
+        })
+        console.log(res.data);
+       
+        var aaa = res.data
+
+        aaa.forEach(v => {
+            $(".content").innerHTML += `
+            <li>
+             <img src="${v.preview}" alt="">
+             <div class="text">
+                <span>${v.user}</span>
+                <p>${v.source}</p>
+             </div>
+                   </li>    
+            `
+        })
+    }
+    
+    
+
+}
+
+
+new indexJump();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/service/index.js

@@ -0,0 +1,88 @@
+class IndexService {
+
+    async mechanismList(data = {}) {
+        return await http.get({
+            url: config.apiList.mechanismList,
+            data: data
+        })
+    }
+
+    async mechanism(data = {}) {
+        return await http.get({
+            url: config.apiList.mechanism,
+            data: data
+        })
+    }
+
+    async mefolHome(data = {}) {
+        return await http.get({
+            url: config.apiList.mechanism,
+            data: data
+        })
+    }
+
+    async info(data = {}) {
+        return await http.get({
+            url: config.apiList.info,
+            data: data
+        })
+    }
+
+
+    async allModel(data = {}) {
+        return await http.get({
+            url: config.apiList.allModel,
+            data: data
+        })
+    }
+
+    
+    async search(data = {}) {
+        return await http.get({
+            url: config.apiList.search,
+            data: data
+        })
+    }
+
+    async classList(data = {}) {
+        return await http.get({
+            url: config.apiList.classList,
+            data: data
+        })
+    }
+
+    async indexList(data = {}) {
+        return await http.get({
+            url: config.apiList.index,
+            data: data
+        })
+    }
+
+    async classApi(data = {}) {
+        var res = await http.get({
+            url: config.apiList.classApi,
+            data: data
+        });
+
+        res.principal.unshift({
+            id: -1,
+            page: 0,
+            title: "首页",
+            content: []
+        });
+
+        res.principal.forEach(v => {
+            v.content = [];
+            v.total_page = 0;
+        })
+
+        res.additional.forEach(v => {
+            v.content = [];
+            v.total_page = 0;
+        })
+
+        return res;
+    }
+}
+
+var index = new IndexService();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/utils/index.js

@@ -0,0 +1,97 @@
+class Utils {
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+    query(name)
+    {
+        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if(r!=null)return  decodeURI(r[2]); return null;
+    }
+
+
+   footer () {
+        var arr = [
+            { text: '首页', icon: 'icon-home', href: 'index.html' },
+            { text: '机构', icon: 'icon-jigou', href: 'mechanism.html' },
+            { text: '模特', icon: 'icon-me', href: 'model.html' },
+            { text: '我的', icon: 'icon-wo', href: 'my.html' },
+        ];
+
+        var liArr = `
+          <ul class="footer">
+            ${
+               arr.map((v,i) => {
+                   return `
+                     <li class="${ location.pathname.includes(v.href) ? 'active' : '' }">
+                        <a href="${v.href}">
+                            <i class="iconfont ${v.icon}"></i>
+                            <p>${v.text}</p>
+                        </a>
+                    </li>
+                    `
+               }).toString().replaceAll(",","")
+             }
+          </ul>
+        `
+
+        $("body").innerHTML += liArr
+    }
+
+    item(father, arr) {
+        arr.forEach(v => {
+            father.innerHTML += `
+              <div class="list_item">
+                <a href="./info.html?id=${v.id}&quantity=${v.shuliang || v.total}&title=${v.title}">
+                    <div class="list_img">
+                        <img src="${v.preview || v.img_src}" alt="">
+                        <span>${v.shuliang || v.total}</span>
+                    </div>
+                    <div class="list_title ellipsis">${v.title}</div>
+                    <div class="list_model ellipsis">模特: ${v.user || v.renwulist[0].name}</div>
+                    <div class="list_source ellipsis">${v.source || '来源机构：'+v.jigoulist[0].name}</div>
+                </a>
+                <div class="list_tags">
+                   ${
+                     (v.tags || v.biaoqianlist).map(item=>{
+                          return `<a href="./tagList.html?id=${item.id}&title=${item.title}" class="list_tags_item">${item.title || item.name}</a>`
+                      }).toString().replaceAll(",", "")
+                    }
+                </div>
+             </div>
+            `
+        })
+    }
+
+    header(title = "",rightHtml = "") {
+        $("body").innerHTML += `
+            <div class="pub_header">
+                <div class="left">
+                    <i class="iconfont icon-back1"></i>
+                    <span class="ellipsis">${title}</span>
+                </div>
+                ${rightHtml}
+            </div>
+        `
+
+        $(".icon-back1").onclick = () => {
+            history.back();
+        }
+    }
+
+    search () {
+        $('body') .innerHTML +=` <div class="search">
+        <i class="iconfont icon-back1"></i>
+        <input type="text">
+        <i class="iconfont icon-search"></i>
+     </div>`
+        
+    }
+}
+
+var { $, _, footer, item, header, query,search } = new Utils();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/utils/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";
+}

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/utils/笔记.txt

@@ -0,0 +1 @@
+存放 全局公共函数 的地方

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/edit.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../js/lib/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../css/edit.css">
+</head>
+<body>
+
+
+<div class="content">
+    <div class="select you_select">
+        <div class="title">已选菜单</div>
+        <ul></ul>
+    </div>
+    <div class="select wait_select">
+        <div class="title">未选菜单</div>
+        <ul></ul>
+    </div>
+</div>
+
+</body>
+<script src="../js/lib/swiper/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/edit.js"></script>
+
+
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/index.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../js/lib/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../css/index.css">
+</head>
+<body>
+
+<div class="header">
+    <div class="header_search">
+        <i class="iconfont icon-taozi1"></i>
+        <div class="search">
+            <i class="iconfont icon-search"></i>rr
+            <span>198万张图，有你想要的...</span>
+        </div>
+        <i class="iconfont icon-wo"></i>
+    </div>
+    <div class="header_menu">
+        <ul></ul>
+        <a href="./edit.html">
+            <i class="iconfont icon-edit"></i>
+        </a>
+    </div>
+</div>
+<div class="content">
+    <div class="swiper">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide">
+
+            </div>
+
+        </div>
+    </div>
+</div>
+
+
+</body>
+<script src="../js/lib/swiper/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/index.js"></script>
+
+<script>
+    // ... 三点运算符
+    var a = [{},{},{}];
+    // a.forEach(v => {
+    //     console.log(v)
+    // })
+
+    console.log(...a)
+</script>
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/info.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../js/lib/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../css/info.css">
+</head>
+<body>
+
+
+<div class="content">
+
+</div>
+</body>
+<script src="../js/lib/swiper/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/info.js"></script>
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/mechanism.html

@@ -0,0 +1,37 @@
+<!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/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../js/lib/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../css/mechanism.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <ul>
+        
+          
+        </ul>
+    </div>
+
+
+
+
+</body>
+<script src="../js/lib/swiper/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/mechanism.js"></script>
+
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/medolHome.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../js/lib/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/medolHome.css">
+</head>
+<body>
+    <div class="content"></div>
+
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/modelHome.js"></script>
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/model.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/model.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+</head>
+
+<body>
+    <ul class="content "> 
+       
+    </ul>
+
+
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/model.js"></script>
+
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/my.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/my.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+</head>
+<body>
+
+
+
+</body>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/my.js"></script>
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/search.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../js/lib/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../css/search.css">
+</head>
+<body>
+    <div class="search">
+       <i class="iconfont icon-back1"></i>
+       <input type="text">
+       <i class="iconfont icon-search"></i>
+    </div>
+</body>
+<script src="../js/lib/swiper/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/search.js"></script> 
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/page/tagList.html

@@ -0,0 +1,29 @@
+<!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/utils/rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../js/lib/swiper/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../css/tagList.css">
+</head>
+<body>
+    <ul class="content">
+        
+
+    </ul>
+     <button onclick="more">加载更多</button>
+
+</body>
+<script src="../js/lib/swiper/swiper-bundle.min.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/ajax/index.js"></script>
+<script src="../js/service/index.js"></script>
+<script src="../js/page/tagList.js"></script>
+</html>

历届学生/front-end-team/项目练习/上课项目/屁桃儿/笔记.txt

@@ -0,0 +1,69 @@
+写页面
+
+调接口
+  ajax 如何封装
+
+    页面  --->   中间层
+
+    中间层  --->  ajax 封装
+
+
+渲染接口数据到页面
+
+绑定事件，实现功能 （封装方法，数组+下标）
+
+
+
+
+思路：
+
+  1：index.js 中的 Index 类被初始化的时候，类的  构造函数 constructor  将被自动运行，
+     构造函数中的变量 index 和 principal 将被定义，方法 getClassApi 将被自动执行
+
+  2：getClassApi 被执行，发送请求获取 横向 菜单的数据，保存到 全局变量 principal 数组中。
+     遍历 principal 首先生成 li 横向菜单，然后生成li所对应的 列表内容
+     页面生成好后，开始初始化页面轮播图，为菜单的li标签批量绑定点击事件
+
+  3：请求首页的接口数据，然后通过数组加下标的规则找到 对应的  swiper-slide，将数据插入
+
+
+
+【陆旗】1: 搜索
+   注意：从首页点击的时候，跳转进入  search.html 页面。
+   接口：http://127.0.0.1:3000/api/json/search?keyword=jkk
+   参数：keyword
+
+【李康】2：机构
+   注意：li 标签内部套 a标签
+   接口：http://127.0.0.1:3000/api/json/mechanism
+   参数：无
+
+【缪虎】3：模特
+   注意：无
+   接口：http://127.0.0.1:3000/api/json/mechanism
+   参数：无
+
+
+
+  【缪虎】进去标签点的列表页面
+  注意：需要修改 utils/index.js  item 方法 <a href="./tagList.html?id="
+        滚动到底部 page +1 请求第二页数据
+  接口：http://127.0.0.1:3000/api/json/classList
+  参数：page  id
+
+
+  【陆旗】机构页面点击进去的机构列表页面
+  注意：也需要a标签带参数进入下一个页面  id
+       滚动到底部 page +1 请求第二页数据
+  接口：http://127.0.0.1:3000/api/json/mechanismList
+  参数：?id=82&page=1
+
+
+  【李康】模特页面点击进去的模特主页
+  注意：也要传参数，id
+  接口：http://127.0.0.1:3000/api/json/modelList
+  参数：?id=3265&page=1
+
+
+
+