寫在前面
怎麼來詮釋下現在的心情呢？
算是比較複雜吧，我也想過關於自己個人問題的事，始終是無解的狀態。
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;
});
};
效果：
寫在最後
凡事皆如此，人爲何會有煩惱，是因爲你有期待，有所求。
當所求未被響應，所期待被辜負，就會有心理落差。
所以最好的狀態便是，不有求於別人，不被瑣事所束縛，沒慾望，沒要求，和自己和解，也會活得很好。
加油，可愛的自己！