一、商品查询排序分页(Node端部分)
mongoose部分
router.get('/goods',function(req,res,next){
var page = parseInt(req.query.page),
pageSize = parseInt(req.query.pageSize),
sort = req.query.sort,
skip = (page-1)*pageSize,
params = {};
})
//Goods为商品查询model
var goodsModel = Goods.find().skip(skip).limit(pageSize);
goodsModel.sort(sort);
// mongoose.exec 执行回调,doc为之前处理后的数据
goodsModel.exec(function(err,doc){
if(err){
res.json({
status:'1',
msg:err.message
});
}else{
res.json({ //res.json返回json数据
status:'0',
msg:'',
result:{
count:doc.length,
data:doc
}
})
}
})
前端部分
// 1、绑定点击排序事件 sortGoods
methods:
sortGoods(){
this.sortFlag = !this.sortFlag;
this.getGoodsLists(); 排序后重新请求(排序从第一页开始)
}
vue插件种草
vue-infinite-scroll:在vue中滚动加载内容(瀑布流)
- 作用:用于内容的懒加载,页面先加载一部分,后面再加载部分
// 1、安装
npm install vue-infinite-scroll --save
// 2、作为vue插件使用
var InfiniteScroll = require('vue-infinite-scroll')
Vue.use(InfiniteScroll)
// 3、页面中引入
<div v-show="busy" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
加载中...
</div>
// 5、定义loadMore方法,作为
loadMore(){
this.busy=true;
setTimeout(function(){
this.getGoodsLists()
},1000)
}
2、 vue-lazyload 图片懒加载插件
- 作用:当页面加载时,先加载部分图片,其他图片用loading图占位,到滚动到图片对应位置时,再用真实图片地址替换掉原loading图。
- 模块地址:https://www.npmjs.com/package/vue-lazyload
// 1、安装
npm install vue-lazyload
// 2、引用
var Vuelazyload=require('vue-lazyload')
Vue.use(Vuelazyload,{
loading: '/static/loading-svg/loading-cubes.svg' //设置loading图片,这里用的svg动图
})
// 3、组件中使用
<img v-lazy="'static/'+good.productImage" alt="">
二、价格筛选
商品价格分为0-100,100-500,500-1000,1000-2000的区间,当点击不同的区间时,会查询后台,显示对应区间内的值
思路:设置不同价格区间为对应的等级priceLevel,将priceLevel传入到后台。
- 后台通过 goodsModel.find({salePrice:{ gt:xxx, g t : x x x , lte:xxx}})来筛选查询。
三、加入购物车
- 前台绑定加入购物车事件,并转入商品id,@click=’addGoods(goods.productId)’
- 后台接收请求,并在数据库中查询,1、查询用户,2、根据productId查询商品
- model.findOne()查询一条数据,如果用find默认返回的是一个数组。
这节踩的坑:
- 加入购物车,一般采用post请求,而后端没拿到前端传的参数。
1. 原因1:没有使用 body-parser中间件来处理请求,所以拿不到req.body
2. 原因2:前端post请求没有加请求头,导致参数没传成功{header:{‘Content-Type’:’x-www-form-urlencoded’}}
3. 原因3:前端没对请求参数做字符串处理,导致后台拿到的参数格式不对,解决:使用qs.stringify({‘productId’:productId}),也可以使用H5新的API,new FormData().append(‘productId’,productId)的方式
- 后台要查询用户购物车列表则需要使用user集合,mongoose.model(‘modelName’,Schema,’collectionName’).导出时注意是 module.exports
- mongodb查询操作,Goods.find()返回的是一个数组,Goods.findOne()返回的才是一个对象