Vue3学习（十七） - 点击二级分类实现自动筛选功能

写在前面

怎么来诠释下现在的心情呢？

算是比较复杂吧，我也想过关于自己个人问题的事，始终是无解的状态。

35岁，变成了一个没有胆量、小心翼翼的年纪，甚至说慎重到说话都要反复思考的程度，先不说内耗问题了，真的就是负能量爆棚了，我有那么一阵极度怀疑自己丧失了和人沟通的能力。

今天，我coding的时候，偶然听到爸妈对我婚姻的事，表现出了很大的无奈感。

就给我一种，我没结婚，或者相亲失败，都是我的问题，我太挑了，难道结婚，真的就是随便一个人就行吗？

上次给我介绍个地铁口卖烤地瓜的、大上次介绍的工厂打票的，各种给我洗脑，让我别太挑了，我想说我真的那么差吗？

那一刻我真的觉得，为什么要结婚，再结合上段感情，我发现现在我很难去相信一个人了。

如果人工智能真的可以做到极致，真的希望有个AI机器人另一半也不错，能和自己终老，陪伴一生，至少对我事绝对的忠诚，而不像人那么势力、物质、善变。

分类点击切换显示对应数据

1、任务拆解

• 首页默认显示欢迎页面，点击欢迎时，显示欢迎组件，点击分类时，显示电子书
• 点击某分类时，显示该分类下的电子书

2、默认显示欢迎页，点击分类显示电子书

这块呢，我们可以理解为，欢迎页面和电子书显示是互斥的，不能共同存在，用v-show来控制，再定一个响应式变量作为开关就可以实现了，示例代码如下：

<div class="welcome" v-show="isShowWelcome">
  <h1>欢迎来到六哥的学习空间！</h1>
</div>
<a-list
    v-show="!isShowWelcome"
    item-layout="vertical"
    size="large"
    :pagination="pagination"
    :grid="{ gutter: 20, column: 4 }"
    :data-source="ebooks"
>
  <template #renderItem="{ item }">
    <a-list-item key="item.title">
      <template #actions>
  <span v-for="{ icon, text } in actions" :key="icon">
    <component :is="icon" style="margin-right: 8px"/>
    {{ text }}
  </span>
      </template>
      <a-list-item-meta :description="item.description">
        <template #title>
          <a :href="item.href">{{ item.name }}</a>
        </template>
        <template #avatar>
          <a-avatar :src="item.cover"/>
        </template>
      </a-list-item-meta>
      {{ item.description }}
    </a-list-item>
  </template>
</a-list>

3、点击某分类，显示该分类下的电子书

这里可以理解为，我点击左侧二级分类菜单时可以查询出对应的电子书，再次拆分需要做两件事：

• 接口改造，根据查询电子书电子书后端接口增加分类参数
• 通过点击菜单，传递分类Id，作为动态查询条件，并调用查询接口，实现精准查询

3.1、后端改造

这里需要在请求参数添加categoryId2字段，作为查询条件，示例代码如下：

private Long categoryId2;

再对service改造，添加根据categoryId2进行查询，示例代码如下：

if (!ObjectUtils.isEmpty(ebookReq.getCategoryId2())){
    //相当于sql的like查询
    exampleCriteria.andCategory2IdEqualTo(ebookReq.getCategoryId2());
}

3.2、前端改造

这里需要对handleClick进行处理，沿用互斥模式下的赋值，从而达到动态精确查询的目的，示例代码如下：

  /**
    * 菜单切换
    * @param value
  */
const handleClick = (value:any) => {
  console.log("menu click",value)
  if(value.key==="welcome"){
    isShowWelcome.value=true
  }else{
    categoryId2=value.key
    isShowWelcome.value=false
    handleQueryEbook()
  }
};

/***
 * 查询电子书
 */
const handleQueryEbook = () => {
  axios.get("/ebook/list", {
    params: {
      page: 1,
      size: 1000,
      categoryId2: categoryId2
    }
  }).then((response) => {
    const data = response.data;
    ebooks.value = data.content.list;
  });
};

效果：

写在最后

凡事皆如此，人为何会有烦恼，是因为你有期待，有所求。

当所求未被响应，所期待被辜负，就会有心理落差。

所以最好的状态便是，不有求于别人，不被琐事所束缚，没欲望，没要求，和自己和解，也会活得很好。

加油，可爱的自己！