网上商城项目总结报告

最新推荐文章于 2025-01-29 21:30:46 发布

WEB前端程序贵

最新推荐文章于 2025-01-29 21:30:46 发布

阅读量1w

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/qq_47828983/article/details/118709037

版权

这篇总结报告详述了一位开发者在构建网上商城项目中的学习经历与进步。项目涵盖了首页、登录注册、搜索、商品展示、分页、轮播图等功能。技术亮点包括使用模块化开发、axios进行API调用、localStorage实现页面交互、事件绑定实现页面跳转、正则验证以及登录退出状态切换。通过这个项目，开发者深化了对前端技术的理解并认识到自身需要进一步提升的地方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上商城项目总结报告

1：掌握的知识

通过网上商城这个实战项目的开发，不仅了解到了一个项目的业务逻辑，而且掌握了实现相关业务功能的方法。
通过这个实战项目，了解到了模块化开发项目的基础结构的搭建，以及项目文件的管理方式。
通过这个实战项目，运用封装的接口api文档实现了客户端服务器之间的交互知识。
通过封装的axios实例对象与方法，向服务器请求数据，然后渲染页面。
通过运用localStorage本地储存的相关知识，实现了页面之间的交互传值。
通过编写轮播图、导航栏等组件，封装函数实现页面的开发。

2：进步的意义

通过这个实战项目的开发，我不仅收获了很多新的知识，并能够将所学的知识进行合理的运用。在编写项目的过程中，能够更加充分的认识到自己的不足。由于在编写过程中，存在很多的知识盲点，很多功能都存在大大小小的bug。经过不断的查阅知识，顿时豁然开朗。这次的项目实战，真的使我受益匪浅。它让我更加坚定了，我需要更加努力学习的信念。

3：项目业务的主要内容及实现方式

项目主要包括七个方面：

首页

首页主要是由登录注册功能菜单，搜索框组成的导航栏与轮播图、分类栏、渲染的商品列表组成。

登录注册功能菜单主要是通过页面跳转的方式来实现的，通过给每一个元素绑定点击事件，触发location.href来实现的。

// 页面跳转
function HTMLJump() {
     
    if (oldindex === 0) {
     
        location.href = "index.html";
    } else if (oldindex === 1) {
     
        location.href = "login.html";
    } else if (oldindex === 2) {
     
        location.href = "register.html";
    } else if (oldindex === 3) {
     
        location.href = "shopCar.html";
    }
}

搜索框是通过绑定onchange事件，触发location.href来实现页面传值与跳转功能的。

searchinput.onchange = function () {
     
    var valuenum = searchinput.value;
    location.href = `search.html?word=${
       valuenum}`;
}

搜索按钮也是通过绑定点击事件，触发location.href来实现页面传值与跳转功能的。

seachboxbtn.onclick = function () {
    if (!searchinput.value == null) {
        var valuenum = searchinput.value;
        location.href = `search.html?word=${valuenum}`;
    }else{
        alert("您还没告诉我您想要什么呢！！");
    }
}

轮播图组件的编写

html部分
 <div class="lunbox B-W-c">
            <div class="Carouselbox">
                <div class="swiper">
                    <div class="C-itembox"><img src="../assets/images/a.jpg" alt=""></div>
                    <div class="C-itembox"><img src="../assets/images/b.jpg" alt=""></div>
                    <div class="C-itembox"><img src="../assets/images/c.jpg" alt=""></div>
                    <div class="C-itembox"><img src="../assets/images/d.jpg" alt=""></div>
                    <div class="C-itembox"><img src="../assets/images/e.jpg" alt=""></div>
                    <div class="C-itembox"><img src="../assets/images/a.jpg" alt=""></div>
                </div>
                <div class="control">
                    <div class="prevent">&lt;</div>
                    <div class="next">&gt;</div>
                </div>
                <div class="point">
                    <span class="point-item active"></span>
                    <span class="point-item"></span>
                    <span class="point-item"></span>
                    <span class="point-item"></span>
                    <span class="point-item"></span>
                </div>
            </div>
        </div>

js部分
// 自动播放
var swiper = document.querySelector(".swiper");
var prevent = document.querySelector(".prevent");
var next = document.querySelector(".next");
var left = 0;
//轮播图主要原理
function lunbo(num) {
     
    left += num;
    if (left < -500) {
     
        left = 0;
        startTransition(num);
    }
    if (left > 0) {
     
        left = -500;
        startTransition(num);
    }
    swiper.style.left = left + "%";
    CI();
}
//过渡效果
function startTransition(num) {
     
    swiper.style.transition = "none";
    var t = setTimeout(function () {
     
        swiper.style.transition = "all 2s";
        left += num;
        swiper.style.left = left + "%";
    }, 20);
}

var timer = setInterval(function () {
     
    lunbo(-100);
}, 5000);
// 计时器绑定轮播图
var pointitem = document.querySelectorAll(".point-item");
var count = 0;
function CI() {
     
    count

最低0.47元/天解锁文章