一、商品查詢排序分頁（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,$gt:xxx,$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()返回的才是一個物件