利用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部分
Bootstrap购物车
![]()
{{ item.productInfo }}
{{ item.productName }}
￥
{{ item.price | toFixed(2) }}
￥
{{ priceSum(item.price,item.number) | toFixed(2) }}
-下面是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