在线商城项目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 条评论
登录 后参与评论

相关文章

来自专栏哲学驱动设计

分享:使用 TypeScript 编写的 JavaScript 游戏代码

《上篇博客》我写出了我一直期望的 JavaScript 大型程序的开发模式,以及 TS(TypeScript) 的一些优势。博客完成之后,我又花了一天时间试用 ...

2995
来自专栏微信小程序开发

python抓取头条文章

最近做了个项目,希望把运营同学在今日头条上发的文章自动发布到公司的官方博客中去,然后可以人工筛选需要发布的文章~ 很明显,要实现这功能,就需要程序自动抓取头条号...

6427
来自专栏WeTest质量开放平台团队的专栏

内存是手游的硬伤——Unity游戏Mono内存管理与泄漏

内存是游戏的硬伤,如果没有做好内存的管理问题,游戏极有可能会出现卡顿,闪退等影响用户体验的现象。本文介绍了在腾讯游戏在Unity游戏开发过程中常见的Mono内存...

772
来自专栏点滴积累

geotrellis使用(十三)数据导入BUG解决方案说明

Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 BUG说明...

3777
来自专栏技术小黑屋

AssetManager.finalize() Timed Out After 10 Seconds分析

没有代码,就没有bug。程序员在编码时,总会比不避免的出现bug。倒不是因为我们热爱制造bug,创造机会和测试妹子频繁沟通。而是现实情况很复杂,存在着很多不确定...

2341
来自专栏架构师之路

计数系统架构实践一次搞定 | 架构师之路

提醒,本文较长,可提前收藏/转发。 一、需求缘起 很多业务都有“计数”需求,以微博为例: ? 微博首页的个人中心部分,有三个重要的计数: 关注了多少人的计数 粉...

4886
来自专栏linux驱动个人学习

SPI通讯协议

一、SPI概述 SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口。SPI,是一种高速的,全双工,同步的通...

4117
来自专栏知识分享

关于TCP和MQTT之间的转换

可以看这个,本来我自己想用Wireshark监听一下,不过百度一搜索一大把,我就不测试了

2542
来自专栏Linyb极客之路

编码习惯之异常处理

对于大型IT系统,最怕的事情第一是系统出现了异常我不知道,等问题闹大了用户投诉了才知道出问题了。第二就是出了问题之后无法找到出错原因。针对这2个问题,说说我们项...

2989
来自专栏编程一生

漫画:全面理解java.lang.IllegalArgumentException及其可用性设计

1532

扫码关注云+社区

领取腾讯云代金券