02- 搜索页-项目笔记.md · SAM9029/zhi_shop

# 搜索页-项目笔记

## 分类导航传值
1. 通过给1级、2级、3级设置为`router-link`跳转
   `<router-link :to="{ path: '/search' }">手机</router-link>`
   缺点: 组件使用太多 消耗性能

2. 通过给1级、2级、3级设置点击事件 通过编程式导航 跳转
   `@click`
   缺点： 绑定太多事件，浪费资源

3. 通过给事件委托给父元素绑定事件 解决事件绑定
``` vue
<template>
<div
  class="item"
  :class="{ active: activeId === cate1.categoryId}"
  v-for="cate1 in navList"
  :key="cate1.categoryId"
  @mouseenter="addActive(cate1.categoryId)"
  @click="goSearch"
>
    <h3>
        
        <a :data-category-name="cate1.categoryName" :data-category1-id="cate1.categoryId">{{cate1.categoryName}}</a>
    </h3>
    <div class="item-list clearfix">
        <div class="subitem">
            <dl class="fore" v-for="cate2 in cate1.categoryChild" :key="cate2.categoryId">
                <dt>
                    
                    <a :data-category-name="cate2.categoryName" :data-category2-id="cate2.categoryId">{{cate2.categoryName}}</a>
                </dt>
                <dd>
                    <em v-for="cate3 in cate2.categoryChild" :key="cate3.categoryId">
                        
                        <a :data-category-name="cate3.categoryName" :data-category3-id="cate3.categoryId">{{cate3.categoryName}}</a>
                    </em>
                </dd>
            </dl>
        </div>
    </div>
</div>
</template>

## 搜索页数据获取
1. 新建 `src/store/modules/search.js`模块  定义搜索功能
``` js
// 导入API接口函数
import { getCategoryList } from '@/api'

// 主页模块
export default {
  // 设置命名空间
  namespaced: true,
  state: {
    navList: [] // 导航分类
  },
  mutations: {
    // 修改导航分类
    SET_NAV_LIST (state, payload) {
      state.navList = payload
    }
  },
  actions: {
    // 获取导航分类
    async getNavList ({ commit }) {
      const res = await getCategoryList()
      commit('SET_NAV_LIST', res)
    }
  }
}
```

2. 添加 `getCategoryList` 函数
`api/index.js`
``` js
// 获取 商品搜索结果
export const getSearchGoods = (data) => {
  return request({ method: 'post', url: '/api/list', data })
}
```

3. 定义 请求响应拦截器 统一错误处理
`/src/utils/request.js`
``` js
// 定义响应拦截器
request.interceptors.response.use(
  // 响应成功
  res => {
    // 取出响应结果
    const data = res.data
    // 判断响应码
    if (data.code !== 200) {
      alert(data.message || '响应错误')
      return Promise.reject(new Error(data.message))
    }
    return data.data
  },
  // 响应失败
  err => new Promise(new Error(err))
)
```

4. 将结果渲染到页面中  `search/index.vue`
``` vue
<template>
<li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
  <div class="list-wrap">
      <div class="p-img">
          <a><img :src="goods.defaultImg" /></a>
      </div>
      <div class="price">
          <strong>
              <em>¥</em>
              <i> {{goods.price.toFixed(2)}}</i>
          </strong>
      </div>
      <div class="attr">
          <a :title="goods.title">{{goods.title}}</a>
      </div>
      <div class="commit">
          <i class="command">已有<span>{{goods.id}}</span>人评价</i>
      </div>
      <div class="operate">
          <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
          <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
      </div>
  </div>
</li>
</template>

export default {
  name: 'SearchView',
  components: { Bread, Pagination, Selector },
  computed: {
    ...mapGetters('search', ['goodsList'])
  },
  mounted () {
    this.$store.dispatch('search/getSearchInfo', {})
  }
}
</script>
```

## 搜索页-关键词、分类搜索
1. 监听路由的改变
``` vue
<script>
import Bread from './components/Bread'
import Pagination from './components/Pagination'
import Selector from './components/Selector'
import { mapGetters } from 'vuex'

export default {
  name: 'SearchView',
  components: { Bread, Pagination, Selector },
  data () {
    return {
      // 搜索参数
      searchQuery: {}
    }
  },
  computed: {
    ...mapGetters('search', ['goodsList'])
  },
  watch: {
    // 监听 $route的改变 （监听路由的改变）
    $route: {
      handler () {
        // 1 设置搜索参数 将查询字符串对象与路由对象合并到搜索参数中
        Object.assign(this.searchQuery, this.$route.query, this.$route.params)
        // 2. 调用函数获取查询结果
        this.getSearch()
      },
      immediate: true
    }
  },
  methods: {
    // 获取搜索结果
    getSearch () {
      this.$store.dispatch('search/getSearchInfo', this.searchQuery)
    }
  }
}
</script>
```

2. 修改关键词传值与分类传值 
`src/layout/components/AppHeader.vue`
``` vue
<script>
export default {
  name: 'AppHeader',
  data () {
    return {
      kw: ''
    }
  },
  methods: {
    goSearch () {
      // 使用编程式导航时： 重复跳转同一路由 会产生报错
      // 报错原因： push在跳转后会返回2个回调函数  成功则触发then函数 失败触发catch函数
      //           使用时并没有捕获catch错误 那么就会将错误输出
      // this.$router.push('/search', () => {})
      // this.$router.push('/search')
      // 跳转到搜索页面 并将关键字 通过动态路由传入
      // 匹配结果为空时需要传递 undefined
      this.$router.push({ name: 'search', params: { keyword: this.kw || undefined }, query: this.$route.query })
    }
  }
}
</script>
```

`src/components/TypeNav/index.vue`
```js
goSearch (e) {
  // 识别当前点击的元素为 1级、2级、3级  category1Id  category2Id
  // 通过给1级、2级、3级分类添加属性 来区别当前元素是否为1级、2级、3级
  // 使用JS获取元素中的data-属性
  const { categoryName, category1Id, category2Id, category3Id } = e.target.dataset
  // 如果没有categoryName值 说明不能1级、2级、3级分类
  if (!categoryName) return
  // undefined值不会通过URL传递
  this.$router.push({ name: 'search', query: { categoryName, category1Id, category2Id, category3Id }, params: this.$route.params })
}
```

## 搜索页-品牌、属性搜索
1. 给对应元素绑定点击事件 `/src/views/search/components/Selector`  
``` vue
<template>
  
  <div class="clearfix selector">
      
      <div class="type-wrap logo">
          <div class="fl key brand">品牌</div>
          <div class="value logos">
              <ul class="logo-list">
                  <li
                    v-for="trademark in trademarkList"
                    :key="trademark.tmId"
                    @click="$emit('changeTrademark', trademark)"
                  >
                    {{trademark.tmName}}
                  </li>
              </ul>
          </div>
      </div>
      
      <div class="type-wrap" v-for="attrs in attrsList" :key="attrs.attrId">
          <div class="fl key">{{attrs.attrName}}</div>
          <div class="fl value">
              <ul class="type-list">
                  <li v-for="value in attrs.attrValueList" :key="value">
                      <a @click="$emit('changeAttrs', { id: attrs.attrId, value, name: attrs.attrName})">{{value}}</a>
                  </li>
              </ul>
          </div>
          <div class="fl ext"></div>
      </div>
  </div>
</template>
```

2. 父组件监听 `selector`组件 抛出事件
``` vue
<template>
  
  <Selector @changeTrademark="changeTrademark" @changeAttrs="changeAttrs"/>
</template>

export default {
  methods: {
    // 品牌更改
    changeTrademark (trademark) {
      // 1. 设置品牌搜索参数   品牌ID:品牌名
      this.searchQuery.trademark = `${trademark.tmId}:${trademark.tmName}`
      // 2. 调用函数搜索结果
      this.getSearch()
    },
    // 属性更改
    changeAttrs ({ id, value, name }) {
      // 1. 将属性值组成 需要的格式  id:value:name
      const attrs = `${id}:${value}:${name}`
      // 1.1 判断属性值 是否已经存在
      if (this.searchQuery.props.includes(attrs)) return
      // 2. 将改好的属性值 添加到属性组中
      this.searchQuery.props.push(attrs)
      // 3. 调用函数 获取搜索结果
      this.getSearch()
    }
  }
}
</script>
```

## 搜索页-面包屑处理
1. 基础渲染
``` vue
<template>
<ul class="fl sui-tag">
{{searchQuery}}
  
  <li class="with-x" v-if="searchQuery.categoryName">
    {{searchQuery.categoryName}}<i>×</i>
  </li>
  
  <li class="with-x" v-if="searchQuery.keyword">
    {{searchQuery.keyword}}<i>×</i>
  </li>
  
  <li class="with-x" v-if="searchQuery.trademark">
    {{searchQuery.trademark.split(':')[1]}}<i>×</i>
  </li>
  
  <li class="with-x" v-for="attrs in searchQuery.props" :key="attrs">
    {{attrs.split(':')[1]}}<i>×</i>
  </li>
</ul>
</template>
```

2. 删除面包屑处理
``` html

<li class="with-x" v-if="searchQuery.categoryName">
  {{searchQuery.categoryName}}<i @click="$emit('delCategoryName')">×</i>
</li>

<li class="with-x" v-if="searchQuery.keyword">
  {{searchQuery.keyword}}<i @click="$emit('delKeyword')">×</i>
</li>

<li class="with-x" v-if="searchQuery.trademark">
  {{searchQuery.trademark.split(':')[1]}}<i @click="$emit('delTrademark')">×</i>
</li>

<li class="with-x" v-for="attrs in searchQuery.props" :key="attrs">
  {{attrs.split(':')[1]}}<i @click="$emit('delProps')">×</i>
</li>
```

'/src/views/search/index.vue' 绑定处理函数
``` js
// 移除分类面包屑
delCategoryName () {
  // 1. 设置分类名为空
  this.searchQuery.categoryName = undefined
  this.searchQuery.category1Id = undefined
  this.searchQuery.category2Id = undefined
  this.searchQuery.category3Id = undefined
  // 通过跳转路由的形式 去更改传递的查询字符串
  this.$router.push({ name: 'search', params: this.$route.params })
},
// 移除关键词
delKeyword () {
  // 1. 设置关键词为空
  this.searchQuery.keyword = undefined
  // 2. 发布 清除关键词的事件
  this.$bus.$emit('clearKw')
  // 3. 跳转路由 清除路由中的关键词
  this.$router.push({ name: 'search', query: this.$route.query })
},
// 移除品牌
delTrademark  () {
  // 1. 设置品牌名为空
  this.searchQuery.trademark = undefined
  // 2. 调用函数 获取搜索结果
  this.getSearch()
},
// 移除属性
delProps (i) {
  // 1. 根据索引移除 对应数组对应属性
  this.searchQuery.props.splice(i, 1)
  // 2. 调用函数 获取搜索结果
  this.getSearch()
}
```

## 搜索页-排序处理
1. 修改结构
``` html
<div class="sui-navbar">
    <div class="navbar-inner filter">
        <ul class="sui-nav">
            <li :class="{ active: isOne }" @click="changeSort(1)">
                <a href="javascript:">综合 <span v-show="isOne">{{isDesc}}</span></a>
            </li>
            <li :class="{ active: !isOne }" @click="changeSort(2)">
                <a href="javascript:">价格 <span v-show="!isOne">{{isDesc}}</span></a>
            </li>
        </ul>
    </div>
</div>
```

2. 处理点击切换排序
``` js
// 排序更改
changeSort (sort) {
  let sort2 = 'desc'
  // 1. 设置排序规则
  // 1.1  如何知道是否要更改  降序或升序（当前排序规则一致时）
  if (this.searchQuery.order.includes(sort)) {
    sort2 = this.searchQuery.order.includes('desc') ? 'asc' : 'desc'
  }
  this.searchQuery.order = `${sort}:${sort2}`
  // 2. 调用函数 获取搜索结果
  this.getSearch()
},
```

## 搜索页- 分页器组件
见具体项目代码

SAM9029/zhi_shop

简介

发行版

贡献者

近期动态

SAM9029/zhi_shop .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

SAM9029/zhi_shop