Vue（购物车案例代码笔记）
所有内容来⾃⿊马程序员课程，如果侵犯联系删除。
按照组件化⽅式实现业务需求
1. 按照业务功能进⾏组件化划分
- 标题组件（展⽰⽂本）
- 列表组件（列表展⽰，商品数量变更，商品删除）
- 组件结算（计算商品⾦额）
2.功能实现步骤
- 实现整体布局和样式效果
- 划分独⽴的功能组件
- 组合所有的⼦组件形成整体结构
-
网页购物车代码 逐个实现各个组件功能
-标题组件
-列表组件
-结算组件
html+css静态；初始状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.container .cart {
width:300px;
margin: auto;
}
.container .title {
background-color: lightblue;
height:40px;
line-height:40px;
text-align: center;
/*color: #fff;*/
}
.container .total {
background-color: #FFCE46;
height:50px;
line-height:50px;
text-align: right;
}
.container .total button {
margin:010px;
background-color: #DC4C40;
height:35px;
width:80px;
border:0;
}
.container .total span {
color: red;
font-weight: bold;
}
}
.container .item {
height:55px;
line-height:55px;
position: relative;
border-top:1px solid #ADD8E6;
}
.container .item img {
width:45px;
height:45px;
margin:5px;
}
.container .item .name {
position: absolute;
width:90px;
top:0;
left:55px;
font-size:16px;
}
.container .item .change {
width:100px;
position: absolute;
top:0;
right:50px;
}
.container .item .change a {
font-size:20px;
width:30px;
text-decoration: none;
background-color: lightgray;
vertical-align: middle;
}
.container .item .change .num {
width:40px;
height:25px;
}
.container .item .del {
position: absolute;
top:0;
right:0px;
width:40px;
text-align: center;
font-size:40px;
cursor: pointer;
color: red;
}
.container .item .del:hover {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="cart">
<div class="title">我的商品</div>
<div>
<div>
<div class="item">
<img src="img/1.ico" alt="">
<div class="name">哈哈哈哈</div>
<div class="change">
<a href="">-</a>
<input type="text"class="num">
<a href="">+</a>
</div>
<div class="del">*</div>
</div>
<div class="item">
<img src="img/1.ico" alt="">
<div class="name">哈哈哈哈</div>
<div class="change">
<a href="">-</a>
<input type="text"class="num">
<a href="">+</a>
</div>
<div class="del">*</div>
</div>
<div class="item">
<img src="img/1.ico" alt="">
<div class="name">哈哈哈哈</div>
<div class="change">
<a href="">-</a>
<input type="text"class="num">
<a href="">+</a>
</div>
<div class="del">*</div>
</div>
<div class="item">
<img src="img/1.ico" alt="">
<div class="name">哈哈哈哈</div>
<div class="change">
<a href="">-</a>
<input type="text"class="num">
<a href="">+</a>
</div>
<div class="del">*</div>
</div>
</div>
<div class="total">
<span>总价</span>
<button>结算</button>
</div>
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
</script>
</body>
</html>
vue后的代码：
// 引⼊json⽂件测试
const data =require('./data.json');
/
/引⼊路径模块
const path =require('path');
//引⼊操作⽂件模块
const fs =require('fs');
// ⾃动⽣成图书编号（⾃增）
// ⾃动⽣成图书编号（⾃增）
let maxBookCode=()=>{
let arr =[];
data.forEach((item)=>{
arr.push(item.id);
});
/
/ 返回数组中最⼤数
return Math.max.apply(null, arr);
};
// 把内存数据写⼊⽂件
let writeDataToFile=(res)=>{
console.log(res);
fs.writeFile(path.join(__dirname,'./data.json'),JSON.stringify(data,null,4),(err)=>{ if(err){
res.json({
status:500
});
}
res.json({
status:200
});
})
};
//获取图书列表
res.send(data);
};
//添加图书
exports.addBooks=(req, res)=>{
let info = req.body;
let book ={};
for(let key in info){
book[key]= info[key];
}
book.date =Date();
book.id =maxBookCode()+1;
data.push(book);
writeDataToFile(res);
};
// 验证图书是否存在
exports.checkName=(req, res)=>{
let name = req.params.name;
im().length ==0){
res.json({
status:3
})
}
// console.log(name);
let flag =false;
data.some(item =>{
if(item.name == name){
flag =true;
return true;
}
});
if(flag){
res.json({
status:1
});
}else{
res.json({
status:2
})
}
}
};
// 编辑图书根据id查图书exports.ToEditBook=(req, res)=>{ let id = req.params.id;
book ={};
data.some((item)=>{
if(id == item.id){
book = item;
return true;
}
});
res.json(book);
};
// 编辑图书功能
exports.editBook=(req, res)=>{ let info = req.body;
let id = req.params.id;
data.some(item =>{
if(item.id == id){
for(let key in info){
item[key]= info[key];
}
return true;
}
});
writeDataToFile(res);
};
// 删除图书
exports.deleteBook=(req, res)=>{ let id = req.params.id;
data.some((item, index)=>{
if(id == item.id){
data.splice(index,1);
return true;
}
})
writeDataToFile(res);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。