城乡住房和城乡建设厅网站,本地搭建wordpress建站教程,wordpress 数据库清空,上海网址建设公司心链 — 伙伴匹配系统
搜索详情页面 之前前端的代码写到了搜索页面可以挑选搜索标签#xff0c;并没有去根据具体标签搜索用户。这里就开始实现。 新建SearchResultPage.vue#xff0c;并添加相关路由。 在搜索页添加搜索按钮#xff0c;和触发点击。搜索页选择标签#x…心链 — 伙伴匹配系统
搜索详情页面 之前前端的代码写到了搜索页面可以挑选搜索标签并没有去根据具体标签搜索用户。这里就开始实现。 新建SearchResultPage.vue并添加相关路由。 在搜索页添加搜索按钮和触发点击。搜索页选择标签点击搜索。 div stylepadding: 16pxvan-button block typeprimary clickdoSearchResult搜索/van-button/divimport {useRouter} from vue-router;
const router useRouter();const doSearchResult () {router.push({path: /user/list,query: {tags: activeIds.value}})
} 修改SearchResultPage.vue页面相关信息。 在idea中添加个人简介字段注意前端也要修改添加。 templatevan-cardv-foruser in userList:descuser.profile:title${user.username} (${user.planetCode}):thumbuser.avatarUrltemplate #tagsvan-tag plain typedanger v-fortag in tags stylemargin-right: 8px; margin-top: 8px {{tag}}/van-tag/templatetemplate #footervan-button sizemini联系我/van-button/template/van-card
/templatescript setup
import {ref} from vue;
import {useRoute} from vue-router;const route useRoute();
const {tags} route.query;const mockUser ref({id: 931,username: 阿尼亚,userAccount: aniya,profile: 间谍过家家我哭我哭我哭我哭我哭,gender: 0,phone: 123456789101,email: isdafhiusahfqq.com,planetCode: 1273,avatarUrl: https://raw.githubusercontent.com/RockIvy/images/master/img/avatar42.jpg,tags: [java, emo, 打工中, emo, 打工中],createTime: new Date(),
})const userList ref({mockUser});/scriptstyle scoped/style 题外话banner.txt
Ascii艺术字实现个性化Spring Boot启动banner图案轻松修改更换banner.txt文件内容收集了丰富的banner艺术字和图并且支持中文banner下载让你的banner好玩儿更有意思。
后端搜索接口
/*** 根据标签搜索用户* param tagList 用户拥有的标签* return*/GetMapping(/search/tags)public BaseResponseListUser searchUsersByTags(RequestParam(required false) ListString tagList){if (CollectionUtils.isEmpty(tagList)) {throw new BusinessException(ErrorCode.PARAMS_ERROR);}ListUser userList userService.searchUsersByTags(tagList);return ResultUtils.success(userList);}前后端联调
axios中文网|axios API 中文文档 跟着官方文档走
使用 npm:npm install axios使用 bower:bower install axios使用 yarnyarn add axios使用 cdn:script srchttps://unpkg.com/axios/dist/axios.min.js/script新建plugins文件夹新建myAxios.js文件。
// Set config defaults when creating the instance
//自定义实例默认值
import axios from axios;const myAxios axios.create({baseURL: http://localhost:8080/api
});//拦截器
// 添加请求拦截器
myAxios.interceptors.request.use(function (config) {// 在发送请求之前做些什么console.log(请求发送了,config)return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
myAxios.interceptors.response.use(function (response) {// 对响应数据做点什么console.log(请求收到了了,response)return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});export default myAxios;然后是用户根据标签搜素要去调用后端的数据。就需要axios接受和发送请求。 http://www.axios-js.com/zh-cn/docs/#案例 在searchResultPage.vue页面添加axios。并测试访问会报错因为跨域了。 访问了这个路径 console.log(‘/user/search/tags error’,error); Toast.fail(‘请求失败’); 后端允许一下前端端口访问。修改usercontroller。在运行访问一下。前后端都要启动 虽然请求还是失败但请求地址改变了。下面是下面是参数序列化。这边应该是后端相应的问题。 主要的问题是参数传递的问题。前端传入的是string类型后端要的是数组类型。也就是上面我们测试遇到的问题。
templatevan-cardv-foruser in userList:descuser.profile:title${user.username} (${user.planetCode}):thumbuser.avatarUrltemplate #tagsvan-tag plain typedanger v-fortag in tags stylemargin-right: 8px; margin-top: 8px {{tag}}/van-tag/template
template #footervan-button sizemini联系我/van-button
/template/van-cardvan-empty v-if!userList || userList.length 1 description搜索结果为空 /
/templatescript setup import {onMounted, ref} from vue;import {useRoute} from vue-router;import {Toast} from vant;import myAxios from ../plugins/myAxios.js;import qs from qsconst route useRoute();const {tags} route.query;const mockUser ref({id: 931,username: 沙鱼,userAccount: shayu,profile: 一条咸鱼,gender: 0,phone: 123456789101,email: shayu-yushaqq.com,planetCode: 931,avatarUrl: https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/shayu931/shayu.png,tags: [java, emo, 打工中, emo, 打工中],createTime: new Date(),})const userList ref([]);onMounted( async () {// 为给定 ID 的 user 创建请求const userListData await myAxios.get(/user/search/tags,{withCredentials: false,params: {tagNameList: tags},//用鱼皮的这个我的头像不会显示。// paramsSerializer: params {// return qs.stringify(params,{indices: false})// }//序列化paramsSerializer: {serialize: params qs.stringify(params, { indices: false}),}}).then(function (response) {console.log(/user/search/tags succeed,response);Toast.success(请求成功);return response.data?.data;}).catch(function (error) {console.log(/user/search/tags error,error);Toast.fail(请求失败);});if (userListData){userListData.forEach(user {if (user.tags){user.tags JSON.parse(user.tags);}})userList.value userListData;}})/scriptstyle scoped/style分布式session
:::danger 种 session 的时候注意范围cookie.domain 比如两个域名 aaa.yupi.com bbb.yupi.com 如果要共享 cookie可以种一个更高层的公共域名比如 yupi.com 为什么服务器 A 登录后请求发到服务器 B不认识该用户 用户在 A 登录所以 session用户登录信息存在了 A 上 结果请求 B 时B 没有用户信息所以不认识。 ::: :::danger 解决方案共享存储 而不是把数据放到单台服务器的内存中 :::
Session 共享实现Redis
:::warning 如何共享存储
Redis基于内存的 K / V 数据库此处选择 Redis因为用户信息读取 / 是否登录的判断极其频繁 Redis 基于内存读写性能很高简单的数据单机 qps
5w - 10w
MySQL文件服务器 ceph 官网https://redis.io/
windows 下载 Redis 5.0.14 下载 链接https://pan.baidu.com/s/1XcsAIrdeesQAyQU2lE3cOg 提取码vkoi redis 管理工具 quick redishttps://quick123.net/
引入 redis能够操作 redis ::: !-- redis --!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-redis --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-redis/artifactIdversion2.6.4/version/dependency引入 spring-session 和 redis 的整合使得自动将 session 存储到 redis 中 !-- session-data-redis --!-- https://mvnrepository.com/artifact/org.springframework.session/spring-session-data-redis --dependencygroupIdorg.springframework.session/groupIdartifactIdspring-session-data-redis/artifactIdversion2.6.3/version/dependency修改 spring-session 存储配置 spring.session.store-type 默认是 none表示存储在单台服务器 store-type: redis表示从 redis 读写 session 打包并分开运行。 再去他们对应的swagger-ui接口测试。 在8080端口登录了可以在8081端口获取到用户信息。 JWT 的优缺点https://zhuanlan.zhihu.com/p/108999941
