项目的简单描述加实例代码
一般项目的进项
在么有后端给前端的数据的时候，自己可以简单写一点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;
}
}
}
具体的操作，后期补上，或者需要的小伙伴，可以咨询一下下。