网上商城项目总结报告
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"><</div> <div class="next">></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