知识星球-伙伴匹配系统04

已于 2023-08-21 19:58:21 修改
阅读量428 收藏 2
点赞数
分类专栏： 伙伴匹配系统学习笔记 文章标签： spring boot java vue.js
于 2023-08-12 15:09:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52642109/article/details/132248912
版权

伙伴匹配系统04

目标

1.页面改造和功能开发（搜索页面，用户信息，用户修改页面）

2.单机登录改为分布式登录

3.标签的整理，细节的优化

1.前端页面跳转传值

1.query => url searchParams ,url后附加参数，传递的值长度有限

2.vuex（全局状态管理）搜索页将关键词塞到状态中，搜索结果页从状态中取值

首先新建一个搜索结果页面，并在config/route.ts中配置好路由

import SearchResultPage from "../pages/SearchResultPage.vue";

const routes = [    { path: '/user/list', component:SearchResultPage }]

在SearchPage.vue页面中定义一个按钮，添加一个点击事件,并添加对应的事件的方法

<van-button type="primary" @click="doSearchResult">搜索</van-button>

//执行搜索后
const doSearchResult = () =>{
  router.push({
    path:'/user/list',
    query:{
      tags:activeIds.value
    }
  })
}

选择标签，然后点击按钮测试

image-20230802095630975

发现选中的标签参数已经被获取到

image-20230802095416511

优化搜索按钮

image-20230811103404449

image-20230811103257888

2.初步实现标签搜索功能

2.1当我们点击搜索时需要获取到所搜索的用户列表，先做一个模板，展示一下搜索结果页面在Page文件夹下添加SearchResultPage.vue

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.username} (${user.planetCode})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>

</template>

<script setup>
import {ref} from "vue";
import {useRoute} from "vue-router";


const route =useRoute();

const { tags }=route.query;



const mockUser={
  id: 12345,
  username: 'coderhyx',
  userAccount: '12312',
  profile:'是ikun，也是精神小伙，原神启动，原来你也玩原神。',
  avatarUrl: 'http://images/2023/07/31/pic.md.jpg',
  gender:0,
  phone: 12122223333,
  email: '455dssds@qq.com',
  userRole: 0,
  planetCode: '1234',
  tags:['java','emo','打工中','python','开心'],
  createTime: new Date(),
}

const userList = ref([mockUser])
</script>

<style scoped>

</style>

image-20230811102057989

效果展示

image-20230811101347141

2.2在UserController添加接口

 @GetMapping("/search/tags")
    public BaseResponse<List<User>> searchUserByTags(@RequestParam(required = false) List<String> tagsNameList){
        List<User> userList = userService.searchUsersByTags(tagsNameList);
        if(CollectionUtils.isEmpty(tagsNameList)){
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        return ResultUtils.success(userList);
    }

image-20230811122157251

2.3测试一下

image-20230811121838506

image-20230811122021928

2.4现在开始让前端发请求，先整合axios

npm install axios

自定义axios

image-20230811124054563

当我们点击搜索按钮之后需要跳转到搜索结果页面并发出请求，获取到后端传来的数据

定义搜索结果页面的钩子函数，在页面加载完成就发请求

onMounted(()=>{
  myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    }
  })
  .then(function (response) {
    console.log('/user/search/tags===>succeed',response);
    Toast.success('请求成功')
  })
  .catch(function (error) {
    console.error('/user/search/tags===>error',error);
    Toast.fail('请求失败')
  });
})

跨域

后端接口上添加注解

@CrossOrigin(origins = { "http://localhost:3000" })

image-20230811130603975

跨域问题解决

新问题，参数格式不对

image-20230811130849195

1：28

请求格式不对 axios get数组传数组后端不认识，需要序列化

更新搜索结果页面添加代码

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.username} (${user.planetCode})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import qs from 'qs';

const route =useRoute();

const { tags }=route.query;

onMounted(()=>{
  myAxios.get('/user/search/tags', {
    params: {
      tagsNameList: tags
    },
    paramsSerializer:params => {
      return qs.stringify(params,{indices:false})
    }
  })
  .then(function (response) {
    console.log('/user/search/tags===>succeed',response);
    Toast.success('请求成功')
  })
  .catch(function (error) {
    console.error('/user/search/tags===>error',error);
    Toast.fail('请求失败')
  });
})






const mockUser={
  id: 12345,
  username: 'coderhyx',
  userAccount: '12312',
  profile:'是ikun，也是精神小伙，原神启动，原来你也玩原神。',
  avatarUrl: 'http://2023/07/31/pic.md.jpg',
  gender:0,
  phone: 12122223333,
  email: '455dssds@qq.com',
  userRole: 0,
  planetCode: '1234',
  tags:['java','emo','打工中','python','开心'],
  createTime: new Date(),
}

const userList = ref([mockUser])
</script>

<style scoped>

</style>

image-20230811230021901

重新测试

image-20230811230118501

后台也能接受到参数

image-20230811225757399

优化代码

image-20230811233945749

发现标签太丑了

image-20230811234159277

再次进行优化

image-20230811234534324

image-20230811234508460

当搜索结果为空时需要展示空界面

添加一行

 <van-empty v-if="!userList||userList.length<1" image="search" description="搜索结果为空" />

最终优化效果

搜索

SearchResult.vue完整代码

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.username} (${user.planetCode})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>
  <van-empty v-if="!userList||userList.length<1" image="search" description="搜索结果为空" />
</template>

<script setup >
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import qs from 'qs';

const route =useRoute();

const { tags }=route.query;

const userList = ref([])

onMounted(async () =>{
  const userListData= await myAxios.get('/user/search/tags', {
    params: {
      tagsNameList: tags
    },
    paramsSerializer:params => {
      return 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.error('/user/search/tags===>error',error);
    Toast.fail('请求失败')
  });
  if (userListData){
    userListData.forEach(user=>{
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }

})



const mockUser={
  id: 12345,
  username: 'coderhyx',
  userAccount: '12312',
  profile:'是ikun，也是精神小伙，原神启动，原来你也玩原神。',
  avatarUrl: 'http://images/2023/07/31/pic.md.jpg',
  gender:0,
  phone: 12122223333,
  email: '455dssds@qq.com',
  userRole: 0,
  planetCode: '1234',
  tags:['java','emo','打工中','python','开心'],
  createTime: new Date(),
}


</script>

<style scoped>

</style>

ps：展示不了profile个人介绍？别忘了后端的脱敏方法，要添加哦

1:43

3.Session共享

种Session的时候注意范围

比如两个域名

aaa.coderhyx.com

bbb.coderhyx.com

如果要共享cookie,可以种一个更高层的公共域名 coderhyx.com

4.为什么服务器A登录之后，请求发送到服务器B, 不认识该用户？（分布式）

用户在A登录，所以Session（用户登录信息）存在了A上，结果请求B时，B没有用户信息，所以不认识。

如何解决：共享存储，而不是把数据存到单台服务器的内存中

image-20230812103444289

image-20230812103155410

整一个公共存储区去存登录信息

5.如何共享存储Session？

1.Redis(基于内存的K/V数据库)，

2.MySQL

3.文件服务器ceph

这里我们选择Redis，因为用户信息的读取，是否登录的判断，及其频繁

5.1.安装redis

电脑安装Redis

安装教程看以前的文档

SpringBoot 引入Redis包

https://mvnrepository.com/

在仓库去找

找与springBoot相匹配的包

5.2.引入redis:能够操作redis

        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-redis -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
            <version>2.6.4</version>
        </dependency>

redis管理工具：quickRedis

yml中添加redis配置

image-20230812112913498

5.3.引入spring -session-redis的整合，使得自动将 Session存储到redis中

<!-- https://mvnrepository.com/artifact/org.springframework.session/spring-session-data-redis -->
<dependency>
    <groupId>org.springframework.session</groupId>
    <artifactId>spring-session-data-redis</artifactId>
    <version>2.6.3</version>
</dependency>

修改SpringSession存储配置spring.session.store-type

默认是nono,表示存储在服务器

我们选择redis,表示在redis中读写

image-20230812113821181

5.4简简单单测试一手

image-20230812125227477

打开terminal命令行

image-20230812125427724

运行一手刚才打包的

image-20230812125523263

java -jar .\get-friend-backend-0.0.1-SNAPSHOT.jar --server.port=8081

mysql连接驱动的问题看下面的

https://stackoverflow.com/questions/76305054/mysql-connector-j-vs-mysql-connector-java-maven-dependency-differences

测试一下，同时启动两个项目

image-20230812144533710

image-20230812144606307

image-20230812144757218

image-20230812144902113

这样我们就完成了多个服务器之间共享一个session数据，也就是最简单的分布式

在redis中也能看到刚才存储的数据

image-20230812145118712

渡边彻彻泽一
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
伙伴匹配系统笔记---01
JEREMY的博客
05-10 577
1. 用户去添加标签，标签的分类（要有哪些标签、怎么把标签进行分类）学习方向 java / c++，工作 / 大学。2. 主动搜索：允许用户根据标签去搜索其他用户。1. 相似度计算算法 + 本地分布式计算。1. Redis 缓存。3. 根据标签查询队伍。4. 允许用户去修改标签。
伙伴匹配系统笔记---07
JEREMY的博客
05-20 589
分布式操作 Redis 的 Java 客户端，让你像在使用本地的集合一样操作 Redis（分布式 Redis 数据网格），并且追求简单，并且没有过高的性能要求，可以用 Jedis + Jedis Pool。，并且没有过多的定制化要求，可以用 Spring Data Redis，最方便。，并且追求高性能、高定制化，可以用 Lettuce，支持异步、连接池。1) java中操作redis：使用Java-Data-Redis。高阶*的操作 Redis 的 Java 客户端。(3) 使用定时任务：进行缓存。
CAMPUS 校园伙伴匹配系统完结啦
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
09-23 1593
校园伙伴匹配（CAMPUS 伙伴），一个前后端分离的用户匹配系统，前端使用 Vite + Vue3 + Vant4 ，后端使用 SpringBoot + MyBatis-Plus + MySQL + Redis 等技术，使用 WebSocket 实现实时通信，并结合 阿里云SDK 完成图片上传。
心链1---项目介绍和项目初始化
最新发布
Rockivy的博客
05-25 1199
介绍：帮助大家找到志同道合的伙伴，移动端 H5 网页（尽量兼容 PC 端）
Java项目：伙伴匹配系统（持续更新中）
m0_61950264的博客
08-04 544
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JyeT94kp-1691162492676)(笔记.assets/image-20230804231037623.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nzAfKAgL-1691162492677)(笔记.assets/image-20230804231328263.png)]踩坑：如果发现导航栏的样式混乱，在 main.js 中删除引入的 ./style.css。
知识星球-伙伴匹配系统08
渡边彻的博客
08-21 322
1.分布式锁的定时任务 2.redisson实现锁续期
知识星球-伙伴匹配系统笔记2
渡边彻的博客
07-31 353
​ 由于我们使用的是vue3,所以对应的是4版本的路由​​ 或者​​ 如下图但是这样定义会有问题，如果我们的路径太多，就会导致我们的main.ts特别臃肿，所以，要把路由单独抽出来定义当然，这边导出之后也别忘了在main.ts中导入查看vant3文档,可以直接使用标签栏支持路由模式，用于搭配vue-router使用。路由模式下会匹配页面路径和标签的to属性，并自动选中对应的标签。
知识星球-评论助手-crx插件
04-01
知识星球-评论助手 我们混互联网的时候，经常看到一句话就是“自古评论出人才”，知识星球有非常多优秀的主题，同样我们在主题的评论区也能发掘到非常优秀的评论，但知识星球目前只能允许分享正文（不知道为什么官方...
知识星球-超级助手-crx插件
03-22
知识星球-超级助手 适配了新版的知识星球 ====================================================================== 修复了部分bug =============================================================== 增加了...
泰克高精度电源测试知识星球 - Tektronix
01-18
电源测试
光环效应 知识星球-数研基站.rar
09-10
"光环效应 知识星球-数研基站.pdf"这份文件很可能是对光环效应在不同领域应用的详细研究报告，包括了理论解释、案例分析以及如何在实际操作中应用和避免光环效应的建议。通过阅读这份报告，无论是IT从业者还是相关...
伙伴匹配系统笔记---03
JEREMY的博客
05-14 184
接口文档：请求参数、响应参数、接口地址、接口名称、请求类型、请求格式。有一个书面的文档，进行项目的维护和说明。EasyExcel：的使用（后补）
伙伴匹配推荐接口的优化策略【优先队列+多线程分批处理，java实现】
记录一名在读研究生的学习笔记、感悟、开发产物
05-13 741
使用 堆、多线程 来改进伙伴匹配推荐接口，优化其调用时间及占用内存。
Lack——伙伴匹配系统
weixin_52154534的博客
11-19 85
根据步骤配置，也可以在vite.config.ts文件中修改成以下代码以进行配置。添加配置库，vite是一个构建工具，需要让vite识别出vant可以到到。main.ts中应入相关的button，NavBar 导航栏组件。新建Layouts文件夹并建立BasicLayout.vue文件。在APP.json中应入BasicLayout。- 用户页（消息-暂时考虑发邮件）- 主页（推荐+广告）导航条：展示当前页名称。
伙伴匹配系统
sahuid的博客
10-07 157
伙伴匹配系统的相关知识点总结.
知识星球-伙伴匹配系统06
渡边彻的博客
08-16 265
1.开发主页 2.并发导入一百万数据 3.分页
伙伴匹配系统——前端路由整合以及搜索页面和个人信息页面搭建
Geng_____的博客
03-27 640
在页面中使用，在配置路由的时候可以先看一下组件库的官方文档，里面可能会配置相关路由的信息，可以节省我们开发时间。标签栏支持路由模式，用于搭配 Vue Router 使用。路由模式下会匹配页面路径和标签的。通过绑定activeIds进行绑定，然后使用v-for进行循环遍历。使用 router-view 组件指定路由对应组件的渲染位置（可以看成一个占位符）这样在页面切换的时候我们就可以看到上方地址的变化。在main.js当中引入路由并且创建路由实例。使用form表单在另一个页面使用。已选标签展示在已选标签处。
在线店铺点评App和伙伴匹配简历总结
qq_46603351的博客
11-06 117
对去年秋招简历的总结，校招的时候顺利拿下 offer主要是参考的鱼皮和黑马的项目
柚见(伙伴匹配系统)第九期
qq_73270720的博客
03-10 934
后端队伍基本增删改查实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值