在线商城项目12-商品列表页价格筛选实现

简介

本篇主要目的如下：

1. 实现商品列表页的后端价格筛选逻辑
2. 前后端联调价格筛选逻辑

1. 实现商品列表页的后端价格筛选逻辑

之前我们约定前端传startPrice和endPrice来获取价格区间。我们设定如下规则：

1. 如果startPrice未传，则默认查询起始价为0
2. 如果endPrice未传，则不设置查询结尾价
3. 查询起始价（不包含）到结尾价（包含）区间的商品

修改routes/goods.js文件如下：

/* GET goods */
router.get('/', function (req, res, next) {
    // 只有接口请求带参数sort=priceDown才会按价格降序
    let sort = req.query['sort'] === 'priceDown'?-1:1;
    let startPrice = req.query['startPrice'];
    let endPrice = req.query['endPrice'];
    startPrice = startPrice? parseInt(startPrice):0;
    endPrice = endPrice?parseInt(endPrice):undefined;
    console.log(startPrice, endPrice);
    let params = {};
    if (endPrice) {
        params = {salePrice: {$gt: startPrice, $lte: endPrice}};
    } else {
        params = {salePrice: {$gt: startPrice}};
    }
    // 查询起始价（不包含）到结尾价（包含）区间的商品
    let query = Good.find(params);
    query.sort({salePrice: sort});
    query.exec((err, doc) => {
        if (err) {
            res.json({
                code: '900',
                msg: err.message || '服务器错误'
            })
        } else {
            res.json({
                code: '000',
                msg: '',
                result: doc
            })
        }
    });
});

如图：

2. 前后端联调价格筛选逻辑

运行前端项目，

npm start

没有问题。然后点击FILTER BY和0-100。

也是ok的，然后我们再点击FILTER BY和ALL。

出问题了，查询参数没有改变。好吧，调试我们的前端逻辑，发现问题出在这里，在GoodsList.vue的getPrdList 方法：

    getPrdList () {
      queryPrdObj = Object.assign(queryPrdObj, this.filterPrice, {sort: this.sortChecked})
      axios.get('/api/goods', {params: queryPrdObj}).then((res) => {
        console.log('res', res)
        let data = (res && res.data) || {}
        if (data.code === '000') {
          this.prdList = data.result || []
          console.log('prdList', this.prdList)
        } else {
          alert(`err:${data.msg || '系统错误'}`)
        }
      })
    }

修改为如下：

queryPrdObj = Object.assign({}, this.filterPrice, {sort: this.sortChecked})

现在重走流程发现木有问题了。

总结

这里的问题其实在联调前就能发现，而且事实上你会发现联调时出现的问题除了必须在联调时才会发现的问题（比如两边字段定义偏差了），不少情况在联调前都是可以发现的。所以验证代码运行结果的每一步和每一方都很重要：自测，联调，测试介入。
另外，关于价格筛选的设计规则，其实是不怎么合理的。首先100-500，对于用户理解，应该是既包含100又包含500才对，但是这样会和0-100有一个重合数字。另外，价格区间应该支持手动输入。我看了一下京东，天猫，淘宝，唯品会等商品搜索页面，大部分都只有手动输入价格区间。如果有指定筛选空间的，一般是定价没有小数点的，比如:0-100,101-500,500以上这样。当然，具体的筛选规则可以根据实际情况来定，这一块主要还是产品经理的职责，开发可以提出建议。实际情况实际处理吧。
下面我们提交代码：

1. six-tao

git status
git diff
git commit -am 'fix filter price bug'
git push

2. six-tao-server

git status
git diff
git commit -am 'filter price logic done'
git push