首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

简介 本篇主要目的如下: 实现商品列表页的后端价格筛选逻辑 前后端联调价格筛选逻辑 1. 实现商品列表页的后端价格筛选逻辑 之前我们约定前端传startPrice和endPrice来获取价格区间。...我们设定如下规则: 如果startPrice未传,则默认查询起始价为0 如果endPrice未传,则不设置查询结尾价 查询起始价(不包含)到结尾价(包含)区间的商品 修改routes/goods.js文件如下...}}; } else { params = {salePrice: {$gt: startPrice}}; } // 查询起始价(不包含)到结尾价(包含)区间的商品...我看了一下京东,天猫,淘宝,唯品会等商品搜索页面,大部分都只有手动输入价格区间。如果有指定筛选空间的,一般是定价没有小数点的,比如:0-100,101-500,500以上这样。...当然,具体的筛选规则可以根据实际情况来定,这一块主要还是产品经理的职责,开发可以提出建议。实际情况实际处理吧。

1.2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动商城第四篇(商品管理)【添加商品续篇、商品审核和上下架、前台展示、后台筛选

    ; //获取页面有多少个单元格,对其进行遍历,取出对应的值 for (int i = 1; i <= divNum; i++) { //获得商城价和库存...; //获取页面有多少个单元格,对其进行遍历,取出对应的值 for (int i = 1; i <= divNum; i++) { //获得商城价和库存...的代码和列出商品的代码几乎一样。...查看商品审核的数据本质上就是有条件地查询商品。与我们之前查询商品的逻辑代码是一样的 对于数据回显来说,还是一样,如果属性是表单内的。我们就判断或者直接进行回显。...在筛选后台的时候,接收类型可以分成三类 价钱 品牌Id 要被筛选的条件。 对于这三类,我们很容易就能够把他们显示出来。

    3.4K90

    商城项目-商品查询

    4.商品查询 4.1.效果预览 接下来,我们实现商品管理的页面,先看下我们要实现的效果: ? 可以看出整体是一个table,然后有新增按钮。是不是跟昨天写品牌管理很像?...首先,字段不一样,商品列表也展示的SPU信息,包含以下字段: id: title:标题 cname:商品分类名称 bname:品牌名称 完整代码: <...items指向goodsList,totalItems指向totalGoods 页面渲染的字段名修改:字段改成商品的SPU字段:id、title,cname(商品分类名称),bname(品牌名称)...data属性修改了以下属性: goodsList:当前页商品数据 totalGoods:商品总数 headers:头信息,需要修改头显示名称 oldGoods:准备要修改的商品 加载数据的函数...private String specTemplate;// 商品特殊规格的名称及可选值模板 private String specifications;// 商品的全局规格属性

    1.4K40

    商城项目-商品修改

    2.商品修改 2.1.编辑按钮点击事件 在商品详情页,每一个商品后面,都会有一个编辑按钮: ? 点击这个按钮,就会打开一个商品编辑窗口,我们看下它所绑定的点击事件: ? 对应的方法: ?...可以看到这里发起了两个请求,在查询商品详情和sku信息。 因为在商品列表页面,只有spu的基本信息:id、标题、品牌、商品分类等。...比较复杂的商品详情(spuDetail)和sku信息都没有,编辑页面要回显数据,就需要查询这些内容。 因此,接下来我们就编写后台接口,提供查询服务接口。...2.6.后台实现 接下来,我们编写后台,实现修改商品接口。...2.6.1.Controller 请求方式:PUT 请求路径:/ 请求参数:Spu对象 返回结果:无 /** * 新增商品 * @param spu * @return */ @PutMapping

    86730

    商城项目-商品详情

    1.商品详情 当用户搜索到商品,肯定会点击查看,就会进入商品详情页,接下来我们完成商品详情页的展示, 1.1.Thymeleaf 在商品详情页中,我们会使用到Thymeleaf来渲染页面,所以需要先了解...,用来展示商品详情。...商品规格参数、规格参数组 1.4.1.商品微服务提供接口 1.4.1.1.查询spu 以上所需数据中,查询spu的接口目前还没有,我们需要在商品微服务中提供这个接口: GoodsApi /**...1.5.渲染面包屑 在商品展示页的顶部,有一个商品分类、品牌、标题的面包屑 其数据有3部分: 商品分类 商品品牌 spu标题 我们的模型中都有,所以直接渲染即可(页面101行开始): <div class...1.6.3.规格属性的筛选 分析 规格参数的格式是这样的: ? 每一个规格项是数组中的一个元素,因此我们只要保存被选择的规格项的索引,就能判断哪个是用户选择的了!

    2K30

    商城项目-实现商品分类查询

    5.实现商品分类查询 商城的核心自然是商品,而商品多了以后,肯定要进行分类,并且不同的商品会有不同的品牌信息,其关系如图所示: ?...一个商品分类下有很多商品 一个商品分类下有很多品牌 而一个品牌,可能属于不同的分类 一个品牌下也会有很多商品 因此,我们需要依次去完成:商品分类、品牌、商品的开发。...5.1.导入数据 首先导入SQL 文档:商城SQL.note 链接:http://note.youdao.com/noteshare?...,类目和商品(spu)是一对多关系,类目与品牌是多对多关系'; 因为商品分类会有层级关系,因此这里我们加入了parent_id字段,对本表中的其它分类进行自关联。...商品分类之间是会有层级关系的,采用树结构去展示是最直观的方式。 一起来看页面,对应的是/pages/item/Category.vue: ?

    1.8K40

    商城应用】商品运费流程设计

    需求分析: 在开始设计之前我们先来分析一下影响运费的几种情况: 目标地址 商品的重量 商品的体积 商品的件数 根据上面分类,我们可以分为两大类:地址、计费方式 地址又可以分为: 通过地址费用 特殊地址费用...最后就是发布商品的时候选择对应的运费模板就可以了。 运费模板UI: 根据上面分析的需求,我们可以设计如下所示的静态UI图 ?...ER图: 接下来我们需要设计库表结构,这边主要建三张表就可以了,一个运费模板表、一个是特殊地区的运费表、还有就是商品表,表关联如下所示: ?...商品详情中需要显示对应的运费,那这个运费又是如何计算的呢,其实就是根据用户设置的收货地址和商品对应的运费模板进行关联计算,就可以得出对应的运费价格了。 ?...app商品运费: 然后就到了最后的一个环节了,app的商品详情需要显示运费价格,上面的价格也就是我们根据用户收货地址计算的来的。 ?

    1.1K40

    移动商城第三篇(商品管理)【查询商品、添加商品

    由于我们查询商品的话,可能商品的数量是非常大的,因此我们需要用到分页… 对于分页,我们现在就一点也不陌生了。...这里写图片描述 我们可以从原型界面上知道:用户可以根据多个条件来对我们的数据进行筛选,并且我们是需要做分页的。 创建查询条件对象 由于查询条件有多个,那么我们可以把这些条件封装成一个对象。...showStatus=0" title="已上架实体商品" class="nor">已上架 当我们店家未上架商品的时候,我们的样式应该是会改变到here属性上的。...="btn80x20" title="添加商品">添加商品 /** * 跳转到添加商品页面 * @return */ @RequestMapping...这里写图片描述 商品基本属性中的隐藏属性 商品的id是使用oracle中的序列进行自动增长。 /*对于商品的id,我们是自增长的。

    5.7K80

    商城项目-商品规格数据结构

    1.商品规格数据结构 乐优商城是一个全品类的电商网站,因此商品的种类繁多,每一件商品,其属性又有差别。...:Stock Keeping Unit(库存量单位),SPU商品集因具体特性不同而细分的每个商品 以图为例来看: ?...碰到难题了,不同的商品分类,可能属性是不一样的,比如手机有内存,衣服有尺码,我们是全品类的电商网站,这些不同的商品的不同属性,如何设计到一张表中?...1.2.2.分析规格参数 仔细查看每一种商品的规格你会发现: 虽然商品规格千变万化,但是同一类商品(如手机)的规格是统一的,有图为证: 华为的规格: ? 三星的规格: ?...也就是说,商品的规格参数应该是与分类绑定的。每一个分类都有统一的规格参数模板,但不同商品其参数值可能不同。 如下图所示: ?

    2.6K20
    领券