利用vuejs和mockjs模擬購(gòu)物車(chē)簡(jiǎn)單制作
1玻粪、如果還沒(méi)有了解mockjs，建議去官網(wǎng)了解一下：https://github.com/nuysoft/Mock/wiki/Image
2、首先第一步就是先自己制作模擬數(shù)據(jù)（當(dāng)然也可以用nodejs的MVC模式下引入mockjs來(lái)獲取模擬數(shù)據(jù)，在前端用ajax跨域請(qǐng)求獲取后端接口數(shù)據(jù)）；
-首先還是要用nodejs指令來(lái)搭建環(huán)境的首量，需要有nodejs基礎(chǔ)
-下面是mockModel 模擬數(shù)據(jù)層的代碼塊，包括引入mockjs模塊：
//首先引入mockjs模塊
const Mock = require('mockjs');
// 定義一個(gè)數(shù)組來(lái)存放生成的每個(gè)data對(duì)象
var arr = [];
for(var i = 0 ; i < 20 ; i++){
var data = Mock.mock({
'id': i+1,
'isSelected':false,
//下面是通過(guò)mckjs模塊產(chǎn)生隨機(jī)數(shù)據(jù)
'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接口數(shù)據(jù)格式
const mockData = require('../mockModel/mockModel');
function shopController (req, res) {
shopCar = {
error_code:0,
reason:'返回?cái)?shù)據(jù)成功',
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');
//解決跨域問(wèn)題
var cors = require('cors');
//引入外置路由
var shopsRouter = require('./routes/shops');
var app = express();
app.use(cors());
//注冊(cè)路由
app.use('/shop', shopsRouter);
//設(shè)置監(jiān)聽(tīng)端口號(hào)
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購(gòu)物車(chē)</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">商品參數(shù)</div>
<div class="col-md-1 car-menu">單價(jià)</div>
<div class="col-md-1 car-menu">數(shù)量</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>合計(jì)：<span id="selectGoodsMoney">{{ total | toFixed(2) }}</span></span>
</div>
<div class="col-md-1 bottom-menu submitData" :style="style">
結(jié)算
</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發(fā)送請(qǐng)求
$.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中寫(xiě)法
priceSum(){
var lPriceSum = 0;
//參數(shù)要從這里傳
return function(pr,num){
lPriceSum = pr * num;
return lPriceSum;
};
},
//全選按鈕
isSelectedAll:{
get:function(){
//遍歷一個(gè)數(shù)組进苍，若數(shù)組中的對(duì)象中的某個(gè)屬性為true時(shí)加缘，則為true，否則都為false
return this.shopCar.every((ele,index)=>{
//當(dāng)
return ele.isSelected;
});
},
//當(dāng)isSelectedAll當(dāng)前的這個(gè)屬性發(fā)生變化時(shí)琅捏，就會(huì)執(zhí)行set操作，
set:function(val){
console.log(val);
return this.shopCar.map((ele,index)=>{
return ele.isSelected = val;
});
}
},
//計(jì)算全部商品的總價(jià)递雀，選中的時(shí)候才會(huì)進(jìn)行柄延，就是依賴(lài)于選中商品的數(shù)量
total:function(){
//定義一個(gè)接受總價(jià)的容器
var totalAll;
//reduce是es5中的一個(gè)累加api，用于循環(huán)數(shù)組的缀程，pre會(huì)從0開(kāi)始搜吧，return的結(jié)果又作為pre傳入
totalAll = this.shopCar.reduce((pre,nextItem)=>{
console.log(pre,nextItem);
if(nextItem.isSelected){
return pre + (nextItem.price * nextItem.number);
}
//否則返回 pre 最后一個(gè)，已經(jīng)沒(méi)有nextItem的時(shí)候
else{
return pre;
}
},0);
return totalAll;
}
},
//局部過(guò)濾器,這里注意filters是復(fù)數(shù)形式
filters:{
//一般要傳連個(gè)參數(shù)杨凑，第一個(gè)參數(shù)是priceSum()的返回值滤奈，第二個(gè)參數(shù)是到底該保留幾位數(shù)
toFixed:function(input,params){
// console.log(input,params);
//返回該保留位數(shù)后的小計(jì)
return input.toFixed(params);
}
},
//刪除，方法塊
methods:{
delProduct:function(item){
//filter如果返回值是true時(shí)撩满，則保留蜒程，否則過(guò)濾掉
this.shopCar = this.shopCar.filter((ele,index)=>{
//進(jìn)行刪除。即過(guò)濾掉當(dāng)前要?jiǎng)h除的item
return ele !== item;
});
},
}
});
}
好了伺帘，整體大概就是這樣昭躺，看看效果唄！嘻嘻伪嫁，可能寫(xiě)的有點(diǎn)多领炫，希望有路過(guò)的小伙伴，有什么優(yōu)化的請(qǐng)留言哦张咳。謝謝
image.png
