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;
  });
};

效果:

20240212_208d680abbcc7502_449754143859_92193457786295_published_mp4_264_hd_unlimit_taobao.gif

写在最后

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

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

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

加油,可爱的自己!

posted @ 2024-02-22 20:30  久曲健  阅读(329)  评论(0编辑  收藏  举报