LaraStore商城系统使用Vue.js重构商品列表页ajax搜索 2016-11-23

在LaraStore商城系统列表页,会有一些条件筛选。

比如:价格区间 、品牌筛选、属性筛选等。

传统的模式是,把筛选条件转化成参数传递给控制器 进行sql拼接查询,最后生成相应的结果。

在我们新版的LaraStore商城系统里面,我们使用vue.js+Laravel来实现列表页的ajax筛选+ajax分页。



获取相关参数和思路

【1】价格区间

价格区间最终会对应到商品模型里面的价格字段 shop_price

$query = Goods::where('shop_price','>=',$min)
              ->where('shop_price','<',$max)


【2】品牌筛选

直接拿品牌编号和 商品模型里面的brand_id字段做匹配

$query  = $query->where('brand_id',$brand_id)


【3】属性筛选 相对复杂一点

首先 涉及到三个数据模型

//商品模型                 Goods
//属性名称模型              Attribute
//商品属性值模型            GoodsAttr


实际就是把前台选中的商品属性值 传递给 Goods和GoodsAttr模型 进行2个表格联合查询。


大致的思路 我在总结下

1.初始化 Vue

2.点击价格区间的时候
 
  把价格区间的 最小价格 和最大价格 赋值给vue的data中的row
  
  在执行ajax的时候 参数会从 vue的data中来取

3.选择品牌的时候
 把品牌编号传递给 vue的data 暂存 
 执行ajax的时候 统一从 vue的data中获取参数
 
 
4.属性筛选 也是以此类推

5.把获取的参数 包括(价格区间+品牌编号+商品属性值数组)传递给Grid组件 
  用新生成的商品列表和分页数据 来刷新页面即可。
  
  使用vue 只需要页面绑定了数据 无需手工刷新页面。

大致介绍到这里,LaraStore商城系统最新版V3.2将于近期发布,到时候 会给大家提供商品列表页的在线演示


本文章为 LaravelStore官网原创 转载请注明出处。谢谢合作!