Mockjs 首先还是要用nodejs指令来搭建环境的，需要有nodejs基础 下面是mockModel 模拟数据层的代码块，包括引入mockjs模块：
const Mock = require ( 'mockjs' ) ;
var arr = [ ] ;
for ( var i = 0 ; i < 20 ; i++ ) {
var data = Mock. mock ( {
'id' : i+ 1 ,
'isSelected' : false ,
'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,
}
var express = require('express');
var router = express.Router();
var shopCatCon = require('../controllers/shopController');
/* GET users listing. */
router.get('/list', shopCatCon.shopController);
module.exports = router;
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;
<!DOCTYPE html>
< html> < head> < metacharset = " utf-8" /> < title> </ title> </ head> < linkrel = " stylesheet" type = " text/css" href = " css/bootstrap.css" > < linktype = " text/css" rel = " stylesheet" href = " css/style.css" /> < body> < divclass = " shopping-car-container" id = " cartBox" > < divclass = " car-headers-menu" > < divclass = " row" > < divclass = " col-md-1 car-menu" > < label> < inputtype = " checkbox" id = " check-goods-all" v-model = " isSelectedAll" /> < spanid = " checkAll" > </ span> </ label> </ div> < divclass = " col-md-3 car-menu" > </ div> < divclass = " col-md-3 car-menu" > </ div> < divclass = " col-md-1 car-menu" > </ div> < divclass = " col-md-1 car-menu" > </ div> < divclass = " col-md-1 car-menu" > </ div> < divclass = " col-md-2 car-menu" > </ div> </ div> </ div> < divclass = " goods-content" v-for = " item in shopCar" > < divclass = " goods-item" > < divclass = " panel panel-default" > < divclass = " panel-body" > < divclass = " col-md-1 car-goods-info" > < label> < inputtype = " checkbox" class = " goods-list-item" v-model = " item.isSelected" /> </ label> </ div> < divclass = " col-md-3 car-goods-info goods-image-column" > < imgclass = " goods-image" :src = " item.productPic " style =" width : 100px; height : 100px; " /> < spanid = " goods-info" > </ span> </ div> < divclass = " col-md-3 car-goods-info goods-params" > </ div> < divclass = " col-md-1 car-goods-info goods-price" > < span> </ span> < spanclass = " single-price" > </ span> </ div> < divclass = " col-md-1 car-goods-info goods-counts" > < divclass = " input-group" > < divclass = " input-group-btn" > < buttontype = " button" class = " btn btn-default car-decrease" > </ button> </ div> < inputtype = " text" class = " form-control goods-count" value = " " v-model = " item.number " > < divclass = " input-group-btn" > < buttontype = " button" class = " btn btn-default car-add" > </ button> </ div> </ div> </ div> < divclass = " col-md-1 car-goods-info goods-money-count" > < span> </ span> < spanclass = " single-total" > </ span> </ div> < divclass = " col-md-2 car-goods-info goods-operate" > < buttontype = " button" class = " btn btn-danger item-delete" @click = " delProduct(item)" > </ button> </ div> </ div> </ div> </ div> </ div> < divclass = " panel panel-default" > < divclass = " panel-body bottom-menu-include" > < divclass = " col-md-1 check-all-bottom bottom-menu" > < label> < inputtype = " checkbox" id = " checked-all-bottom" /> < spanid = " checkAllBottom" > </ span> </ label> </ div> < divclass = " col-md-1 bottom-menu" > < spanid = " deleteMulty" > </ span> </ div> < divclass = " col-md-6 bottom-menu" > </ div> < divclass = " col-md-2 bottom-menu" > < span> < spanid = " selectGoodsCount" > </ span> </ span> </ div> < divclass = " col-md-1 bottom-menu" > < span> < spanid = " selectGoodsMoney" > </ span> </ span> </ div> < divclass = " col-md-1 bottom-menu submitData" : style =" style " > </ div> </ div> </ div> </ div> </ body> </ html> < scripttype = " text/javascript" src = " js/jquery.min.js" > </ script> < scriptsrc = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ script> < scripttype = " text/javascript" src = " js/renderVue.js" > </ script>
$. 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: {
priceSum ( ) {
var lPriceSum = 0 ;
return function ( pr, num) {
lPriceSum = pr * num;
return lPriceSum;
} ;
} ,
isSelectedAll: {
get : function ( ) {
return this . shopCar. every ( ( ele, index) => {
return ele. isSelected;
} ) ;
} ,
set : function ( val) {
console. log ( val) ;
return this . shopCar. map ( ( ele, index) => {
return ele. isSelected = val;
} ) ;
}
} ,
total: function ( ) {
var totalAll;
totalAll = this . shopCar. reduce ( ( pre, nextItem) => {
console. log ( pre, nextItem) ;
if ( nextItem. isSelected) {
return pre + ( nextItem. price * nextItem. number) ;
}
else {
return pre;
}
} , 0 ) ;
return totalAll;
}
} ,
filters: {
toFixed: function ( input, params) {
return input. toFixed ( params) ;
}
} ,
methods: {
delProduct: function ( item) {
this . shopCar = this . shopCar. filter ( ( ele, index) => {
return ele !== item;
} ) ;
} ,
}
} ) ;
}
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
