项目的简单描述加实例代码

一般项目的进项

在么有后端给前端的数据的时候，自己可以简单写一点php文件，当然是你会的前提下。不会的话就自己就用数组去代替，编辑一些内容，是的项目有简单的效果出来 。在最后后端给数据的时候 ，直接调用，加以修饰就可以了

明白自己的思路是什么

先自己搭建一下布局
需要怎样的结构数据维护 ，都需要哪些页面的支撑 ，首页 ，列表页，详情页，购物车，以及登录和注册。
每个页面要达到的效果是什么，swiper，tab等等。注意的是，每个页面的所有按钮应该都是可以点击的，至于点击事件一般用jq，ajax写，目前来说比原生js要方便的多。但是原生js是根本 ，也可以说是必须会的。熟练操作原生js就是给自己准备的最强大的垫脚石。在不用插件的情况下，自己写原生是很厉害的了。

下面简单的分享一下效果思路，还是有待完善的

这个是简单的用scss写的样式图，但是里面的联动效果是全局的，全选点中的时候，下面的CheckBox要选中，并且后边的数量计算 ，总数量，单价计算，总价都要跟着变化。
下面是html代码

<div class="cart">
<div class="top">
  <input type="checkbox">全选
</div>
<div class="center">
  <ul>
    <li>
      <div class="select">
        <input type="checkbox">
      </div>
      <div class="info">
        <img src="https://i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633!250x250.jpg" alt="">
        <p>商品介绍</p>
      </div>
        <p class='price'>单价100</p>
      <div class="number">
        <button class='sub'>-</button>
        <input type="text" value='1'>
        <button class="add">+</button>
      </div>
      <p class='sum'>小计：price*value</p>
      <div class="del">删除</div>
    </li>
    <li>
      <div class="select">
        <input type="checkbox">
      </div>
      <div class="info">
        <img src="https://i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633!250x250.jpg" alt="">
        <p>商品介绍</p>
      </div>
        <p class='price'>单价100</p>
      <div class="number">
        <button class='sub'>-</button>
        <input type="text" value='1'>
        <button class="add">+</button>
      </div>
      <p class='sum'>小计：price*value</p>
      <div class="del">删除</div>
    </li>
  </ul>
</div>

<div class="bottom">
  <p>选中商品数量：
    <span>3</span>
  </p>
  <p>总价：
    <span>1000</span>
  </p>
  <button class='pay'>去支付</button>
  <button>清空购物车</button>

 </div>
</div>

需要多少数据，自己可以直接li 的去赋值或者在js中用模板字符串 `` 让它自动添加。相对来说，模板字符串，相对来说还是比较好用的，
let str=’’
创建一个空的字符串str 模板字符串

str +=
`
    <li data-id='${item.id}'>
        <img src="${item.verticalPic}" alt="">
        <p>${item.name}</p>
        </li>
`

这个是例子，需要进行${}立面内容的修改，借鉴一下即可。

下面是scss样式。跟css一样。只不过是通过scss转化成css的

* {
	  margin: 0;
	  padding: 0;
	}

 ul, li {
	  list-style: none;
	}

	.cart {
	  width: 1200px;
	  margin: 30px auto;
	  display: flex;
	  flex-direction: column;
	  border: 1px solid #333;
	  >.top {
	    height: 60px;
	    border-bottom: 1px solid #333;
	    display: flex;
	    align-items: center;
	    font-size: 20px;
	
	    >input {
	      width: 30px;
	      height: 30px;
	    }
	  }
	  >.center {
	    li {
	      display: flex;
	      margin: 10px;
	      border: 1px solid #333;
	      >.select {
	        width: 100px;
	        height: 100px;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        border-right: 1px solid #333;
	        >input {
	          width: 20px;
	          height: 20px;
	        }
	      }
	      >.info {
	        display: flex;
	        align-items: center;
	        >img {
	          width: 100px;
	          height: 100px;
	          display: block;
	          margin-right: 10px;
	        }
	        >p {
	          font-size: 20px;
	        }
	      }
      >.price {
        display: flex;
        align-items: center;
        font-size: 20px;
        margin-left: 50px;
      }
      >.number {
        margin-left: 100px;
        display: flex;
        align-items: center;
        >button {
          width: 30px;
          height: 30px;
        }
        >input {
          height: 30px;
          border: none;
          outline: none;
          width: 100px;
          font-size: 20px;
          text-align: center;
        }
      }
     .sum {
        display: flex;
        align-items: center;
        margin-left: 50px;
        font-size: 20px;
      }
      >.del {
        margin-left: 100px;
        font-size: 20px;
        display: flex;
        align-items: center;
      }
    }
  }
  >.bottom {
    height: 60px;
    border-top: 1px solid #333;
    font-size: 35px;
    display: flex;
    align-items: center;
    >p {
      padding-right: 40px;
    }
    >button {
      margin-right: 40px;
      width: 200px;
      height: 50px;
      font-size: 30px;
    }
    >.pay {
      background-color: burlywood;
    }
  }
}

具体的操作，后期补上，或者需要的小伙伴，可以咨询一下下。