首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在线商城项目12-商品列表页价格筛选实现

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

作者头像
love丁酥酥
发布2018-08-27 16:12:36
1.2K0
发布2018-08-27 16:12:36
举报
文章被收录于专栏:coding for lovecoding for love

简介

本篇主要目的如下:

  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
  1. six-tao-server
git status
git diff
git commit -am 'filter price logic done'
git push
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.04.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
  • 1. 实现商品列表页的后端价格筛选逻辑
  • 2. 前后端联调价格筛选逻辑
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档