Vue+Node+MongoDB实现商城系统——10章：商品列表及排序

一、商品查询排序分页（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()返回的才是一个对象