心鏈——伙伴匹配系統(tǒng)

接口調試

說書人📖：上回書說到用了兩種方法查詢標簽1.SQL查詢，2.內存查詢；兩種查詢效率是部分上下，打的是難解難分，是時大地皴裂，天色聚變，老祖斟酌再三最后決定，使用內存查詢，并封印SQL查詢。

    /***   根據標簽搜索用戶。(內存過濾版)* @param tagNameList  用戶要搜索的標簽* @return*/@Overridepublic List<User> searchUsersByTags(List<String> tagNameList){if (CollectionUtils.isEmpty(tagNameList)){throw new BusinessException(ErrorCode.PARAMS_ERROR);}//1.先查詢所有用戶QueryWrapper<User> queryWrapper = new QueryWrapper<>();List<User> userList = userMapper.selectList(queryWrapper);Gson gson = new Gson();//2.判斷內存中是否包含要求的標簽 parallelStream()return userList.stream().filter(user -> {String tagstr = user.getTags();
//            if (StringUtils.isBlank(tagstr)){
//                return false;
//            }Set<String> tempTagNameSet =  gson.fromJson(tagstr,new TypeToken<Set<String>>(){}.getType());//java8  Optional 來判斷空tempTagNameSet = Optional.ofNullable(tempTagNameSet).orElse(new HashSet<>());for (String tagName : tagNameList){if (!tempTagNameSet.contains(tagName)){return false;}}return true;}).map(this::getSafetyUser).collect(Collectors.toList());}/***   根據標簽搜索用戶。(sql查詢版)*   @Deprecated 過時* @param tagNameList  用戶要搜索的標簽* @return*/@Deprecatedprivate List<User> searchUsersByTagBySQL(List<String> tagNameList){if (CollectionUtils.isEmpty(tagNameList)){throw new BusinessException(ErrorCode.PARAMS_ERROR);}QueryWrapper<User> queryWrapper = new QueryWrapper<>();//拼接tag// like '%Java%' and like '%Python%'for (String tagList : tagNameList) {queryWrapper = queryWrapper.like("tags", tagList);}List<User> userList = userMapper.selectList(queryWrapper);return  userList.stream().map(this::getSafetyUser).collect(Collectors.toList());}

Java 8

1. stream / parallelStream 流失處理
2. Optional 可選類

前端開發(fā)

前端整合路由

Vue-Router：直接看官方文檔引入

https://router.vuejs.org/zh/guide/#html

Vue-Router 其實就是幫助你根據不同的 url 來展示不同的頁面（組件），不用自己寫 if / else
路由配置影響整個項目，所以建議單獨用 config 目錄、單獨的配置文件去集中定義和管理。
有些組件庫可能自帶了和 Vue-Router 的整合，所以盡量先看組件文檔、省去自己寫的時間。

import { createApp } from 'vue'
import App from './App.vue'
import  {Icon,Button, NavBar,Tabbar,TabbarItem,Toast} from "vant";// @ts-ignore
import * as VueRouter from 'vue-router';
import routes from "./config/router";const app = createApp(App);
app.use(Button);
app.use(NavBar);
app.use(Icon);
app.use(Tabbar);
app.use(TabbarItem);
app.use(Toast);const router = VueRouter.createRouter({// 4. 內部提供了 history 模式的實現。為了簡單起見，我們在這里使用 hash 模式。history: VueRouter.createWebHashHistory(),routes, // `routes: routes` 的縮寫
})app.use(router)app.mount('#app')

單獨提出路由，新建config文件夾，新建router.ts文件。 （上面調好了的引入了router.ts）

然后就是主頁點擊跳轉要使用路由的操作了。

在Tabbar 標簽欄 - Vant 3

Vant 3 - Lightweight Mobile UI Components built on Vue 中有提到路由的使用。

搜索頁面

Vant3中找到搜索樣式

(事件監(jiān)聽）并添加到新建的搜索頁面searchPage.vue里

主頁搜索圖標跳轉路由

編程式導航 | Vue Router

路由掛載

改一下名，引入所有組件（這個是官方不推薦的，體量大。現在官網這個描述看不到了

添加分類選擇

選擇與標簽連接

關閉標簽

美化一下標簽的間隔樣式

<template><form action="/"><van-searchv-model="searchText"show-actionplaceholder="請輸入搜索標簽"@search="onSearch"@cancel="onCancel"/></form><van-divider content-position="left">已選標簽</van-divider><div v-if="activeIds.length === 0">請選擇標簽</div><van-row gutter="16" style="padding: 0 16px"><van-col v-for="tag in activeIds"><van-tag  closeable size="small" type="primary" @close="doclose(tag)">{{ tag }}</van-tag></van-col>
</van-row><van-divider content-position="left">已選標簽</van-divider><van-tree-select
v-model:active-id="activeIds"
v-model:main-active-index="activeIndex"
:items="tagList"/></template><script setup>import { ref } from 'vue';const searchText = ref('');const originTagList = [{text: '性別',children: [{ text: '男', id: '男' },{ text: '女', id: '女' },{ text: '嬲', id: '嬲' },],}, {text: '年級',children: [{ text: '大一', id: '大一' },{ text: '大二', id: '大二' },{ text: '大三', id: '大三' },{ text: '大四', id: '大四' },{ text: '大五', id: '大五' },{ text: '大六', id: '大六' },],},];//標簽列表let tagList = ref(originTagList);/***  搜索過濾* @param val*/const onSearch = (val) => {tagList.value = originTagList.map(parentTag =>{const tempChildren =  [...parentTag.children];const tempParentTag =  {...parentTag};tempParentTag.children = tempChildren.filter(item => item.text.includes(searchText.value))return tempParentTag;})};//取消  清空const onCancel = () => {searchText.value = '';tagList.value = originTagList;};//已選中的標簽const activeIds = ref([]);const activeIndex = ref(0);//關閉標簽const  doclose = (tag) =>{activeIds.value = activeIds.value.filter(item =>{return item !== tag;})}</script><style scoped></style>

用戶信息頁

在vant文檔里尋找到適合的組件來編寫用戶信息頁面，這里選擇了cell單元格，將其黏貼到UserPage.vue中

在src目錄下建立models目錄，并創(chuàng)建user.d.ts文件，將規(guī)范粘貼進去并適當修改如下

/*** 用戶類別*/
export type CurrentUser = {id: number;username: string;userAccount: string;avatarUrl?: string;gender: number;phone: string;email: string;userStatus: number;userRole: number;planetCode: string;tags: string[];createTime: Date;
};

在UserPage.vue中引入，自己寫點假數據

<template><van-cell title="昵稱" is-link to='/user/edit' :value="user.username"/><van-cell title="賬號" is-link to='/user/edit' :value="user.userAccount" /><van-cell title="頭像" is-link to='/user/edit'><img style="height: 48px" :src="user.avatarUrl"/></van-cell><van-cell title="性別" is-link to='/user/edit' :value="user.gender" /><van-cell title="電話" is-link to='/user/edit' :value="user.phone" /><van-cell title="郵箱" is-link to='/user/edit' :value="user.email" /><van-cell title="星球編號" :value="user.planetCode" /><van-cell title="注冊時間" :value="user.createTime.toISOString()" />
</template><script setup>
const user = {id: 1,username: '阿尼亞',userAccount: 'aniya',avatarUrl: 'https://profile.csdnimg.cn/2/B/1/1_qq_56098191',gender: '男',phone: '12131133313',email: '23432444@qq.com',planetCode: '2220',createTime: new Date(),
};
</script><style scoped></style>

編輯頁面

新建一個用戶編輯頁,命名為UserEditPage.vue

在route.ts添加新路由

對UserPage.vue和UserEditPage.vue進行修改 UserPage.vue：

UserEditPage頁面添加form表單，并完成獲取數值和修改。

<template><van-form @submit="onSubmit"><van-fieldv-model="editUser.currentValue":name="editUser.editKey":label="editUser.editName":placeholder="'請輸入${editUser.editName}'"/><div style="margin: 16px;"><van-button round block type="primary" native-type="submit">提交</van-button></div></van-form>
</template><script setup lang="ts">
import {useRoute} from "vue-router";
import {ref} from "vue";
const route = useRoute();
const editUser = ref({editKey: route.query.editKey,currentValue: route.query.currentValue,editName: route.query.editName,
})
const onSubmit = (values) => {//todo 把editKey currentValue editName提交到后臺console.log('onSubmit',values);
}</script>

頁面返回