价格过滤功能实现

功能：点击图中的按钮，对商品价格进行过滤，显示所以相应价格商品

前端 , src/views/GoodsList.vue中

// template中
 <!-- filter -->
<div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
    <dl class="filter-price">
        <dt>Price:</dt>
            <dd>
                <a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}" @click="setPriceFilter('all')">All</a>
            </dd>
            <dd v-for="(price,index) in priceFilter">
                <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked==index}">{{price.startPrice}}-{{price.endPrice}}</a>
            </dd>
    </dl>
</div>

// getGoodsList()方法中添加参数
var param = {
      priceLevel:this.priceChecked
}

服务器端，server/routes/goods.js中

// 添加过滤条件给moogodb数据库进行查找
router.get("/",function(req,res,next){
  // 定义分页
  let page = parseInt(req.param('page'));
  let pageSize = parseInt(req.param('pageSize'));
  let sort = parseInt(req.param('sort'));
  let priceLevel = req.param('priceLevel');
  let skip = (page-1)*pageSize;
  let 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);
  goodsModel.sort({'salePrice':sort});
  goodsModel.exec(function (err,doc) {
    if(err){
      res.json({
        status:"1",
        msg:err.mssage
      })
    }else{
      res.json({
        status: '0',
        msg:'',
        result:{
          count:doc.length,
          list:doc
        }
      });
    }
  });
});