增加新项目

项目合集/最新写真app/fontend/css/clear.css

@@ -0,0 +1,32 @@
+body,p {
+    font-size: 0;
+    margin: 0;
+    line-height: 1;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    color: var(--textColor);
+}
+
+input {
+    line-height: 0;
+}
+
+img {
+    width: 100%;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}

项目合集/最新写真app/fontend/css/color.css

@@ -0,0 +1,7 @@
+:root {
+    --whiteColor: #fff;
+    --textColor: #050505;
+    --themeColor: #fb7299;
+    --tipsTextColor: #929292;
+    --tipsBackGroundColor: #f5f5f5;
+}

项目合集/最新写真app/fontend/css/global.css

@@ -0,0 +1,141 @@
+.header {
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: var(--whiteColor);
+    z-index: 999;
+    height: .9rem;
+    i {
+        font-size: .44rem;
+    }
+    .icon-wujiaoxing {
+        margin-right: .1rem;
+    }
+    .header_title {
+        color: var(--textColor);
+        font-size: .32rem;
+        margin: 0 .16rem;
+        flex: 1;
+    }
+}
+
+
+
+.footer {
+    width: 100%;
+    height: 1rem;
+    background-color: var(--whiteColor);
+    padding: 0 .52rem;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+
+    li {
+        a {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+
+            i {}
+
+            div {
+                font-size: 0.22rem;
+                margin-top: 0.1rem;
+            }
+        }
+    }
+
+    .active {
+
+        i,
+        div {
+            color: var(--themeColor);
+        }
+    }
+}
+
+.recommend-model {
+    margin-top: .5rem;
+    .title {
+        height: .9rem;
+        font-size: .38rem;
+        font-weight: bolder;
+    }
+
+    .list {
+        li {
+            width: 3.32rem;
+            margin-bottom: 0.4rem;
+
+            a {
+                img {
+                    width: 100%;
+                    border-radius: 0.14rem;
+                    margin-bottom: 0.18rem;
+                    height: 4.98rem;
+                    object-fit: cover;
+                }
+
+                .desc {
+                    .name {
+                        font-size: .34rem;
+                        color: var(--textColor);
+                        margin-bottom: 0.12rem;
+                    }
+
+                    .time {
+                        font-size: .2rem;
+                        color: var(--tipsTextColor);
+
+                        .text {}
+
+                        .view {
+
+                            i {}
+
+                            span {}
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.roll {
+    .list {
+        overflow-x: scroll;
+    }
+    li {
+        flex-shrink: 0;
+        margin-right: .3rem;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+.swiper-pagination-bullet-active {
+    background: var(--themeColor);
+}
+
+.content {
+    margin-top: .9rem;
+    margin-bottom: 1rem;
+}
+
+#nprogress  {
+    .bar {
+        background: var(--themeColor);
+        height: .08rem;
+        .peg {
+            box-shadow: 0 0 10px var(--themeColor), 0 0 5px var(--themeColor)
+        }
+    }
+    .spinner-icon {
+        border-top-color: var(--themeColor);
+        border-left-color: var(--themeColor);
+    }
+}

项目合集/最新写真app/fontend/css/index.css

@@ -0,0 +1,52 @@
+.header {
+    height: .96rem;
+
+    .search {
+        height: .76rem;
+        width: 93%;
+        border-radius: .4rem;
+        background: var(--tipsBackGroundColor);
+        padding: 0px 16px;
+
+        i {
+            margin-right: .1rem;
+        }
+
+        i,
+        div {
+            font-size: .3rem;
+            color: var(--tipsTextColor);
+        }
+    }
+}
+
+.recommend-tag {
+    padding: 0 .36rem;
+    margin-top: .4rem;
+    margin-top: .5rem;
+    li {
+        a {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .title {
+                font-size: .5rem;
+                margin-bottom: 0.14rem;
+            }
+
+            .desc {
+                font-size: .28rem;
+                color: var(--tipsTextColor);
+            }
+        }
+    }
+}
+
+.swiper {
+    width: calc(100% - .56rem);
+    border-radius: 30px;
+}
+
+.content {
+    margin-top: .96rem;
+}

项目合集/最新写真app/fontend/css/info.css

@@ -0,0 +1,31 @@
+
+.info {
+    height: 18rem;
+   
+    .img_arr {
+        img {}
+    }
+
+    .all {
+        font-size: .32rem;
+        color: var(--themeColor);
+        width: 100%;
+        height: 1.2rem;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding-bottom: .2rem;
+        background: linear-gradient(180deg, #fcfcfc00, #ffffff);
+        span {
+            margin-right: .1rem;
+        }
+        i {}
+    }
+}
+
+.show {
+    height: auto !important;
+    .all {
+        display: none !important;
+    }
+}

项目合集/最新写真app/fontend/css/public.css

@@ -0,0 +1,107 @@
+.block {
+    display: block;
+}
+
+.flex-block {
+    display: flex block;
+}
+
+.none {
+    display: none;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.flex {
+    display: flex;
+}
+
+.ai-c {
+    align-items: center;
+}
+
+.ai-e {
+    align-items: flex-end;
+}
+
+.jc-sb {
+    justify-content: space-between;
+}
+
+.jc-c {
+    justify-content: center;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.shrink {
+    flex-shrink: 0;
+}
+
+.x-scroll {
+    overflow-x: scroll;
+}
+
+.fixed {
+    position: fixed;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.relative {
+    position: relative;
+}
+
+.p-l {
+    padding-left: 0.115rem;
+}
+
+.p-r {
+    padding-right: 0.12rem;
+}
+
+.border-box {
+    box-sizing: border-box;
+}
+
+/* 把css当成js来写 */
+/* css基本上都有 */
+/* .border-top(@fx: top) {
+    border-@fx: 1px solid #e8e8e8;
+} */
+
+.p18 {
+    padding: 0 .36rem;
+}
+
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.border-top {
+    border-top: 1px solid #e8e8e8;
+}
+
+.border-bottom {
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.border-left {
+    border-left: 1px solid #e8e8e8;
+}
+
+.border-right {
+    border-right: 1px solid #e8e8e8;
+}
+
+.hidden {
+    overflow: hidden;
+}

项目合集/最新写真app/fontend/css/type.css

@@ -0,0 +1,50 @@
+.tabs_title {
+    height: 0.8rem;
+    top: .9rem;
+    z-index: 999;
+    background: #fff;
+    width: 100%;
+    left: 0;
+    right: 0;
+    li {
+        margin-right: .3rem;
+        flex-shrink: 0;
+        font-size: .28rem;
+        color: var(--textColor);
+        position: relative;
+        &:last-child {
+            margin-right: .8rem;
+        }
+    }
+    .active {
+        color: var(--themeColor);
+    }
+
+    .active::after {
+        position: absolute;
+        content: "";
+        width: .5rem;
+        height: .08rem;
+        display: inline-block;
+        background: var(--themeColor);
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -0.24rem;
+        border-radius: .24rem;
+    }
+}
+
+.swiper-slide {
+    height: calc(100vh - .9rem - .8rem - 1rem);
+    overflow-y: scroll;
+}
+
+.recommend-model {
+    padding-top: .2rem;
+    margin-top: 0;
+    box-sizing: border-box;
+}
+
+.content {
+    margin-top: 1.7rem;
+}

项目合集/最新写真app/fontend/js/config/index.js

@@ -0,0 +1,60 @@
+const config = {
+    stage: "prod", // dev test  prod
+
+    // 开发阶段请求地址
+    devUrl: 'https://pc.buyusdt.xyz/v1/api',
+
+    // 测试阶段请求地址
+    testUrl: 'http://[240e:362:223f:2e00::fce]:3030/v1/test',
+
+    // 正式阶段请求地址
+    prodUrl: 'https://pc.buyusdt.xyz/v1/api',
+
+
+    urlList: {
+        homeHot: '/home/hot',  // 获取热门推荐的写真
+        homeBanner: '/home/banner',
+        homeList: '/home/list',
+
+        tagRecommend: '/tag/recommend',
+        tagList: '/tag/list',
+        tagInfo: '/tag/info',
+
+        infoList: '/info/list',
+
+        hotList: '/hot/list',
+
+    },
+    footerArr: [
+        { title: '首页', icon: 'icon-shouye', href: 'index.html' },
+        { title: '分类', icon: 'icon-changchenglogo', href: 'type.html' },
+        { title: '热门', icon: 'icon-hot', href: 'hot.html' },
+        { title: '我的', icon: 'icon-wo', href: 'me.html' },
+    ],
+    // 动态的返回不同阶段的项目 基地址
+    checkStage: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devUrl
+                break;
+
+            case "test":
+                return this.testUrl
+                break;
+
+            case "prod":
+                return this.prodUrl
+                break;
+
+            default:
+                break;
+        }
+    },
+
+}
+
+
+
+//  基（基本）地址    短地址（具体的功能地址）
+// http://[240e:362:223f:2e00::fce]:3030/v1/api   /home/hot
+// https://pc.buyusdt.xyz/v1/api     /home/hot

项目合集/最新写真app/fontend/js/http/index.js

@@ -0,0 +1,78 @@
+// 用js的function 来模拟class
+const http = () => {
+    NProgress.configure({
+        easing: 'ease', speed: 200,
+        trickleSpeed: 150
+    });
+
+    const init = () => {
+        return new XMLHttpRequest();
+    }
+
+    const get = (params) => {
+        let http = init()
+        NProgress.start();
+        return new Promise((success, error) => {
+            http.open("get", handleGetParams(params))
+            http.send()
+            readystatechange(http, success, error)
+        })
+    }
+
+    const post = (params) => {
+        let http = init()
+        NProgress.start();
+        return new Promise((success, error) => {
+            http.open("post", config.checkStage() + params.url)
+            http.setRequestHeader("Content-Type", "application/json")
+            http.send(JSON.stringify(params.data))
+            readystatechange(http, success, error)
+        })
+    }
+
+    const readystatechange = (ajax, success, error) => {
+        ajax.onreadystatechange = () => {
+            // http status
+            // ajax readyState
+            // 接口提供的 标识当前你访问的接口操作的 具体信息
+            if (ajax.readyState == 4) {
+                if (ajax.status == 200) {
+                    NProgress.done();
+                    let result = JSON.parse(ajax.responseText)
+
+                    switch (result.status) {
+                        case 200:
+                            success(result.data)
+                            break;
+
+                        case 500:
+                            alert(result.message)
+                            break;
+
+                        default:
+                            break;
+                    }
+
+                } else {
+                    error(ajax)
+                    console.error(ajax)
+                }
+            }
+        }
+    }
+
+
+    // 处理get请求参数并 拼接地址
+    const handleGetParams = (params) => {
+        let str = ""
+        for (const key in params.data) {
+            str += `&${key}=${params.data[key]}`
+        }
+        str = str.replace("&", "?")
+        return config.checkStage() + params.url + str
+    }
+
+
+    return { get, post }
+}
+

项目合集/最新写真app/fontend/js/page/hot.js

@@ -0,0 +1,22 @@
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+const init = async () => {
+    header(
+        "",
+        "热门",
+    )
+    footer()
+    getHotList()
+}
+
+
+
+const getHotList = async () => {
+
+     data = await hotList(
+        { page: 1 }
+    );
+    item(".random ul", data.list);
+}
+init()

项目合集/最新写真app/fontend/js/page/index.js

@@ -0,0 +1,58 @@
+let mySwiper = null
+
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+const init = async () => {
+    footer()
+    getTagRecommend()
+    getHomeBanner()
+    getHomeHot()
+    getHomeList()
+}
+
+const getHomeBanner = async () => {
+    innerMaps(
+        ".swiper-wrapper",
+        await homeBanner(),
+        v => `<div class="swiper-slide">
+                    <img src="${v.src}" alt="">
+               </div>`
+    )
+    initSwiper();
+}
+
+const getTagRecommend = async () => {
+    innerMaps(
+        ".recommend-tag",
+        await tagRecommend(),
+        v => `
+            <li>
+                <a href="">
+                    <div class="title">${v.short_title}</div>
+                    <div class="desc">${v.title}</div>
+                </a>
+            </li>
+        `
+    )
+}
+
+const getHomeHot= async () => item(".roll ul",await homeHot())
+
+const getHomeList = async () => item(".random ul", await homeList())
+
+
+const initSwiper = () => {
+    mySwiper = new Swiper('.banner', {
+        loop: true, // 循环模式选项
+        // 如果需要分页器
+        pagination: {
+            el: '.swiper-pagination',
+        },
+    })
+}
+
+
+
+
+init()

项目合集/最新写真app/fontend/js/page/info.js

@@ -0,0 +1,95 @@
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+let infoData = {}
+let likeData = JSON.parse(localStorage.getItem("like")) || []
+const init = async () => {
+    header(
+        `<div class="flex ai-c">
+            <i class="iconfont icon-wujiaoxing "></i>
+            <i class="iconfont icon-fenxiang"></i>
+        </div>`,
+    )
+    getInfoList()
+    bindEvent()
+}
+
+const getInfoList = async () => {
+    infoData = await infoList({ id: query("id") })
+    $(".header_title").innerText = infoData.title
+
+    item(".recommend-model ul", infoData.recommend)
+
+    innerMaps(
+        ".info .img_arr",
+        infoData.src_list,
+        (v, i) => `<a href="${v}" class="js-smartPhoto" data-id="${i}">
+                      <img data-src="${v}" class="lazyload" data-sizes="auto" alt="">
+                    </a>`
+    )
+
+
+
+    _(".img_arr img").click(v => {
+        new SmartPhoto(".js-smartPhoto", {
+            resizeStyle: 'fit'
+        });
+    });
+}
+
+
+const bindEvent = () => {
+    _(".all").click(v => {
+        $(".info").classList.replace("hidden", "show")
+    })
+
+
+    _(".icon-fenxiang").click(async v => {
+        await navigator.clipboard.writeText(stripIndents`
+            我发现一个好看的，快来看看: 《${infoData.title}》
+            ${location.href}
+        `);
+        alert("已粘贴，快分享给朋友吧")
+    })
+
+
+    // 在这判断 写真是否收藏
+    // foreach  map  filter
+    // 如果写真已经被收藏在本地，那么将图标改为收藏状态（实心）
+    likeData.filter(v => v.id == query("id") ? v : null).length != 0
+    ? $(".icon-wujiaoxing").classList.add("icon-wujiaoxing1")
+    : null
+    
+
+    _(".icon-wujiaoxing").click(async v => {
+         // $(".icon-wujiaoxing").classList.toggle("icon-wujiaoxing1")
+        
+        // 取消收藏
+        if ($(".icon-wujiaoxing").classList.contains("icon-wujiaoxing1")) {
+            $(".icon-wujiaoxing").classList.remove("icon-wujiaoxing1")
+            likeData = likeData.filter((v,i) => {
+                if (v.id != query("id")) {
+                    return v
+                }
+            })
+
+            localStorage.setItem("like", JSON.stringify(likeData))
+        
+        // 收藏    
+        } else {
+            likeData.push({
+                id: query("id"),
+                title: infoData.title,
+                thumbnail: infoData.src_list[0],
+                time: query("time"),
+                view: query("view")
+            })
+
+            localStorage.setItem("like", JSON.stringify(likeData))
+            $(".icon-wujiaoxing").classList.add("icon-wujiaoxing1")
+        }
+    })
+}
+
+
+init()

项目合集/最新写真app/fontend/js/page/me.js

@@ -0,0 +1,9 @@
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+const init = async () => {
+    footer()
+}
+
+
+init()

项目合集/最新写真app/fontend/js/page/type.js

@@ -0,0 +1,134 @@
+let mySwiper = null;
+let tagListData = [];
+let tagIndex = 0;
+
+const init = async () => {
+    header(
+        "",
+        "分类",
+    )
+    footer()
+    await getTagList()
+
+    initSwiper()
+    bindEvent()
+}
+
+const getTagList = async () => {
+    tagListData = await tagList()
+
+    console.log("tagListData: ", tagListData);
+
+    innerMaps(
+        ".tabs_title",
+        tagListData,
+        (v, i) => `
+            <li class="${i == tagIndex ? 'active' : ''}">${v.title}</li>
+        `
+    )
+
+    innerMaps(
+        ".tabs_content .swiper-wrapper",
+        tagListData,
+        v => `
+            <div class="swiper-slide recommend-model">
+              <ul class="list flex wrap p18 jc-sb"></ul>
+            </div>
+        `
+    );
+
+    await getTagInfo()
+}
+
+const getTagInfo = async () => {
+    let res = await tagInfo({
+        url: tagListData[tagIndex].url,
+        page: tagListData[tagIndex].page
+    })
+    
+    tagListData[tagIndex].totalPage = res.totalPage
+    // tagListData[tagIndex].content = res.list
+
+    tagListData[tagIndex].content = [
+        ...tagListData[tagIndex].content,
+        ...res.list
+    ]
+
+    // res.list.forEach(v => {
+    //     tagListData[tagIndex].content.push(v)
+    // })
+
+    item(
+        _(".swiper-wrapper .swiper-slide ul")[tagIndex],
+        res.list
+    )
+
+    // 渲染页面
+    // item()
+    // 滚动加载更多数据....
+
+    console.log("getTagInfo: ", tagListData);
+}
+
+const initSwiper = async () => {
+    mySwiper = new Swiper('.tabs_content', {
+        on: {
+            slideChangeTransitionEnd: async function () {
+                tagIndex = this.activeIndex
+                changeLiActive(this.activeIndex)
+                if (tagListData[tagIndex].content.length == 0) {
+                    await getTagInfo()
+                }
+            },
+        },
+    })
+}
+
+const bindEvent = async () => {
+    _(".tabs_title li").click((v, i) => {
+        mySwiper.slideTo(i)
+    })
+
+
+    // TODO 防抖 节流 优化这块代码
+    _(".swiper-slide").scroll(async v => {
+        //文档内容实际高度（包括超出视窗的溢出部分）
+        // ul 总高度
+
+        let ulHeight = v.children[0].clientHeight;
+
+        //滚动条滚动距离
+        //  ul 在 swiper-slide 中的滚动距离
+        let ulScrollTop = v.scrollTop
+
+        //窗口可视范围高度
+        // swiper-slide 高度
+        let SwiperSlideHeight = v.clientHeight
+
+        // console.log("ulHeight: ", ulHeight);
+        // console.log("ulScrollTop: ", ulScrollTop);
+        // console.log("SwiperSlideHeight: ", SwiperSlideHeight);
+        // console.log("");
+
+        if (SwiperSlideHeight + ulScrollTop >= ulHeight) {
+            tagListData[tagIndex].page += 1
+
+            if (tagListData[tagIndex].page <= tagListData[tagIndex].totalPage) {
+                console.log("===加载更多内容……===");
+                await getTagInfo()
+            }
+
+        }
+    })
+
+}
+
+const changeLiActive = async (index) => {
+    _(".tabs_title li").forEach(v => v.classList.remove("active"))
+    _(".tabs_title li")[index].classList.add("active")
+}
+
+
+
+
+init()

项目合集/最新写真app/fontend/js/serve/home.js

@@ -0,0 +1,38 @@
+
+
+/**
+ * 
+ * @param {*} data 是get请求的参数，
+ *                 由页面调用者传递过来给我
+ */
+const homeBanner = async (data = {}) => {
+    return await http().get({
+        url: config.urlList.homeBanner,
+        // data: data
+        data
+    })
+}
+
+const homeHot = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.homeHot,
+        // data: data
+        data
+    })
+    res.forEach(v => v.view = v.view.replaceAll("W+", ""));
+    return res
+}
+
+
+
+const homeList = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.homeList,
+        // data: data
+        data
+    });
+    res.forEach(v => v.view = v.view.replaceAll("W+", ""));
+    return res
+}
+
+

项目合集/最新写真app/fontend/js/serve/hot.js

@@ -0,0 +1,11 @@
+
+const hotList = async (data = {}) => {
+       let res = await http().get({
+           url: config.urlList.hotList,
+           // data: data
+           data
+       });
+       console.log(res)
+       res.list.forEach(v => v.view = v.view.replaceAll("W+", ""));
+       return res    
+   }

项目合集/最新写真app/fontend/js/serve/info.js

@@ -0,0 +1,7 @@
+const infoList = async (data = {}) => {
+    return await http().get({
+        url: config.urlList.infoList,
+        // data: data
+        data
+    });
+}

项目合集/最新写真app/fontend/js/serve/tag.js

@@ -0,0 +1,33 @@
+const tagRecommend = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.tagRecommend,
+        // data: data
+        data
+    });
+    res.forEach(v => v.short_title = v.title.substring(0,1));
+    return res
+}
+
+const tagList = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.tagList,
+        // data: data
+        data
+    });
+
+    res.forEach(v => {
+        v.page = 1;
+        v.totalPage = 0;
+        v.content = [];
+    });
+    
+    return res;
+}
+
+const tagInfo = async (data = {}) => {
+    return await http().get({
+        url: config.urlList.tagInfo,
+        // data: data
+        data
+    });
+}

项目合集/最新写真app/fontend/js/utils/index.js

@@ -0,0 +1,106 @@
+const footer = () => {
+    let currentHref = location.href
+    let html = `
+    <ul class="footer fixed flex jc-sb ai-c border-box border-top">
+        ${config.footerArr.maps((v, i) => {
+            return `<li class="${location.href.includes(v.href) ? 'active' : ''}"> 
+                        <a href="${v.href}">
+                            <i class="iconfont ${v.icon}"></i>
+                            <div>${v.title}</div>
+                        </a>
+                    </li>`
+        })}
+    </ul>
+    `
+    $("body").insertAdjacentHTML("beforeend", html)
+}
+
+const header = (right, center = "", left = `<i class="iconfont icon-fanhui"></i>`) => {
+    let html = `
+      <div class="header fixed flex ai-c jc-sb p18 border-box border-bottom">
+         ${left}
+         <div class="header_title ellipsis">${center}</div>
+         ${right}
+     </div>
+    `
+ 
+    $("body").insertAdjacentHTML("afterbegin", html)
+    _(".header .icon-fanhui").click(v => {
+        history.back()
+    })
+}
+
+const item = (father, data) => {
+    (typeof father == "string" ? $(father) : father).insertAdjacentHTML("beforeend",data.maps(v => {
+        return `
+         <li>
+            <a href="./info.html?id=${v.id}&time=${v.time}&view=${v.view}">
+                <img src="${v.thumbnail}" alt="">
+                <div class="desc">
+                    <div class="name ellipsis">${v.title}</div>
+                    <div class="time flex ai-c jc-sb">
+                        <div class="text">${v.time}</div>
+                        <div class="view flex ai-c">
+                            <i class="iconfont icon-liulan"></i>
+                            <span>${v.view}W+</span>
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </li>
+        `
+    }))
+}
+
+const query = name =>{
+     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+     var r = window.location.search.substr(1).match(reg);
+     if(r!=null)return  decodeURIComponent(r[2]); return null;
+}
+
+const stripIndents = (template, ...expressions) => {
+    let result = template.reduce((prev, next, i) => {
+        let expression = expressions[i - 1];
+        return prev + expression + next;
+    });
+
+    result = result.replace(/\n[^\S\n]*/g, '\n');
+    result = result.trim();
+
+    return result;
+}
+
+
+const innerMaps = (father, data, callback) => {
+    $(father).insertAdjacentHTML("afterbegin", data.maps((v,i) => {
+        return callback(v,i)
+    })) 
+}
+
+const $ = className => {
+    return document.querySelector(className)
+}
+
+const _ = className => {
+    return document.querySelectorAll(className)
+}
+
+// prototype 原型
+//  js给我们提供的一个方法，通过这个方法作为入口，
+//  我们可以直接对js进行修改
+Array.prototype.maps = function (callback) {
+    let result = []
+    for (let i = 0; i < this.length; i++) {
+        result.push(callback(this[i], i, this))
+    }
+    return result.toString().replaceAll(",", "")
+}
+
+NodeList.prototype.click = function (callback) {
+    this.forEach((v,i) => v.onclick = () => callback(v,i))
+}
+
+
+NodeList.prototype.scroll = function (callback) {
+    this.forEach((v,i) => v.onscroll = () => callback(v,i))
+}

项目合集/最新写真app/fontend/js/utils/rem.js

@@ -0,0 +1,10 @@
+(function (w, d) {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = screenWidth * 100 / 750;
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)

项目合集/最新写真app/fontend/page/hot.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>热门</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
+    <link rel="stylesheet" href="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4738996_qxm9myzsi3m.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/color.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/global.css">
+    <link rel="stylesheet" href="../css/index.css">
+</head>
+
+<body>
+    
+    <div class="content">
+
+        <div class="recommend-model random">
+            <ul class="list flex wrap p18 jc-sb"></ul>
+        </div>
+
+
+    </div>
+</body>
+<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
+<script src="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.js"> </script>
+
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/home.js"></script>
+<script src="../js/serve/tag.js"></script>
+<script src="../js/serve/hot.js"></script>
+<script src="../js/page/hot.js"></script>
+
+</html>

项目合集/最新写真app/fontend/page/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>首页</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
+    <link rel="stylesheet" href="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4738996_qxm9myzsi3m.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/color.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/global.css">
+    <link rel="stylesheet" href="../css/index.css">
+</head>
+
+<body>
+
+    <div class="header fixed flex ai-c jc-c">
+        <a class="search flex-block ai-c border-box" href="./search.html">
+            <i class="iconfont icon-sousuo-m"></i>
+            <div>开启精彩搜索..</div>
+        </a>
+    </div>
+
+
+    <div class="content">
+
+        <div class="swiper banner">
+            <div class="swiper-wrapper"></div>
+
+            <!-- 如果需要分页器 -->
+            <div class="swiper-pagination"></div>
+        </div>
+
+
+        <ul class="recommend-tag flex jc-sb"></ul>
+
+        <!-- 横向滑动 -->
+        <div class="recommend-model roll">
+            <div class="title p18 flex ai-c">推荐写真</div>
+            <ul class="list flex p18 jc-sb"></ul>
+        </div>
+
+
+        <div class="recommend-model random">
+            <!-- <div class="title p18 flex ai-c">随机写真</div> -->
+            <ul class="list flex wrap p18 jc-sb"></ul>
+        </div>
+
+
+    </div>
+
+
+</body>
+
+<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
+<script src="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.js"> </script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/home.js"></script>
+<script src="../js/serve/tag.js"></script>
+<script src="../js/page/index.js"></script>
+
+<script>
+    // let c = [1, 2, 3, 4, 5]
+
+    // Array.prototype.maps = function (callback) {
+    //     let result = []
+    //     for (let i = 0; i < this.length; i++) {
+    //         result.push(callback(this[i], i, this))
+    //     }
+    //     return result.toString().replaceAll(",", "")
+    // }
+
+    // let d = c.maps(v => {
+    //     return `<div>${v}</div>`
+    // })
+
+    // console.log(d);
+
+</script>
+
+</html>

项目合集/最新写真app/fontend/page/info.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>详情页</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/smartphoto@1.1.0/css/smartphoto.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4738996_qxm9myzsi3m.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/color.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/global.css">
+    <link rel="stylesheet" href="../css/info.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <div class="info relative hidden">
+          <div class="img_arr" data-expand="-100">
+           
+          </div>
+
+          <div class="all absolute flex jc-c ai-e border-box">
+            <span>展开更多</span>
+            <i class="iconfont icon-zhankai-copy"></i>
+          </div>
+
+        </div>
+        
+        <div class="recommend-model">
+            <div class="title p18 flex ai-c">推荐写真</div>
+            <ul class="list flex wrap p18 jc-sb"></ul>
+        </div>
+        
+    </div>
+
+
+</body>
+<script src="https://cdn.bootcdn.net/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
+<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
+<script src="https://unpkg.com/smartphoto@1.1.0/js/smartphoto.min.js"></script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/info.js"></script>
+<script src="../js/page/info.js"></script>
+
+</html>

项目合集/最新写真app/fontend/page/me.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>我的</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4738996_qxm9myzsi3m.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/color.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/global.css">
+    <link rel="stylesheet" href="../css/me.css">
+</head>
+
+<body>
+
+
+</body>
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/home.js"></script>
+<script src="../js/page/me.js"></script>
+
+</html>

项目合集/最新写真app/fontend/page/type.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>分类</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4738996_qxm9myzsi3m.css">
+    <link rel="stylesheet" href="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/color.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/global.css">
+    <link rel="stylesheet" href="../css/type.css">
+</head>
+
+<body>
+
+
+    <div class="content">
+        <ul class="tabs_title flex p18 x-scroll ai-c fixed"></ul>
+        <div class="swiper tabs_content">
+            <div class="swiper-wrapper"></div>
+        </div>
+    </div>
+
+</body>
+<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
+<script src="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.js"> </script>
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/tag.js"></script>
+<script src="../js/page/type.js"></script>
+
+</html>

项目合集/最新写真app/fontend/笔记.txt

@@ -0,0 +1,26 @@
+cookies:
+  把用户登录成功的状态放在请求头中
+  每次访问网址的时候，后端会从请求头中拿到cookies，
+  然后判断用户是否登录成功
+  
+  缺点：
+    cookie可能被禁用；
+    cookie与浏览器相关，不能互相访问；
+    cookie可能被用户删除；
+    cookie安全性不够高； 
+    cookie存储空间很小(只有4–10KB左右)
+
+session: 
+  生命周期是仅在当前浏览器窗口关闭前有效，不能持久保持。
+  在整个浏览器未关闭前，其数据一直都是存在的。存储大小一般为5M
+
+localStorage:
+  
+  
+http 协议 它是无状态
+
+状态（是否登录）
+
+http 
+
+http