武汉市做网站,深圳百度推广关键词推广,网站建设的维护,wordpress站群系统心链——伙伴匹配系统
接口调试 说书人#x1f4d6;#xff1a;上回书说到用了两种方法查询标签1.SQL查询#xff0c;2.内存查询#xff1b;两种查询效率是部分上下#xff0c;打的是难解难分#xff0c;是时大地皴裂#xff0c;天色聚变#xff0c;老祖斟酌再三最后决…心链——伙伴匹配系统
接口调试 说书人上回书说到用了两种方法查询标签1.SQL查询2.内存查询两种查询效率是部分上下打的是难解难分是时大地皴裂天色聚变老祖斟酌再三最后决定使用内存查询并封印SQL查询。 /*** 根据标签搜索用户。(内存过滤版)* param tagNameList 用户要搜索的标签* return*/Overridepublic ListUser searchUsersByTags(ListString tagNameList){if (CollectionUtils.isEmpty(tagNameList)){throw new BusinessException(ErrorCode.PARAMS_ERROR);}//1.先查询所有用户QueryWrapperUser queryWrapper new QueryWrapper();ListUser 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;
// }SetString tempTagNameSet gson.fromJson(tagstr,new TypeTokenSetString(){}.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 ListUser searchUsersByTagBySQL(ListString tagNameList){if (CollectionUtils.isEmpty(tagNameList)){throw new BusinessException(ErrorCode.PARAMS_ERROR);}QueryWrapperUser queryWrapper new QueryWrapper();//拼接tag// like %Java% and like %Python%for (String tagList : tagNameList) {queryWrapper queryWrapper.like(tags, tagList);}ListUser userList userMapper.selectList(queryWrapper);return userList.stream().map(this::getSafetyUser).collect(Collectors.toList());}Java 8
stream / parallelStream 流失处理Optional 可选类
前端开发
前端整合路由
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中找到搜索样式
(事件监听并添加到新建的搜索页面searchPage.vue里 主页搜索图标跳转路由
编程式导航 | Vue Router 路由挂载 改一下名引入所有组件这个是官方不推荐的体量大。现在官网这个描述看不到了 添加分类选择 选择与标签连接 关闭标签 美化一下标签的间隔样式 templateform action/van-searchv-modelsearchTextshow-actionplaceholder请输入搜索标签searchonSearchcancelonCancel//formvan-divider content-positionleft已选标签/van-dividerdiv v-ifactiveIds.length 0请选择标签/divvan-row gutter16 stylepadding: 0 16pxvan-col v-fortag in activeIdsvan-tag closeable sizesmall typeprimary closedoclose(tag){{ tag }}/van-tag/van-col
/van-rowvan-divider content-positionleft已选标签/van-dividervan-tree-select
v-model:active-idactiveIds
v-model:main-active-indexactiveIndex
:itemstagList//templatescript setupimport { 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;})}/scriptstyle scoped/style用户信息页
在vant文档里寻找到适合的组件来编写用户信息页面这里选择了cell单元格将其黏贴到UserPage.vue中 在src目录下建立models目录并创建user.d.ts文件将规范粘贴进去并适当修改如下
/*** 用户类别*/
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中引入自己写点假数据
templatevan-cell title昵称 is-link to/user/edit :valueuser.username/van-cell title账号 is-link to/user/edit :valueuser.userAccount /van-cell title头像 is-link to/user/editimg styleheight: 48px :srcuser.avatarUrl//van-cellvan-cell title性别 is-link to/user/edit :valueuser.gender /van-cell title电话 is-link to/user/edit :valueuser.phone /van-cell title邮箱 is-link to/user/edit :valueuser.email /van-cell title星球编号 :valueuser.planetCode /van-cell title注册时间 :valueuser.createTime.toISOString() /
/templatescript setup
const user {id: 1,username: 阿尼亚,userAccount: aniya,avatarUrl: https://profile.csdnimg.cn/2/B/1/1_qq_56098191,gender: 男,phone: 12131133313,email: 23432444qq.com,planetCode: 2220,createTime: new Date(),
};
/scriptstyle scoped/style编辑页面
新建一个用户编辑页,命名为UserEditPage.vue
在route.ts添加新路由 对UserPage.vue和UserEditPage.vue进行修改 UserPage.vue UserEditPage页面添加form表单并完成获取数值和修改。
templatevan-form submitonSubmitvan-fieldv-modeleditUser.currentValue:nameeditUser.editKey:labeleditUser.editName:placeholder请输入${editUser.editName}/div stylemargin: 16px;van-button round block typeprimary native-typesubmit提交/van-button/div/van-form
/templatescript setup langts
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页面返回
