写在前面
怎么来诠释下现在的心情呢？
算是比较复杂吧，我也想过关于自己个人问题的事，始终是无解的状态。
35岁，变成了一个没有胆量、小心翼翼的年纪，甚至说慎重到说话都要反复思考的程度，先不说内耗问题了，真的就是负能量爆棚了，我有那么一阵极度怀疑自己丧失了和人沟通的能力。
今天，我coding的时候，偶然听到爸妈对我婚姻的事，表现出了很大的无奈感。
就给我一种，我没结婚，或者相亲失败，都是我的问题，我太挑了，难道结婚，真的就是随便一个人就行吗？
上次给我介绍个地铁口卖烤地瓜的、大上次介绍的工厂打票的，各种给我洗脑，让我别太挑了，我想说我真的那么差吗？
那一刻我真的觉得，为什么要结婚，再结合上段感情，我发现现在我很难去相信一个人了。
如果人工智能真的可以做到极致，真的希望有个AI机器人另一半也不错，能和自己终老，陪伴一生，至少对我事绝对的忠诚，而不像人那么势力、物质、善变。
分类点击切换显示对应数据
1、任务拆解
- 首页默认显示欢迎页面，点击欢迎时，显示欢迎组件，点击分类时，显示电子书
- 点击某分类时，显示该分类下的电子书
2、默认显示欢迎页，点击分类显示电子书
这块呢，我们可以理解为，欢迎页面和电子书显示是互斥的，不能共同存在，用v-show来控制，再定一个响应式变量作为开关就可以实现了，示例代码如下：
代码语言：javascript复制<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字段，作为查询条件，示例代码如下：
代码语言：javascript复制private Long categoryId2;
再对service改造，添加根据categoryId2进行查询，示例代码如下：
代码语言：javascript复制if (!ObjectUtils.isEmpty(ebookReq.getCategoryId2())){
//相当于sql的like查询
exampleCriteria.andCategory2IdEqualTo(ebookReq.getCategoryId2());
}
3.2、前端改造
这里需要对handleClick进行处理，沿用互斥模式下的赋值，从而达到动态精确查询的目的，示例代码如下：
代码语言：javascript复制 /**
* 菜单切换
* @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;
});
};
效果：
写在最后
凡事皆如此，人为何会有烦恼，是因为你有期待，有所求。
当所求未被响应，所期待被辜负，就会有心理落差。
所以最好的状态便是，不有求于别人，不被琐事所束缚，没欲望，没要求，和自己和解，也会活得很好。
