利用vuejs和mockjs模拟购物车简单制作
1、如果还没有了解mockjs，建议去官网了解一下：https://github.com/nuysoft/Mock/wiki/Image
2、首先第一步就是先自己制作模拟数据（当然也可以用nodejs的MVC模式下引入mockjs来获取模拟数据，在前端用ajax跨域请求获取后端接口数据）；
-首先还是要用nodejs指令来搭建环境的，需要有nodejs基础
-下面是mockModel 模拟数据层的代码块，包括引入mockjs模块：
//首先引入mockjs模块
const Mock = require('mockjs');
// 定义一个数组来存放生成的每个data对象
var arr = [];
for(var i = 0 ; i < 20 ; i++){
var data = Mock.mock({
'id': i+1,
'isSelected':false,
//下面是通过mckjs模块产生随机数据
'productPic':Mock.Random.image('100×100','#fb0a2a'),
'productName':Mock.Random.cparagraph(1),
'productInfo':Mock.Random.cparagraph(1),
'price':Mock.Random.float(0,100),
'number':1
})
arr.push(data);
}
module.exports = {
arr
}
-下面是Controllers层的shopController.js模块,提供api接口数据格式
const mockData = require('../mockModel/mockModel');
function shopController (req, res) {
shopCar = {
error_code:0,
reason:'返回数据成功',
shopcar:mockData.arr
}
res.json(shopCar);
};
//暴露接口
module.exports = {
shopController,
}
-下面是路由shop.js模块：
var express = require('express');
var router = express.Router();
var shopCatCon = require('../controllers/shopController');
/* GET users listing. */
router.get('/list', shopCatCon.shopController);
module.exports = router;
-下面是app.js部分：
var express = require('express');
var path = require('path');
//解决跨域问题
var cors = require('cors');
//引入外置路由
var shopsRouter = require('./routes/shops');
var app = express();
app.use(cors());
//注册路由
app.use('/shop', shopsRouter);
//设置监听端口号
var port = 3000;
app.listen(port,()=>{
console.log('this server is running at '+port)
})
//暴露
module.exports = app;
-下面是HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap购物车</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<body>
<div class="shopping-car-container" id="cartBox">
<div class="car-headers-menu">
<div class="row">
<div class="col-md-1 car-menu">
<label><input type="checkbox" id="check-goods-all" v-model="isSelectedAll"/><span id="checkAll">全选</span></label>
</div>
<div class="col-md-3 car-menu">商品信息</div>
<div class="col-md-3 car-menu">商品参数</div>
<div class="col-md-1 car-menu">单价</div>
<div class="col-md-1 car-menu">数量</div>
<div class="col-md-1 car-menu">金额</div>
<div class="col-md-2 car-menu">操作</div>
</div>
</div>
<div class="goods-content" v-for="item in shopCar">
<div class="goods-item">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-1 car-goods-info">
<label><input type="checkbox" class="goods-list-item" v-model="item.isSelected" /></label>
</div>
<div class="col-md-3 car-goods-info goods-image-column">
<img class="goods-image" :src=" item.productPic " style="width: 100px; height: 100px;" />
<span id="goods-info">
{{ item.productInfo }}
</span>
</div>
<div class="col-md-3 car-goods-info goods-params">{{ item.productName }} </div>
<div class="col-md-1 car-goods-info goods-price"><span>￥</span><span class="single-price">
{{ item.price | toFixed(2) }} </span></div>
<div class="col-md-1 car-goods-info goods-counts">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default car-decrease">-</button>
</div>
<input type="text" class="form-control goods-count" value="" v-model=" item.number ">
<div class="input-group-btn">
<button type="button" class="btn btn-default car-add">+</button>
</div>
</div>
</div>
<div class="col-md-1 car-goods-info goods-money-count"><span>￥</span><span class="single-total">
{{ priceSum(item.price,item.number) | toFixed(2) }}</span></div>
<div class="col-md-2 car-goods-info goods-operate">
<button type="button" class="btn btn-danger item-delete" @click="delProduct(item)">删除</button>
</div>
</div>
</div>
</div>
<!--goods display-->
</div>
<div class="panel panel-default">
<div class="panel-body bottom-menu-include">
<div class="col-md-1 check-all-bottom bottom-menu">
<label>
<input type="checkbox" id="checked-all-bottom" />
<span id="checkAllBottom">全选</span>
</label>
</div>
<div class="col-md-1 bottom-menu">
<span id="deleteMulty">
删除
</span>
</div>
<div class="col-md-6 bottom-menu">
</div>
<div class="col-md-2 bottom-menu">
<span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
</div>
<div class="col-md-1 bottom-menu">
<span>合计：<span id="selectGoodsMoney">{{ total | toFixed(2) }}</span></span>
</div>
<div class="col-md-1 bottom-menu submitData" :style="style">
结算
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="js/renderVue.js"></script>
-下面是JavaScript部分
//ajax发送请求
$.ajax({
url:'http://localhost:3000/shop/list',
type:'GET',
dataType:'json',
success:(data)=>{
shiLiVue(data)
}
});
function shiLiVue(data){
var shopCar = data.shopcar;
var vm = new Vue({
el:'#cartBox',
data:{
shopCar,
number:0,
style:'',
isSelected:false,
},
computed:{
//es6中写法
priceSum(){
var lPriceSum = 0;
//参数要从这里传
return function(pr,num){
lPriceSum = pr * num;
return lPriceSum;
};
},
//全选按钮
isSelectedAll:{
get:function(){
//遍历一个数组，若数组中的对象中的某个属性为true时，则为true，否则都为false
return this.shopCar.every((ele,index)=>{
//当
return ele.isSelected;
});
},
//当isSelectedAll当前的这个属性发生变化时，就会执行set操作，
set:function(val){
console.log(val);
return this.shopCar.map((ele,index)=>{
return ele.isSelected = val;
});
}
},
//计算全部商品的总价，选中的时候才会进行，就是依赖于选中商品的数量
total:function(){
//定义一个接受总价的容器
var totalAll;
//reduce是es5中的一个累加api，用于循环数组的，pre会从0开始，return的结果又作为pre传入
totalAll = this.shopCar.reduce((pre,nextItem)=>{
console.log(pre,nextItem);
if(nextItem.isSelected){
return pre + (nextItem.price * nextItem.number);
}
//否则返回 pre 最后一个，已经没有nextItem的时候
else{
return pre;
}
},0);
return totalAll;
}
},
//局部过滤器,这里注意filters是复数形式
filters:{
//一般要传连个参数，第一个参数是priceSum()的返回值，第二个参数是到底该保留几位数
toFixed:function(input,params){
// console.log(input,params);
//返回该保留位数后的小计
return input.toFixed(params);
}
},
//删除，方法块
methods:{
delProduct:function(item){
//filter如果返回值是true时，则保留，否则过滤掉
this.shopCar = this.shopCar.filter((ele,index)=>{
//进行删除。即过滤掉当前要删除的item
return ele !== item;
});
},
}
});
}
好了，整体大概就是这样，看看效果呗！嘻嘻，可能写的有点多，希望有路过的小伙伴，有什么优化的请留言哦。谢谢
image.png
