2021-07-13 BIYAO项目总结！！！

一.学会了什么

  1.调用接口，将接口应用于项目中

  2.登录和注册还有首页互相切换  讲注册登录数据保存到服务器中

  3.搜索能力与接口项目链接到一块

  4.楼层滚动。李老师教我们的是固定宽高 这次项目可以利用接口

    更加完美的实现滚动效果

  5.从一个页面到另一个页面的完美跳转

  6.纯js的轮播图

  7.购物车的添加和删除

  7.学会使用git 讲项目传入到git中保存

 

二.进步有哪些

  1.理解了接口的调用

  2.学会了纯js的轮播图该怎么写

  3.放大镜已经很熟练的掌握了

  4.数据渲染掌握的可以

 

三.哪里不会

  1.购物车写的不够好

  2.登录 注册 退出登录 购物车之间的切换挺复杂的

  3. 购物车中有若干商品信息，其中包括商品的名称、单价、数量，计算购物车中商品的总价。

     商品信息通过创建商品对象来实现，若干商品的加和通过创建数组来放置若干商品，

     再通过遍历数组读取指定属性对价格进行计算。

  

 

四.项目中的哪些业务是符合实现的

  1.搜索框

  2.数据渲染

  3.数据渲染介绍（放大镜，点击添加购物车，图片切换）

  4.楼层滚动 切换到点击的商品

  5.轮播图

    两种播放行为；（一种自动播放，一种控制播放），一个定时器控制。

 

五.项目中哪些亮点，详细介绍

  1.轮播图：图片的定时切换，点击向左向右按钮 然后随之切换

  2.楼层滚动 符合点击按钮 然后切换到自己的想要的商品位置

  3.懒加载 将懒加载加入数据渲染中 更换其中的图片 添加一些js代码

  4.放大镜 熟练的掌握了放大镜代码

     1、鼠标放上去会有半透明遮罩、右边会有大图片局部图

     2、鼠标在小图上移动时，通过捕捉鼠标在小图上的位置，定位大图片的响应位置

     3、放大镜的移动方向和大图片的移动方向，横向相反，纵向相反  

     4、技术点：事件捕获，定位

    onmouseover:会在鼠标指针移动到指定的对象上时发生

    onmouseout:会在鼠标指针移出指定的对象时发生

    onmosuemove:会在鼠标指针移动时发生

    offsetLeft:子元素相对父元素的左边距离

    offsetWidth:盒子的宽度，不报括滚动条

    event.clientX:鼠标的X轴，相对于整个页面(代码)

放大镜代码：

html：

  <div class="magnifier">

        <div class="left">

            <div class="samllBox">

                <img src="../assets/images/c.jpg" alt="" class="samllImg">

                <div class="occlude"></div>

            </div>

            <div class="Instance">

            </div>

        </div>

        

css：

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.magnifier{

    display: flex;

    justify-content: space-between;

    width: 980px;

    margin: 20px auto 0; 

}

.left{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 400px;

    height: 500px;

}

.samllBox{

    width: 400px;

    height: 400px;

    position: relative;

    border: 1px solid #cacaca;

}

.samllImg{

    width: 100%;

    height: 100%;

}

.occlude{

    width: 150px;

    height: 150px;

    background-color: red;

    opacity: .5;

    position: absolute;

    left: 0;

    top: 0;

    display: none;

    cursor: move;

}

.Instance{

    text-align: center;

    width: 100%;

}

.Instance img{

    width: 60px;

    height: 60px;

    margin: 0 5px;

    border: 1px solid #cacaca;

}

.Instance .imgthis{

    border: 1px solid red;

}

.rigth{

    width: 550px;

    height: 550px;

    border: 1px solid #cacaca; 

    padding: 50px;

    position: relative;

    overflow: hidden;

    

}

.information h2{

    font-size: 20px;

}

.information p{

    margin: 50px 0;

}

.information .price{

    color: red; 

    font-size: 18px;

}

.information button{

    width: 200px;

    height: 50px;

    font-size: 23px;

    background-color: red;

    color: #fff;

    border: none;

}

.bigImg{

    position: absolute;

    left: 0;

    top: 0;

    width: 750px;

    height: 750px;

    display: none;

}

js：

    var locaId = localStorage.getItem("locaId")

    function ajxa(url, fn) {

        var hrx = new XMLHttpRequest()

        hrx.open('get', `http://49.232.47.192:9527/api${url}`)

        hrx.send();

        hrx.onreadystatechange = function () {

            if (hrx.status === 200 & hrx.readyState === 4) {

                var fen = hrx.responseText;

                fen = JSON.parse(fen)

                fn(fen)

            }

        }

    }

    var information = document.querySelector(".information h2")

    var informationP = document.querySelector(".information p")

    var samllImg = document.querySelector('.samllImg')

    var Instance = document.querySelector('.Instance')

    var bigImg = document.querySelector('.bigImg')

    var samllBox = document.querySelector('.samllBox')

    var occlude = document.querySelector('.occlude')

    var rigth = document.querySelector('.rigth')

    ajxa(`/detail?goodId=${locaId}`, function (x) {

        console.log(x);

        information.innerHTML = x[0].title;

        informationP.innerHTML = `

        <span class="price">￥${x[0].price}</span>

                  ${x[0].mack}

        `

        samllImg.src = x[0].img_url

        bigImg.src = x[0].img_url

        var imgs = x[0].imgs.slice(1, x[0].imgs.length - 1).split(",");

        for (var j = 0; j < imgs.length; j++) {

            var img = document.createElement('img');

            if (j == 0) {

                img.classList.add('imgthis')

            }

            img.src = imgs[j].slice(1, imgs[j].length - 1)

            Instance.appendChild(img)

        }

        var img = Instance.children;

        for (let n = 0; n < img.length; n++) {

            img[n].onclick = function () {

                for (var j = 0; j < img.length; j++) {

                    img[j].classList.remove('imgthis')

                }

                this.classList.add('imgthis')

                samllImg.src = this.src;

                bigImg.src = this.src

            }

        }

        samllBox.onmouseover = function () {

            occlude.style.display = "block";

            bigImg.style.display = "block";

        }

        samllBox.onmouseout = function () {

            occlude.style.display = "none";

            bigImg.style.display = "none";

        }

        samllBox.onmousemove = function (e) {

            var x = e.pageX - samllBox.offsetLeft - occlude.offsetWidth / 2;

            var y = e.pageY - samllBox.offsetTop - occlude.offsetHeight / 2;

            var maxX = samllBox.offsetWidth - occlude.offsetWidth;

            var maxY = samllBox.offsetHeight - occlude.offsetHeight;

            if (x <= 0) {

                x = 0

            }

            if (x >= maxX) {

                x = maxX;

            }

            if (y <= 0) {

                y = 0

            }

            if (y >= maxY) {

                y = maxY;

            }

            occlude.style.left = x + 'px';

            occlude.style.top = y + 'px';

            var bigImgX = bigImg.offsetWidth - rigth.offsetWidth;

            var bigImgY = bigImg.offsetHeight - rigth.offsetHeight;

            bigImg.style.left = -(x * bigImgX / maxX) + "px";

            bigImg.style.top = -(y * bigImgY / maxY) + "px";

        }

    })