专栏首页coding for love在线商城项目12-商品列表页价格筛选实现

在线商城项目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
  1. six-tao-server
git status
git diff
git commit -am 'filter price logic done'
git push

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS常用设计模式解析01-单例模式

    考虑实现如下功能,点击一个按钮后出现一个遮罩层。 原始办法:我们只需要实现一个创建遮罩层的函数并将其作为按钮点击的回调事件即可。如下:

    love丁酥酥
  • CSS常用布局实现03-水平垂直居中

    其实,水平居中和垂直居中都是水平垂直居中的一部分,所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中,那么居中的元素肯定是有宽度和高度的,要么是...

    love丁酥酥
  • 在线商城项目17-登录态保持

    前面我们实现了登入登出,一切看上去是没有什么问题,但是如果我们试着在登录情况下刷新一下页面。

    love丁酥酥
  • 分割算法——可以分割一切目标(各种分割总结)

    周末应该是一个好好休息的时间,但是一定会有在默默努力科研的你,由于最近是开学季,很多关注的朋友一直会问“计算机视觉战队平台有基础性的内容吗?”,今天我和大家说一...

    计算机视觉研究院
  • Leetcode 188. 买卖股票的最佳时机 IV

    输入: [2,4,1], k = 2 输出: 2 解释: 在第 1 天 (股票价格 = 2) 的时候买入,在第 2 天 (股票价格 = 4) 的时候卖出,这...

    zhipingChen
  • 谷歌与CMU联合发文:审视数据对深度学习的重要性(附论文)

    来源:机器人圈 作者:Chen Sun、Abhinav Shrivastava、Saurabh Singh、Abhinav Gupta 本文长度为1800字,建...

    数据派THU
  • Groovy之数据结构

    Java中定义方式:def list = ArrayList()//java 中定义列表方式

    Yif
  • 目标检测分割--Mask R-CNN

    Mask R-CNN ICCV2017 best paper https://arxiv.org/pdf/1703.06870...

    用户1148525
  • Spring源码学习(五) 创建Bean过程中的扩展点

    绿色的部一般用于Spring内部扩展,黄色的部分可用于自定义实例化。 本文仅仅聊聊InitializingBean,对于绿色部分,建议您查看,其他人写的bl...

    温安适
  • 假如AIphago五战全胜李世石

    Rainbond开源

扫码关注云+社区

领取腾讯云代金券