一、search模块开发
1.静态页面+静态组件拆分
2.发请求
3.vuex(三连环)
4.组件或去仓库数据,动态展示数据
1.search模块vuex
这里是引用
//第一步:整理搜索的参数
//第二步:根据最新的搜索参数,获取最新的数据展示!!
export const reqSearchList = (data)=>requests({url:'/list',method:'post',data})
1.SearchSelector子组件
二、Search模块中动态展示商品列表
getters简化数据
search模块的部分数据存储在vuex的store中
商品列表、平台售卖属性是动态属性,来自于服务器
三、Search模块根据不同的参数展示数据
assign() 合并对象成一个对象
四、Search模块中子组件的动态开发
五、监听路由的变化
监听路由信息是否发生变化,如果发生变化,立刻发起请求
$route
分类名不置空(每一次路由变化都会赋予新值),分类id要置空
六、面包屑处理分类的操作
面包屑:搜索词条关键字小标签
隐藏分类的名字
如果属性值为空的字段会自动带给服务器,则将其设置为undefined,则字段不会再被带给服务器
地址栏改变
进行路由跳转:自己跳自己,但是应该传入params参数值(本意是删除query参数,若路径中出现params参数不应该删除,应该传递下去)
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …h",params:this.route.params})
七、面包屑处理关键字
增加关于关键字的面包屑:
删除关键字
当面包屑中的关键字清除之后,需要兄弟组件的Header组件中的关键字清除
this.$bus.$emit()
mounted:{
this.$bus.$on("clear",()=>{
}
)
}
配置全局事件总线
六、七实现面包屑的增加和删除,即搜索框输入的为关键字params,三级菜单选择的是query,当删除其中的面包屑时,我们需要改变对应的url,但是需要在删除的时候各面包屑之间互不影响,这就需要我们在删除时进行相应的判断。利用路由信息push对应的信息,将对应的信息置空。
同时使用了$emit $on 进行兄弟组件间的通信
八、面包屑处理品牌信息
点击品牌名称,整理参数向服务器发请求获取相应的的参数进行展示
1.点击品牌,子组件给父组件传递信息(通过自定义事件,emit结合@)
2.父组件接收参数
3.判断品牌面包屑trademark是否为空,不为空则进行展示,同时设置删除面包屑的函数,再次发请求展示首页数据
3.再次发请求获取search模块数据进行展示
九、品牌售卖属性的操作
关于品牌分类中的细小分类的点击事件
1.点击属性,传递属性名和属性分类名给父组件Search(定义点击事件,触发后收集参数,使用emit再触发父组件的自定义事件)
2.父组件的自定义事件获取属性值和属性名及其相应的id
3.整理数据。取出分类的属性id,售卖属性的属性名,属性名,将这些数据push进数组
4.售卖属性的展示,注意数组内容去重
5.再次发送请求
十、排序操作(升序降序)
1.代表综合 2代表价格 谁有类名谁就有箭头
1.综合排序
2.价格排序
默认是综合降序
设置点击事件,接收flag,判断点击的是综合还是价格,判断完毕后,切换升序和降序更新data中的对应属性值