Vue nodejs商城项目-商品列表页面组件
data(){
return {
goodsList:[], // 商品列表
priceFilter:[ // 价格区间数组
{
startPrice:\'0.00\',
endPrice:\'100.00\'
},
{
startPrice:\'100.00\',
endPrice:\'500.00\'
},
{
startPrice:\'500.00\',
endPrice:\'1000.00\'
},
{
startPrice:\'1000.00\',
endPrice:\'5000.00\'
}
],
priceChecked:\'all\', // 选中的价格区间
filterBy:false, // 控制价格菜单的显示
overLayFlag:false, // 遮罩的显示
sortFlag:true, // 排序:默认升序
page:1, // 当前第一页
pageSize:8, // 一页有8条数据
busy:true, // 滚动加载插件默认禁用
loading:false, // 往下滚动"加载图标"的出现效果
mdShow:false, // 未登录的模态框是否显示
mdShowCart:false // 已登录的模态框是否显示
}
},
components:{
NavHeader,
NavFooter,
NavBread,
Modal
},
mounted:function(){
this.getGoodsList();
},
methods:{
getGoodsList(flag){
var param = {
page:this.page,
pageSize:this.pageSize,
sort:this.sortFlag ? 1 : -1 , // sortFlag为true升序
priceLevel:this.priceChecked // 点击的价格区间
}
this.loading = true;
axios.get("/goods/list",{
params:param // 传参
}).then((res)=>{
var res = res.data;
this.loading = false;
if(res.status == "0"){
if(flag){ // true.商品数据累加
this.goodsList = this.goodsList.concat(res.result.list);
if(res.result.count == 0){ // 0条数据了，就不加载滚动加载方法了
this.busy = true; // 禁用
}else{
this.busy = false; // 启用
}
}else{ // 只加载一页
this.goodsList = res.result.list;
this.busy = false;
}
}else{
this.goodsList = [];
}
})
},
sortGoods(){ // 点击排序商品
this.sortFlag = !this.sortFlag;
this.page = 1; // 点击价格排序后从第一页开始
this.getGoodsList(); // 重新加载数据
},
setPriceFilter(index){ // 点击价格
this.priceChecked = index;
this.closePop();
this.getGoodsList();
},
showFilterPop(){ // 点击filterBy出现价格菜单和遮罩
this.filterBy = true;
this.overLayFlag = true;
},
closePop(){ // 关闭价格菜单和遮罩
this.filterBy = false;
this.overLayFlag = false;
},
loadMore(){ // 滚动加载插件方法
this.busy = true; // 滚动就禁用，防止下一个滚动
setTimeout(() => { // 一个滚动完成之后再滚动加载下一个
this.page++;
this.getGoodsList(true); // 滚动加载是累加数据，并不是只显示一页数据，so需要传参去请求数据的地方判断一下
}, 500);
},
addCart(productId){ // 点击加入购物车
axios.post("/goods/addCart",{ // 接口设置在server/routes/goods.js
productId:productId
}).then((res)=>{
var res = res.data;
if(res.status==0){
//alert("加入成功")
this.mdShowCart = true; // 加入购物车成功，成功的模态框显示
// 购物车数量加1
this.$store.commit(\'updateCartCount\',1);
}else{
// alert("msg:"+res.msg)
this.mdShow = true; // 未登录模态框显示
}
})
},
closeModal(){ // 关闭模态框
this.mdShow = false; // 未登录模态框消失
this.mdShowCart = false; // 未登录模态框消失
}
}
Node.js后端代码
// 查询商品列表数据
/* GET goods page. */
router.get(\'/list\', function(req, res, next) {
// res.send(\'hello,goods list\'); // 测试路由，连接成功页面出现\'hello,goods list\'
// express获取请求参数
let page = parseInt(req.param("page")); // get请求数据拿到数据：res.param()
let pageSize = parseInt(req.param("pageSize"));
let priceLevel = req.param("priceLevel"); // 传过来的价格区间
let sort = req.param("sort");
let skip = (page-1)*pageSize; // 跳过的数据条数，(分页的公式).
var priceGt = \'\',priceLte = \'\';
let params = {};
if(priceLevel != \'all\'){ // 价格区间过滤功能
switch (priceLevel){
case \'0\':priceGt=0;priceLte =100;break;
case \'1\':priceGt=100;priceLte =500;break;
case \'2\':priceGt=500;priceLte =1000;break;
case \'3\':priceGt=1000;priceLte =5000;break;
}
params = {
salePrice:{
$gt:priceGt,
$lte:priceLte
}
}
}
let goodsModel = Goods.find(params).skip(skip).limit(pageSize); // 先查询所有，skip(skip)跳过skip条数据，limit(pageSize)一页多少条数据.即分页功能实现
goodsModel.sort({\'salePrice\':sort}); // 对价格排序功能
goodsModel.exec(function(err, doc){
if(err) {
res.json({
status:\'1\',
msg:err.message
})
}else{
res.json({
status:\'0\',
msg:\'\',
result:{
count:doc.length,
list:doc
}
})
}
})
});
以上是 Vue nodejs商城项目-商品列表页面组件 的全部内容， 来源链接： utcz.com/z/379394.html
