Vue项目流程4，TheSearch模块开发，getters的使用，带给服务器的参数，实现可以再次发送请求，分类、搜索框、品牌信息、属性面包屑，排序操作，分页器的相关步骤

最新推荐文章于 2023-09-12 16:31:40 发布

小婵婵不怕鬼

最新推荐文章于 2023-09-12 16:31:40 发布

阅读量295

点赞数 1

分类专栏：电商平台项目文章标签： vue.js 服务器 javascript

本文链接：https://blog.csdn.net/qq_49080239/article/details/126428694

版权

电商平台项目专栏收录该内容

8 篇文章 2 订阅

订阅专栏

TheSearch模块开发

1、先静态页面+静态组件拆分
2、发请求
3、vuex
4、组件获取仓库数据，动态展示数据

getters的使用

getters在项目中，为了简化数据而生,将在组件需要用到的数组简化一下，将来数组利用数据时就更方便了

const getters = {
    goodsList(state){
        return state.searchList.goodsList || []
    },
    trademarkList(state){
        return state.searchList.trademarkList || []
    },
    attrsList(state){
        return state.searchList.attrsList || []
    }
}

import { mapGetters } from 'vuex';
...................
computed:{
  ...mapGetters(['goodsList','trademarkList','attrsList'])
}

如果用户网络出现问题，此时服务器还未返回数据，但是已经开始遍历了，此时返回的可能是一个undifined，所以此时需要给用户返回一个空数组。

带给服务器的参数

在发送请求之前带给服务器参数，searchParams参数发生变化有数值带给服务器

  data(){
    return {
      //带给服务器的参数
      searchParams:{
        category1Id:'',
        category2Id:'',
        category3Id:'',
        categoryName:'',
        keyword:'',
        order:'',
        pageNo:1,
        pageSize:10,
        props:[],
        trademark:''
      }
    }
  }

当组件挂载完毕之前执行一次【先于mounted】

  //整理参数
  beforeMount(){
    //复杂的写法
    // this.searchParams.category1Id = this.$route.query.category1Id
    // this.searchParams.category2Id = this.$route.query.category2Id
    // this.searchParams.category3Id = this.$route.query.category3Id
    // this.searchParams.categoryName = this.$route.query.categoryName
    // this.searchParams.keyword = this.$route.params.keyword
    //简单的写法
    Object.assign(this.searchParams,this.$route.query,this.$route.params)
  }

实现可以再次发送请求

当$route发生改变时再次发送请求

  watch:{
  //监听属性
  $route(){
    //再次发请求之前，再次整理参数
    Object.assign(this.searchParams,this.$route.query,this.$route.params)
    this.getData()
    //每一次请求完毕之后，应该把1\2\3相应的参数置空，让它接受下一次相应的参数
    this.searchParams.category1Id = ''
    this.searchParams.category2Id = ''
    this.searchParams.category3Id = ''
  }
  }

分类名字和关键字不用清理：当用户输入关键字会把上一个关键字覆盖掉，而用户选择分类名字时也会将上一次的覆盖掉，但是各级ID不会完全覆盖掉，所以会产生错误。

面包屑

分类面包屑

当categoryName有值时就显示

<li class="with-x" v-if="searchParams.categoryName">{{searchParams.categoryName}}<i @click="removeCategoryName">×</i></li>

当用户点击删除时，则categoryName和各级Id的赋值为undefined，由于所带参数过多占宽带，所以选择赋值为undefined，即没有值的参数不被携带。
地址栏也需要修改，当点击删除时，地址栏应该变为/search。此时可以选择路由由当前所在页面再次跳转至search页面。如果此时右侧输入框里有关键字即地址栏存在params，所以此时需要携带params参数，即此时需要作出判断是否携带params参数。

//删除分类名字
removeCategoryName(){
  this.searchParams.categoryName = undefined
  this.searchParams.category1Id = undefined
  this.searchParams.category2Id = undefined
  this.searchParams.category3Id = undefined
  this.getData()
  //地址栏也需要修改
  if(this.$route.params){
    this.$router.push({name:'search',params:this.$route.params})
  } 
}

地址栏内容修改，本意是修改query参数，如果路径当中存在params参数，不应该删除，应该携带。

搜索框的面包屑

当面包屑的关键字清除以后，需要让兄弟组件Header组件中的关键字清除。
利用全局事件总线实现组件通信。

  //在main.js全局事件总线$bus配置
  beforeCreate(){
    Vue.prototype.$bus = this
  }

当用户点击删除面包屑时，则会触发此事件

removeKeyword(){
  this.searchParams.keyword = undefined
  this.getData()
  //通知兄弟组件Header清除关键字
  this.$bus.$emit('clear')
}

在TheHeader组件通过全局事件总线清除关键字

    removeKeyword(){
      this.searchParams.keyword = undefined
      this.getData()
      //通知兄弟组件Header清除关键字
      this.$bus.$emit('clear')
      this.$router.push({name:'search',query:this.$route.query})
    }

进行路由的跳转,如果路由中携带query参数，则路由地址中应该也有query参数

品牌信息

点击了品牌，需要整理参数，向服务器发送请求获取相应的数据进行显示，此时应该在父组件TheSearch发送请求，父组件中的searchParams参数带给服务器参数，子组件需要将点击的品牌信息传递给父组件。
自定义事件：
1、绑定自定义事件：

<SearchSelector @trademarkInfo='trademarkInfo'/>

2、在子组件触发自定义事件（记得传参）

this.$emit('trademarkInfo',trademark)

3、在父组件设置自定义事件回调

trademarkInfo(trademark){
  //整理参数
  this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
  this.getData()
}

4、当用户点击删除，路由在次跳转

removeTrademark(){
  this.searchParams.trademark = undefined
  this.getData()
}

属性

仍使用自定义事件传递数据attr和attrValue
收集属性回调：

attrInfo(attr,attrValue){
  //整理参数
  let props = `${attr.attrId}:${attrValue}:${attr.attrName}`
  //添加时先数组去重
  if(this.searchParams.props.indexOf(props) == -1){
    this.searchParams.props.push(props)
    this.getData()
  } 
}

删除属性：

removeAttr(index){
  this.searchParams.props.splice(index,1)
  this.getData()
}

注意点：
1、由于此时的参数是一个数组，不可以v-if来显示，应该用v-for来进行遍历显示。
2、整理的参数也需要使用数组的方法push和splice进行添加和删除。
3、在面包屑显示之前需要使用indexOf进行数组去重。

排序操作

1、active类名是否存在，取决于searchParams里order包含的数字，1即为综合，2即为价格。

<li :class="{active: isOne}">
...
<li :class="{active: isTwo}">

  computed:{
    isOne(){
      return this.searchParams.order.indexOf('1') != -1
    },
    isTwo(){
      return this.searchParams.order.indexOf('2') != -1
    }
  }

2、箭头位置取决于active类名所在位置

<li :class="{active: isOne}">
  <a>综合<span v-show="isOne">箭头</span>></a>
</li>
<li :class="{active: isTwo}">
  <a>价格<span v-show="isTwo">箭头</span></a>
</li>

3、在阿里图标库找到想要的箭头图标，生成在线链接，在public的index中引入。

 <link rel="stylesheet" href="<%= BASE_URL %>https://at.alicdn.com/t/c/font_3602037_vwob8i3v55f.css">

再次利用计算属性进行展示

<li :class="{active: isOne}">
  <a>综合<span v-show="isOne" class="iconfont" :class="{'icon-long-arrow-alt-up':isAsc,'icon-downarrow':isDesc}"></span></a>
</li>
<li :class="{active: isTwo}">
  <a>价格<span v-show="isTwo" class="iconfont" :class="{'icon-long-arrow-alt-up':isAsc,'icon-downarrow':isDesc}"></span></a>
</li>

给两个li标签添加点击事件

      //排序操作
    changeOrder(flag){
      //flag形参，它是一个标记代表用户点击的是综合（1）还是价格（2）用户点击时传递过来
      let originFlag = this.searchParams.order.split(':')[0]
      let originSort = this.searchParams.order.split(':')[1]
      let newOrder = ''
      //确定点击的一定是综合
      if(originFlag == flag){
        newOrder = `${originFlag}:${originSort=='desc'?'asc':'desc'}`
      }else{
        newOrder = `${flag}:${'desc'}`
      }
      //修改新的order
      this.searchParams.order = newOrder
      this.getData()
    }

逻辑：
1、先获取‘：’前后的数据并保存。
2、当点击的flag与默认一致，则新的order应该是这样${默认flag}:${默认sort=='desc'?'另一个值':'desc'}，如果此时‘：’后的值与默认值一样则变成另一个值，如果不一样就变为默认值。
3、当点击的flag与默认的不一致，则新的order应该是这样${flag}:${'默认sort'}此时的flag即为用户点击的flag，初次展示的是默认sort。
4、当用户再次点击该flag，则是执行第二点的内容，因为此时用户点击的flag与刚刚一致。
注意：每点击一次默认flag和默认sort都会发生改变，即用户所点击的flag和sort

分页器

1、当前是第几个：pageNo字段代表当前页数
2、每一个页面需要展示多少条数据：pageSize字段代表
3、一共有多少条数据：total字段代表【获取一共有多少页】
4、连续的页码的个数：5或7，【奇数】前后对称，continues代表

先用假数据进行调试
<PagiNation :pageNo='1' :pageSize='3' :total='91' :continues='5'/>

起始与结束数字

计算出连续的页码的起始数字和结束数字

startNumAndEndNum(){
    //解构
    const {continues,totalPage,pageNo} = this
    let start = 0,end = 0
    //判断至少5页，如果出现不足五页
    if(continues > totalPage){
        start = 1
        end =totalPage
    }else{
        //页码大于5
        start = pageNo - parseInt(continues/2)
        end = pageNo + parseInt(continues/2)
        //start不能为0和负数
        if(start<1){
            start =1
            end = continues
        }
        if(end>totalPage){
            end = totalPage
            start = totalPage - continues + 1
        }
    }
    return {start,end}
}

页码数显示

1、v-for:可以遍历数组、数字、字符串、对象

v-for="(page,index) in startNumAndEndNum.end" :key="index"

2、设置页码数的动态显示
3、利用自定义事件子向父传递参数pageNo并发送请求
4、设置背景显示类名active
TheSearch.vue

<PagiNation :pageNo='searchParams.pageNo' :pageSize='searchParams.pageSize' :total='total' :continues='5' @getPageNo='getPageNo'/>

    //获取当前页数
    getPageNo(pageNo){
      //整理参数
      this.searchParams.pageNo = pageNo
      this.getData()
    }

PagiNation.vue

<div class="pagination">
    <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
    <button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
    <button v-if="startNumAndEndNum.start > 2">···</button>

    <!-- 中间部分 -->
    <button v-for="(page,index) in startNumAndEndNum.end" :key="index" v-if="page >= startNumAndEndNum.start" @click="$emit('getPageNo',page)" :class="{active:pageNo==page}">{{page}}</button>

    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
    <button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==totalpage}">{{totalPage}}</button>
    <button :disabled="pageNo==totalPage" @click="$emit('getPageNo',pageNo+1)">下一页</button>

    <button style="margin-left: 30px">共 {{total}} 条</button>
</div>

小婵婵不怕鬼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue项目流程4，TheSearch模块开发，getters的使用，带给服务器的参数，实现可以再次发送请求，分类、搜索框、品牌信息、属性面包屑，排序操作，分页器的相关步骤

点击了品牌，需要整理参数，向服务器发送请求获取相应的数据进行显示，此时应该在父组件TheSearch发送请求，父组件中的searchParams参数带给服务器参数，子组件需要将点击的品牌信息传递给父组件。当用户点击删除时，则categoryName和各级Id的赋值为undefined，由于所带参数过多占宽带，所以选择赋值为undefined，即没有值的参数不被携带。如果用户网络出现问题，此时服务器还未返回数据，但是已经开始遍历了，此时返回的可能是一个undifined，所以此时需要给用户返回一个空数组。
复制链接

扫一扫