vue2项目(四)----Search

一、开发项目前的准备

1.写静态页面

2.拆分组件

二、向服务器发请求，获取数据，进行展示

1. 在api的index.js文件中，写接口，从后台获取数据
2. 进行仓库三连环
3. 获取数据
4. 渲染数据。

注意：

1）search在调用接口的时候，要传参，需要传递一个空对象，可以设置默认值，设置为空对象，不然请求会失败。

2）可以使用getters简化仓库中的数据。当数据过多的时候，使用mapState获取数据容易出现错误，这个时候可以先在仓库里配置getters来简化数据。

3）注意使用getters时，如果没有网络，是请求不到数据的，所以回来的数据就是undefined，为了避免这种情况，可以在后面添加一个空数组[ ]

三、search模块根据不同的参数获取数据展示

1. 把派发actions的操作封装为一个函数，方便后续调用。

在mounted挂载完毕后，里面向仓库发请求操作只会执行一次。但是，当我们点击搜索或者三级联动的时候，会再次发送请求，派发actions。

所以这里可以把发请求操作封装为一个函数getData()，放在methods里面，在需要时调用。

2.设置参数默认值

因为发请求时，会携带参数给服务器，所以可以给参数设置响应式的数据，设置默认值。

把参数放在一个searchParams对象里，并在派发请求时，把参数带过去。

 3.合并参数（使用ES6中的  object.assign）

因为页面要根据传递过来的参数，来进行渲染。所以在发请求之前，要准备参数，修改searchParams里的默认值。

而点击三级联动或搜索会携带query、params参数，所以需要合并参数。

服务器根据参数，来展示数据。

简便写法： 

4. 点击三级联动或搜索就再次请求数据

由于我们把请求函数getData()放在mounted里面的，所以只会执行一次。所以想要再次请求需要再次调用。

这里可以使用watch监听$route的变化，因为每一次路由跳转时，参数都会变化，所以可以通过监听路由信息的改变，来判断是否发送请求。

并且发送请求之后，最好让1,2,3级分类的id置空，也可以不用，但是当你点击其他的时候，id还在与其他信息不符，最好置空。

5. search组件中子组件searchSelector的获取数据并动态渲染

同样也是使用getters，先在仓库里简化数据，再在子组件中使用…mapGetters获取，再进行渲染数据就好了。

三、面包屑的开发

 1.面包屑是否展示：通过携带的searchParams.categoryName来进行判断。如果为空，则表示没有，不用展示；如果有，则表示需要展示。

2.点击X可以删除面包屑，并且当前页面的参数都变为空，跳转回先前的页面。

首先，这里把带给服务器的参数置空，本意是删除query，如果路径里有params，不应该删除。

其次，进行跳转，还是需要发送请求，并且是自己跳自己。

再者，发请求的时候，会整理参数，然而某些参数是可有可无的，所以可以设置为undefined，减少带宽，性能优化。

3. 点击X删除面包屑，并且搜索框里的数据也相应删除。

这里注意，搜索框在header组件里，所以我们需要让兄弟组件删除数据。这里就用到了全局事件总线。

其他的与前面的差不多。

4. 当点击品牌的时候，会出现面包屑并会更新页面数据

首先，品牌信息是在Search的子组件SearchSelector中的。

所以应该先把子组件的数据传给父组件，父组件接收数据后，整理参数，再次发请求获取search模块列表数据进行展示

其次，品牌的面包屑也可以删除

写法和前面差不多。

四、平台售卖属性的操作

点击某个属性就会显示响应的面包屑，并发送相对应的数据给后台发请求，拿到新数据。相关操作与品牌的差不多。

需要注意，这里需要进行数组去重处理。当多次点击同一个属性值的时候，只会显示一个，不能显示多个。

 五、Search模块的排序操作

1）升序降序分析，并设置初始状态为降序

2）高亮展示，如果order:1，则表示是综合的部分，并且要高亮。

3）箭头的展示，使用iconfont库里的箭头。

使用步骤：

1. 把需要的箭头加入购物车
2. 生成在线的链接放在HTML中（注意这里的hrefs:记得手动添加https:）
3. 然后添加类名

六、实现分页器功能（重点）

1)分页器在很多地方都会使用，所以封装为全局组件。

2）分页器的四个数据：

pageNo:当前是第几页

pageSize:每一页有多少个数据

total:整个分页器一共有多少条数据

continues:分页器连续的页码个数

3)分页器连续页的起始与结束数字计算

totalPage:总页数 / 分页器连续页码的个数

注意代码里错误的情况

4）分页器上中下的展示

注意这里使用了 v-if 和 v-for，官方建议不要一起使用，最好使用一个 template标签包裹起来。因为 v-for 的优先级高一些。

5）用户点击时把当前点击页码传给服务器发请求

这里需要子组件pagination传值给父组件search。

使用自定义事件，子向父传值。

然后父组件接收数据，向服务器发请求，渲染页面就好了。

6）禁用一些按键

使用disabled属性，禁用省略号。

当当前页为第一页时，禁用上一页，

当当前页为最后一页时，禁用下一页。