网上商城项目总结报告

网上商城项目总结报告

1：掌握的知识

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

2：进步的意义

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

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

项目主要包括七个方面：

1. 首页

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

   登录注册功能菜单主要是通过页面跳转的方式来实现的，通过给每一个元素绑定点击事件，触发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