一、案例效果
1、将通过数据重构页面
- 查询数据, 渲染页面
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b8d9cf49323a1cb081f5200614d9804.png)
2、全选
- 选中全选按钮后, 根据全选按钮的选中状态, 修改所有商品的选中状态
- 重新渲染视图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7dd84cad4f1495e7fc28878d581aedc6.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/077f8b83c2f798e2399994827709e050.png)
3、清空购物车
- 清空商品数据
- 重新渲染视图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/048dbbaaf2e5ef3c0790a9937b7e5f3a.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0d2b5928c4fd8fa49545581a0cd4da1b.png)
4、结算
- 找到所有选中的商品
- 计算所有选中商品各自的总价
- 计算所有选中商品的总价之和
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c11c028589ebb25c0515cbaef67d3982.png)
5、删除已选中
- 在原数组中, 找到选中的商品, 然后删除
- 重新渲染视图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8495e485cc134babc2f11b9386620e91.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a614450f3691e6cbdb4517dc45146ed7.png)
6、商品数量调整
- 找到对应的商品, 修改收藏数量
- 重新渲染视图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c6657c24e41a5c373522ea539dd98a16.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d77fe11a75b6e4f6d3e39ce45e5d8956.png)
7、选中商品
- 找到对应的商品, 修改选中状态
- 重新渲染视图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a0b14edc9c582758bfa6d7fb832184ac.png)
8、删除某一项
- 找到对应商品, 将删除
- 重新渲染视图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/feb6ebb237dfb83acd2e4b07b937a33a.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1558f85cd81a96e0725b9e95a1b73a90.png)
9、数据持久化 (浏览器关闭, 数据能保存)
- 本地存储
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/329205e09a7577ea9e591a7f54440a64.png)
二、案例分析
1. 数组数据分析
- id: 数据的唯一值
- status: true代表该商品被选中, false则为没被选中
- pic: 图片地址
- name: 商品名
- price: 价格
- number: 商品收藏数量
- total: 库存
2. 数据驱动视图
- 查: 查询数据, 渲染到页面
- 增删改: 找到源数据, 然后对源数据做修改, 修改完成, 重新渲染页面
3. 逻辑思维
- 准备一个渲染函数
- 首次打开页面时 调用
- 在各种事件触发之后, 重新调用
三、html代码
<div class="header">页面顶部</div>
<div class="content"></div>
<div class="footer">页面底部</div>
<script src="./index.js"></script>
四、css代码
* {
margin: 0;
padding: 0;
}
ul,ol,li {
list-style: none;
}
.header,.footer {
width: 1200px;
height: 100px;
background-color: skyblue;
color: #fff;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.footer {
height: 400px;
}
.content {
width: 1200px;
margin: 0 auto;
padding: 10px 0;
}
.content > .top,.content > .bottom {
height: 50px;
background-color: pink;
display: flex;
align-items: center;
}
.content > .bottom {
justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
}
.content > .bottom > .totalPrice > span {
font-size: 20px;
color: red;
}
.content > .bottom > .btns > button {
font-size: 18px;
padding: 5px 10px;
cursor: pointer;
}
.content > .top > input {
width: 30px;
height: 30px;
margin: 0 15px 0 50px;
}
.content > ul {
padding-top: 10px;
}
.content > ul > li {
width: 100%;
border: 1px solid #333;
box-sizing: border-box;
height: 100px;
margin-bottom: 10px;
display: flex;
}
.content > ul > li > div {
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #333;
}
.content > ul > li > div:last-child {
border: none;
}
.content > ul > li > .show,
.content > ul > li > .status {
width: 100px;
}
.content > ul > li > .status > input {
width: 30px;
height: 30px;
}
.content > ul > li > .show > img {
width: 100%;
height: 100%;
display: block;
}
.content > ul > li > .price,
.content > ul > li > .sub {
width: 200px;
color: red;
font-size: 20px;
}
.content > ul > li > .title {
width: 300px;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
padding: 5px;
}
.content > ul > li > .number {
width: 230px;
}
.content > ul > li > .number > input {
width: 50px;
height: 30px;
text-align: center;
margin: 0 5px;
border: none;
outline: none;
font-size: 18px;
}
.content > ul > li > .number > button {
width: 30px;
height: 30px;
cursor: pointer;
}
.content > ul > li > .destroy {
flex: 1;
}
.content > ul > li > .destroy > button {
padding: 5px;
font-size: 18px;
cursor: pointer;
}
五、js代码的实现
var cartList = JSON.parse(window.localStorage.getItem("cartList")) || [
{
id: 111234,
status: true,
pic: "https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332",
name: "我是一个手机, 不知道是啥",
price: 100,
number: 3,
total: 16,
},
{
id: 123456,
status: false,
pic: "https://img1.baidu.com/it/u=1537709578,2453227648&fm=253&fmt=auto&app=120&f=JPEG?w=809&h=500",
name: "我是一个电脑, 不知道是啥",
price: 98.72,
number: 1,
total: 7,
},
{
id: 965874,
status: true,
pic: "https://img2.baidu.com/it/u=3561506717,735421650&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
name: "我是一个手纸, 不知道是啥",
price: 356.21,
number: 2,
total: 22,
},
];
const oContent = document.querySelector('.content');
function myPage() {
let selectItem = 0;
let selectTotalNum = 0;
let totalPrice = 0;
cartList.forEach(function (item) {
if (item.status == true) {
selectItem++;
selectTotalNum += item.number;
totalPrice += item.price * item.number;
}
})
var str = `
<div class="top">
<input type="checkbox" class="checkAll" ${selectItem === cartList.length ? "checked" : ""}> 全选
</div>
`;
cartList.forEach(function (item) {
str += `
<ul>
<li>
<div class="status">
<input type="checkbox" class="checkOther" data-id="${item.id}" ${item.status ? "checked" : ""}>
</div>
<div class="show">
<img src="${item.pic}" alt="">
</div>
<div class="title">${item.name}</div>
<div class="price">¥ ${item.price.toFixed(2)}</div>
<div class="number">
<button class="reduce-btn" data-id="${item.id}">-</button>
<input type="text" value="${item.number}">
<button class="increase-btn" data-id="${item.id}">+</button>
</div>
<div class="sub">¥ ${(item.number * item.price).toFixed(2)}</div>
<div class="destroy">
<button class="del" data-id="${item.id}">删除</button>
</div>
</li>
</ul>
`;
})
str += `
<div class="bottom">
<div class="totalNum">总件数 : ${selectTotalNum}</div>
<div class="btns">
<button class="clearShopCart">清空购物车</button>
<button class="payment" data-totalPrice="${totalPrice}"">去结算</button>
<button class="delCheck">删除所有已选中</button>
</div>
<div class="totalPrice">
总价格 : ¥ <span>${totalPrice.toFixed(2)}</span>
</div>
</div>
`;
oContent.innerHTML = str;
window.localStorage.cartList = JSON.stringify(cartList);
}
myPage()
oContent.addEventListener('click', function (e) {
if (e.target.className === 'checkAll') {
cartList.forEach(function (item) {
console.log(e.target.checked);
item.status = e.target.checked;
})
myPage()
}
if (e.target.className === 'clearShopCart') {
var warn = confirm('您确定要清空购物车吗')
if (warn) {
cartList = [];
myPage()
}
}
if (e.target.className === 'payment') {
var price = e.target.dataset.totalprice;
price = Math.round(price)
confirm(`总价格为:${price}`)
}
if (e.target.className === 'delCheck') {
var warn = confirm('您确定要删除当前选择的吗')
if (!warn) return;
cartList = cartList.filter(function (item) {
return !item.status
})
myPage()
}
if (e.target.className === 'reduce-btn') {
cartList.forEach(function (item) {
if (item.id == e.target.dataset.id && item.number >= 2) item.number--;
})
myPage();
}
if (e.target.className === 'increase-btn') {
cartList.forEach(function (item) {
if (item.id == e.target.dataset.id && item.number < item.total) item.number++;
})
myPage();
}
if (e.target.className === 'checkOther') {
cartList.forEach(function (item) {
if (item.id == e.target.dataset.id) {
item.status = !item.status;
}
})
myPage()
}
if (e.target.className === 'del') {
var warn = confirm('您确定要删除当前的商品吗');
if(!warn) return;
cartList = cartList.filter(function(item){
return item.id != e.target.dataset.id;
})
myPage()
}
})