first commit

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/config/index.js

@@ -0,0 +1,49 @@
+//全局js配置，一般用未配置接口的及地址(一般不变的地址) 和 短地址（功能地址 详情页、首页） 等一些
+
+var config = {
+    //http:123.3.3.4/api/json/index
+    
+    //开发阶段
+    devBaseUser: 'http://127.0.0.1:3000/api/json',
+
+    //测试阶段
+    testBaseUser: 'http://127.0.0.2:8080/api/json',
+
+    //正式阶段
+    prodBaseUser: 'http://www.anc.com/api/json',
+    stage : 'dev', //dev test prod
+
+    aplList : {
+        index: '/index',
+        info: '/info',
+        mechanism: '/mechanism',
+        type: '/class',
+        classList:'/classList',
+        model:'/allModel',
+        search:'/search',
+        modelList:'/modelList'
+    },
+    
+    footerArry :[
+        {title: '首页', href: 'index.html', icon: 'icon-home' },
+        {title: '机构', href: 'mechanism.html', icon: 'icon-jigou' },
+        {title: '模特', href: 'model.html', icon: 'icon-me' },
+        {title: '我的', href: 'me.html', icon: 'icon-wo' },
+    ],
+    switchStage: function () {
+       // console.log(this.stage);
+        switch (this.stage) {
+            case "dev" :
+                return this.devBaseUser;
+                break
+            case "test" :
+                return this.testBaseUser;
+                break
+            case "prod" :
+                return this.prodBaseUser;
+                break
+            default:
+                break;
+        }
+    }
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/http/index.js

@@ -0,0 +1,58 @@
+class Http {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+    //获取地址栏参数 异步代码
+    get(params) {
+        return new Promise((success, error) => {
+            var par = ""
+            for (const key in params.data) {
+                par += `&${key}=${params.data[key]}`
+            }
+            par = par.replace("&", "?")
+            
+            this.xhr.open("GET", `${config.switchStage()}${params.url}${par}`)
+            this.xhr.send()
+            this.ReadyState(success, error)
+        })
+    }
+
+    //数据请求方式
+
+    post(params) {
+        return new Promise((success, error) => {
+            this.xhr.open("POST", `${params.url}`)
+            this.xhr.setRequestHeader('Content-Type', 'application/json');
+            this.xhr.send(JSON.stringify(params.data))
+            this.ReadyState(success, error)
+        })
+    }
+
+    ReadyState(success, error) {
+        this.xhr.onreadystatechange  = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var data = JSON.parse(this.xhr.response);
+                    // 写switch 判断状态。
+                    switch (data.status) {
+                        case 200:
+                            success(data.result)
+                            break;
+
+                        case 404:
+                            alert(data.msg);
+                            throw new Error(data.msg)
+                            break;
+
+                        default:
+                            break;
+                    }
+                } else {
+                    error(this. xhr)
+                }
+            }
+        }
+    }
+}

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/collection.js

@@ -0,0 +1,19 @@
+class Collection {
+    constructor () {
+        title("我的收藏")
+        this.likeList = JSON.parse(localStorage.getItem("like"))
+        this.getLike()
+    }
+    async getLike () {
+        var res = await  indexService.info({
+            id:query("id"),
+            title:query("title"),
+            page:1
+        })
+        console.log(res);
+        console.log(this.likeList);
+        item($(".list"),this.likeList)
+
+    }
+}
+new Collection ()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/edit.js

@@ -0,0 +1,55 @@
+class Edit {
+    constructor() {
+        title("分类管理")
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+        this.renderPage()
+    }item
+
+    //渲染编辑页面效果
+    renderPage() {
+        //生成li标签
+        $(".selected ul").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".selected ul").innerHTML += `
+            <li>${v.title}</li>
+            `
+        });
+
+        $(".optional ul").innerHTML = ""
+        this.additional.forEach(v => {
+            $(".optional ul").innerHTML += `
+                <li>${v.title}</li>
+                `
+        });
+        //绑定点击事件，选择添加或者删除选项
+        click(".selected ul li", (v, i) => {
+            //判断首页选项不可删除
+            //console.log(v);
+            if (i != 0) {
+                this.additional.push(this.principal[i])
+                this.principal = this.principal.filter((val, index) => {
+                    return index != i
+                });
+
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+
+                this.renderPage()
+            }
+        })
+
+        click(".optional ul li",(v,i) => {
+            this.principal.push(this.additional[i])
+            this.additional = this.additional.filter((val, index) => {
+                return index != i
+            });
+
+            localStorage.setItem("principal", JSON.stringify(this.principal))
+            localStorage.setItem("additional", JSON.stringify(this.additional))
+
+            this.renderPage()
+        })
+    }
+}
+new Edit

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/index.js

@@ -0,0 +1,120 @@
+// config.switchStage()
+// console.log(config.switchStage());
+
+
+class Index {
+    constructor() {
+        footer()
+        this.index = 0
+        this.principal = []
+        this.initSwiper()
+        this.getType().then(() => this.getIndex())
+
+    }
+    async getType() {
+        //判断本地是否有数值，是否选择发送请求
+        if (localStorage.getItem("principal") == null) {
+            var { principal, additional } = await indexService.type()
+            //创建俩本地存储数组
+            //已存在菜单principal
+            //更多菜单additional
+            localStorage.setItem("principal", JSON.stringify(principal))
+            localStorage.setItem("additional", JSON.stringify(additional))
+        } else {
+            var principal = JSON.parse(localStorage.getItem("principal"))
+            var additional = JSON.parse(localStorage.getItem("additional"))
+        }
+
+
+        //全局变量
+        this.principal = principal
+        console.log("请求首页数据", this.principal);
+
+        this.principal.forEach((v, i) => {
+            $(".header_menu ul").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
+            $(".swiper .swiper-wrapper").innerHTML += `
+                <div class="swiper-slide">
+                    <div class="list">
+                    </div>
+                </div>`
+        })
+        click(".header_menu ul li", (v, i) => {
+            _(".header_menu ul li").forEach(v => v.classList.remove("active"))
+            v.classList.add("active")
+            this.index = i
+            //判断首页不需要请求
+            this.getClassList()
+            this.mySwiper.slideTo(i)
+        })
+        //实现滚动
+    
+        _(".swiper .swiper-wrapper .swiper-slide").forEach((v,i) => {
+            if(i != 0 ){
+                v.onscroll = () => {
+                    const {clientHeight,scrollHeight, scrollTop} = v;
+                    var distance = scrollHeight - scrollTop - clientHeight;
+                    if(distance <= 0.5){
+                        this.principal[this.index].page += 1;
+                        if(this.principal[this.index].page <= this.principal[this.index].total_page){
+                            this.getClassList("loadMore")
+                        }
+                    }
+                }
+            }
+        })
+    }
+    //请求数据
+    async getIndex() {
+        var res = await indexService.index();
+        this.principal[this.index].content = res.list
+        console.log("首页接口数据", res);
+        //this.renderSwiperSlide()
+        item(_(".swiper  .swiper-wrapper .swiper-slide .list")[this.index],
+            this.principal[this.index].content)
+
+    }
+
+    async getClassList(type = "click") {
+        var getList = async () => {
+            var res = await indexService.classList({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id
+            });
+            console.log("list接口数据",res);
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ]
+            this.principal[this.index].total_page = res.total_page
+            
+            //this.renderSwiperSlide()
+            item(_(".swiper  .swiper-wrapper .swiper-slide .list")[this.index],
+            this.principal[this.index].content)
+        }
+        if(type == "click"){
+        if (this.principal[this.index].content.length == 0 && this.index != 0) {
+            getList()
+        }
+        }else{
+            getList()
+        }
+    }
+    initSwiper() {
+        //改变this指向
+        var self = this;
+        //this,在Index类中的变量
+        this.mySwiper = new Swiper('.swiper', {
+            direction: 'horizontal', // 垂直切换选项
+            on: {
+                slideChangeTransitionEnd: function () {
+                    _(".header_menu ul li").forEach((v => v.classList.remove("active")))
+                    _(".header_menu ul li")[this.activeIndex].classList.add("active")
+
+                    self.index = this.activeIndex
+                    self.getClassList()
+                },
+            },
+        })
+    }
+}
+new Index()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/info.js

@@ -0,0 +1,88 @@
+
+//详情接口
+class Info {
+    constructor() {
+        this.infoArr = []
+        this.likeArr = JSON.parse(localStorage.getItem("like")) == null
+                        ? []
+                        : JSON.parse(localStorage.getItem("like"))
+
+        title(query("title"), `<i class="iconfont icon-xin like"></i>`)
+        footer()
+        this.getInfo()
+        this.like()
+    }
+    async getInfo() {
+        this.infoArr = await indexService.info({
+            //后端要求接口不可改
+            id: query("id"),
+            title:query("title"),
+            quantity: query("quantity")
+        });
+
+        //调用插件渲染页面
+        this.infoArr.forEach((v, i) => {
+            var img = document.createElement("img")
+            img.src = v;
+            //console.log(img.src)
+            img.onload = () => {
+                $(".imgList").innerHTML += `
+                    <figure>
+                        <a href="${v}" data-size="${img.width}x${img.height}">
+                            <img src="${v}" alt="${v}" />
+                        </a>
+                        <figcaption itemprop="caption description">${query("title")} ${i + 1}P</figcaption>
+                    </figure>
+                  `
+            }
+        });
+        initPhotoSwipeFromDOM('.imgList');
+    }
+    like () {
+        //判断当前页是否被收藏
+        var res = this.likeArr.filter((v,i) => {
+            return query("id") == v.id;
+        });
+        if (res.length != 0) {
+            $(".like").classList.replace("icon-xin", "icon-aixin")
+        }
+
+        click(".like", () => {
+            if ($(".like").classList.contains("icon-xin")) {
+                $(".like").classList.replace("icon-xin", "icon-aixin")
+
+                //封面显示图片
+                this.likeArr.push({
+                    id: query("id"),
+                    title:query("title"),
+                    quantity: query("quantity"),
+                    img: this.infoArr[0]
+                });
+
+            } else {
+                $(".like").classList.replace("icon-aixin", "icon-xin")
+
+                //取消收藏
+                this.likeArr = this.likeArr.filter((v, i) => {
+                    return query("id") != v.id
+                });
+            }
+
+            //创建本地存储空间like
+            localStorage.setItem("like", JSON.stringify(this.likeArr))
+        })
+    }
+
+    // $(".icon-xin").onclick = () => {
+    //     if ($(".qh").classList.contains("icon-xin")) {
+    //         $(".qh").classList.replace("icon-xin", "icon-aixin")
+
+    //         //$(".preview_img").style.height = "auto"
+    //     } else {
+    //         $(".qh").classList.replace("icon-aixin", "icon-xin")
+
+    //         //$(".preview_img").style.height = "100%"
+    //     }
+    // }
+}
+new Info()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/me.js

@@ -0,0 +1,8 @@
+class me {
+    constructor() {
+        footer()
+         title("")
+    }
+    
+}
+new me()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/mechanism.js

@@ -0,0 +1,31 @@
+// config.switchStage()
+// console.log(config.switchStage());
+
+
+class Mechanism {
+    constructor() {
+        title("机构")
+        footer()
+        this.getMechanism()
+    }
+
+    async getMechanism() {
+        var res = await mechanismService.mechanism({ 
+            id: 1, 
+            page: 1 
+        });
+        console.log(res);
+        res.forEach((v,i) => {
+            $(".mechanism_list").innerHTML += `
+            <a class="ellipsis">
+                <p class="ellipsis">${v.title}</p>
+                <span>${v.id}套</span>
+            </a>
+        `
+        });
+
+        
+
+    }
+}
+new Mechanism()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/model.js

@@ -0,0 +1,27 @@
+class Model {
+    constructor() {
+        footer()
+        title("模特")
+        this.getModel()
+        //this.renderModelPage()
+    }
+
+    async getModel() {
+        var res = await modelService.model();
+        //console.log("list接口数据",res);
+        //console.log("a", $(".hot_model .model_list "));
+
+        res.forEach((v => {
+            $(".model_list").innerHTML += `
+                    <a href="./../page/model_info.html?id=${v.id}&title=${v.title}">
+                        <i>44张</i>
+                        <img src="${v.img}" alt="">
+                        <span class="ellipsis">${v.title}</span>
+                    </a>
+                `
+        }))
+
+
+    }
+}
+new Model()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/model_info.js

@@ -0,0 +1,27 @@
+class ModelList {
+
+    constructor() {
+        title(query("title"))
+        footer()
+        this.getModelList()
+    }
+    async getModelList() {
+        var res = await modelListService.modelList({
+            id: query("id"),
+            title: query("title"),
+            page: 1
+        });
+        console.log("a", res);
+        $(".user_photo").innerHTML += `
+            <img src="${res.model_info.portrait}" alt="">
+            <div class="user_text">
+                <span>${res.model_info.name}</span>
+                <span>${res.model_info.explain}</span>
+            </div>`
+        $(".user_pholist").innerHTML = `<div class="list"></div>`    
+
+        item($(".user_pholist .list"),res.data)
+        
+    }
+}
+new ModelList()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/search.js

@@ -0,0 +1,67 @@
+class Search {
+    constructor() {
+        footer()
+        this.getSearch()
+        this.boxValue = null
+        this.seek()
+    }
+    async seek(res) {
+        var res = await indexService.search({
+            keyword: this.boxValue,
+            page: 1
+        });
+        item($(".seek .list"), res)
+    }
+
+    hidden() {
+        $(".suggest").style.display = "none"
+        $(".seek").style.display = "black"
+    }
+    show() {
+        $(".suggest").style.display = "black"
+        $(".seek").style.display = "none"
+    }
+
+    async getSearch() {
+        var res = await indexService.search({
+            keyword: "长裙",
+            page: 1
+        });
+        res.forEach(v => {
+            $(".suggest_list").innerHTML += `
+                <li class="ellipsis">${v.biaoqianlist[0].name}</li>`
+            });
+
+        $(".search_box").oninput = () => {
+            if ($(".search_box").value.length > 0) {
+                this.boxValue = $(".search_box").value
+            }
+        }
+
+        //input获得焦点
+        $(".search_box").onfocus = () => {
+            this.show()
+        }
+        $(".content").onclick = () => {
+            this.hidden()
+        }
+        //标签绑定点击事件
+        click(".suggest_list li", (v, i) => {
+            $(".search_box").value = v.innerText
+            this.boxValue = $(".search_box").value
+            this.seek(this.boxValue)
+            this.hidden()
+        })
+
+        //绑定搜索按钮
+        click(".icon-search", () => {
+            this.seek(this.boxValue)
+            this.hidden()
+        })
+
+        click(".icon-back1", () => {
+            history.back()
+        })
+    }
+}
+new Search()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/page/tags.js

@@ -0,0 +1,29 @@
+class Tags {
+    constructor() {
+        title(query("name"))
+        footer()
+        this.getTags()
+    }
+
+    async getTags() {
+        this.res = await indexService.classList({
+            id: query("id"),
+            page: 1,
+            //name:query("name")
+        });
+        //console.log("clist接口数据", this.res);
+
+        //获取数据
+        this.res.data.forEach((v, i) => {
+            //console.log(_(".swiper-slide  .list"));
+            item($(".swiper-slide   .list"),this.res.data)
+                // $(".classify").innerHTML += `
+                //     <a href="">${val.title}</a>
+                // `
+
+        });
+        // 
+    }
+
+}
+new Tags()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/collection.js

@@ -0,0 +1,5 @@
+class CollectionService {
+    
+
+}
+var collectionService = new CollectionService()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/index.js

@@ -0,0 +1,55 @@
+ 
+
+ class IndexService{
+
+    async index (params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.index,
+            data: params
+        });
+    }
+    async classList (params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.classList,
+            data: params
+        });
+        
+    }
+    async search (params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.search,
+            data: params
+        });
+    }
+
+    async info(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.info,
+            data: params
+        });
+    }
+
+    async type (params = {}) {
+        var res = await (new Http()).get({
+            url:config.aplList.type,
+            data: params
+        });
+        res.principal.unshift({
+            id: -1,
+            page: 1,
+            title: "首页"
+        });
+        res.principal.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+        res.additional.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+        
+        return res
+    }
+    
+ }
+ var indexService = new IndexService()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/mechanism.js

@@ -0,0 +1,11 @@
+class MechanismService {
+
+
+    async mechanism(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.mechanism,
+            data: params
+        });
+    }
+}
+var mechanismService = new MechanismService()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/model.js

@@ -0,0 +1,11 @@
+class ModelService {
+
+
+    async model(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.model,
+            data: params
+        });
+    }
+}
+var modelService = new ModelService()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/service/model_info.js

@@ -0,0 +1,10 @@
+class ModelListService{
+
+    async modelList(params = {}) {
+        return await (new Http()).get({
+            url: config.aplList.modelList,
+            data: params
+        });
+    }
+}
+var modelListService = new ModelListService ()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/utils/index.js

@@ -0,0 +1,104 @@
+
+
+class Utils {
+
+    footer() {
+        var html = `
+        <ul class="footer top">
+            ${config.footerArry.forH(v => {
+            return `
+                    <li>
+                    <a class="${location.href.includes(v.href) ? 'active' : ''}" href="${v.href}">
+                        <i class="iconfont ${v.icon} "></i>
+                        <p>${v.title}</p>
+                    </a>
+                </li>`
+        })}
+        </ul>
+        `
+        $("body").insertAdjacentHTML("beforeend", html);
+        //console.log(html); 
+    }
+
+    item(father, data) {
+        father.innerHTML = ""
+        data.forEach(v => {
+            father.innerHTML += `
+            <div class="item">
+                <div class="img">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <img src="${v.preview || v.img_src}" alt="">
+                    <span>${v.total || v.shuliang}P</span>
+                   </a>
+                </div>
+                <div class="text">
+                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
+                    <div class="title ellipsis">${v.title}</div>
+                    <div class="model ellipsis">${v.user || `模特: ${v.renwulist[0].name}`}</div>
+                    <div class="mechanism ellipsis">${v.source || `机构: ${v.jigoulist[0].name}`}</div>
+                   </a>
+                </div>
+                ${(v.tags || v.biaoqianlist) == undefined
+                    ? ''
+                    : `<div class="tags">
+                            ${(v.tags || v.biaoqianlist).forH(val => {
+                                return `<a href="./../page/tags.html?id=${val.id}&name=${val.title || val.name}">${val.title || val.name}</a>`})}
+                        </div>`
+                }
+            </div>`
+        })
+    }
+
+    //渲染title
+    title(text = "", rightIcon = " ") {
+        var html = `
+            <div class= " pub_title " >
+            <i class="iconfont icon-back1 qh"></i>
+            <span class="ellipsis">${text}</span>
+            ${rightIcon}
+        </div>
+            `
+        $("body").insertAdjacentHTML("beforeend", html);
+
+        click(".icon-back1", () => {
+            history.back(1)
+        })
+    }
+    //对map进行重写
+    cover() {
+        Array.prototype.forH = function (callback) {
+            //  console.log("A")
+            var res = []
+
+            for (var index = 0; index < this.length; index++) {
+                res.push(callback(this[index]))
+            }
+            return res.toString().replaceAll(",", "")
+        }
+
+    }
+
+    query(name) {
+        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        let r = window.location.search.substr(1).match(reg);
+        if (r != null) {
+            return decodeURIComponent(r[2]);
+        };
+        return null;
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+    //循环绑定点击事件
+    click(className, callback) {
+        _(className).forEach((v, i) => v.onclick = () => callback(v, i))
+    }
+}
+
+var { footer, $, _, cover, click, query, item, title } = new Utils();
+cover()

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-8/作业/枸杞社/js/utils/rem.js

@@ -0,0 +1,15 @@
+(function (w, d) {
+    function setSize() {
+        // 获取屏幕的宽度 375px
+        var screenWidth = d.documentElement.clientWidth;
+
+        // 根据规则计算  html 的font-size数值
+        var currentFontSize = screenWidth * 100 / 750;
+
+        // 修改html上的font-size
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)