鱼泡-伙伴匹配系统

第一次直播

项目介绍

帮助找到志同道合的伙伴

需求分析

  1. 标签分类

  2. 主动搜索

  3. 组队

    1. 创建队伍
    2. 加入队伍
    3. 根据标签查询队伍

前端项目初始化

项目初始化文件夹中一定不要带空格! 使用npm(node包管理器)来安装

Vite

脚手架:
vue cli
vite

项目中使用:vite

src:
https://vitejs.cn/guide/#scaffolding-your-first-vite-project

1. npm init vite@latest2.
√ Project namel4. 启动项目:npm run dev

Vant

src:https://vant-ui.github.io/vant/v3/#/zh-CN

轻量、可靠的移动端 Vue 组件库

根据官方文档进行配置:

1. # 通过 npm 安装 npm i unplugin-vue-components -D(这个插件就是按需引入,没必要全部都下载)2. 修改配置: 在config文件中
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';export default {plugins: [vue(),Components({resolvers: [VantResolver()],}),],
};

在main文件中挂载需要的组件:

import { createApp } from 'vue'  
import './style.css'  
import App from './App.vue'  
import { Button } from 'vant';  
import 'vant/lib/index.css';  const app = createApp(App);  
app.use(Button);  
app.mount('#app');

在App.Vue首页写入组件代码:

<van-button type="primary">主要按钮</van-button>  
<van-button type="success">成功按钮</van-button>  
<van-button type="default">默认按钮</van-button>  
<van-button type="warning">警告按钮</van-button>  
<van-button type="danger">危险按钮</van-button>

整体框架设计

开发页面经验:

1.多参考
2.从整体到局部
3.先想清楚页面要做成什么样子,再写代码

设计

  1. 导航条

  2. 内容

  3. tab栏

    1. 主页(推荐页 + 广告
      1. 搜索页
      2. banner
      3. 推荐信息流
    2. 队伍页
    3. 用户页

总体浏览:
image.png

设置:

  1. 导航栏
<van-nav-bar  title="标题"  left-text="返回"  left-arrow  @click-left="onClickLeft"  @click-right="onClickRight"  
>  %% 插槽 %%<template #right>  <van-icon name="search" size="18"/>  </template>  </van-nav-bar>
  1. 标签栏
<!--  下面的边栏-->  <van-tabbar v-model="active"  @change="onChange">  <van-tabbar-item name="index" icon="home-o">主页</van-tabbar-item>  <van-tabbar-item name="team" icon="search">队伍</van-tabbar-item>  <van-tabbar-item name="user" icon="friends-o">个人</van-tabbar-item>  </van-tabbar>

整体代码:

<script setup lang="ts">  import {ref} from "vue";  import {showToast} from "vant";  import Index from "../pages/index.vue";  // 显示的页面需要引入  import Team from "../pages/team.vue";  import Profile from "../pages/profile.vue";  const onClickLeft = () => console.log("左")  const onClickRight = () => console.log("右")  const active = ref("index");  // 使用showToast展示相对应的标签 会有一个浮动的窗口  const onChange = (index) => showToast(`标签 ${index}`);  
</script>  
<template>  <van-nav-bar      title="标题"  left-text="返回"  left-arrow  @click-left="onClickLeft"  @click-right="onClickRight"  >  <template #right>  <van-icon name="search" size="18"/>  </template>    </van-nav-bar><!--  下面的边栏-->  <van-tabbar v-model="active"  @change="onChange">  <van-tabbar-item name="index" icon="home-o">主页</van-tabbar-item>  <van-tabbar-item name="team" icon="search">队伍</van-tabbar-item>  <van-tabbar-item name="user" icon="friends-o">个人</van-tabbar-item>  </van-tabbar><!--通过active进行激活 判断显示哪一个页面-->  <div id="content">  <template v-if="active === 'index'">  <index></index>    </template>    <template v-if="active === 'team'">  <team></team>    </template>    <template v-if="active === 'user'">  <profile></profile>    </template>  </div></template>  
<style scoped>  
</style>

后端数据库开发

  1. 标签表的开发
    字段:

id int 主键

标签名 varchar 非空(必须唯一,唯一索引)

上传标签的用户 userId int(如果要根据 userId 查已上传标签的话,最好加上,普通索引)

父标签 id ,parentId,int(分类)

是否为父标签 isParent, tinyint(0 不是父标签、1 - 父标签)

创建时间 createTime,datetime

更新时间 updateTime,datetime

是否删除 isDelete, tinyint(0、1)

create table tag  
(  id         bigint auto_increment comment 'id'  primary key,  tagName    varchar(256)                       null comment '标签名称',  userId     bigint                             null comment '用户 id',  parentId   bigint                             null comment '父标签 id',  isParent   tinyint                            null comment '0 - 不是, 1 - 父标签',  createTime datetime default CURRENT_TIMESTAMP null comment '创建时间',  updateTime datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,  isDelete   tinyint  default 0                 not null comment '是否删除',  constraint uniIdx_tagName  unique (tagName)  
);
  1. 用户表 添加标签字段(表示这个用户具有什么标签)

image.png

后端开发接口

  1. 复制user-center的项目,删除相关的文件,把所有user-center名字修改为partner-matching

标签

一个用户存在tag字段:包括了多个标签,mysql数据库中tag字段包含了json数据[“xxx”,“xxxx”]

通过tag字段去搜索相对应的用户

举个例子: 查询有java、python这两个标签的用户

1. 使用sql查询带有特定标签的用户

@Override  public List<User> searchUserByTags(List<String> tagNameLists) {  
//        如果搜索到的数据都是空的 报异常  if (CollectionUtils.isEmpty(tagNameLists)) {  throw new BusinessException(ErrorCode.PARAMS_ERROR);  }  QueryWrapper<User> queryWrapper = new QueryWrapper<>();  // 拼接tag select * from user where tags like "xxx" and tag like "xxx"  for (String tag : tagNameLists) {  // 拼接操作  queryWrapper = queryWrapper.like("tags", tag);  }  List<User> users = userMapper.selectList(queryWrapper);  List<User> collect = users.stream().map(this::getSafetyUser).collect(Collectors.toList());  return collect;  }

具体操作:

  1. 通过前端传入数据
  2. 构造queryWrapper建立查询条件:tags like “xxx” and tag like “xxx”
  3. 拿到数据后使用stream中的map进行脱敏,返回数据

2. 内存中查询

gson依赖:

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.8.9</version>
</dependency>

具体步骤:

  1. 通过前端传入数据
  2. 查询所有用户的数据
  3. 从数据中拿到tag并且将json格式的String字符串转换为set类型String字符串
    1. String json: = "tag1,tag2,tag3" -> Set<String>: [tag1, tag2, tag3]
  4. 比较数据,如果存在保存用户,不存在去除用户(使用的是stream流进行处理)
    @Override  public List<User> searchUserByTags2(List<String> tagNameLists) {  //        如果搜索到的数据都是空的 报异常  if (CollectionUtils.isEmpty(tagNameLists)) {  throw new BusinessException(ErrorCode.PARAMS_ERROR);  }  // 1. 查询所有的用户  QueryWrapper<User> queryWrapper = new QueryWrapper<>();  List<User> userList = userMapper.selectList(queryWrapper);  
//        创建 gson:将json转换为java数据  Gson gson = new Gson();  
//        2. 判断前端的标签是否符合数据库中每一个用户存在的标签  return userList.stream().filter(user ->{  String taguser = user.getTags();  if(StringUtils.isEmpty(taguser)){  return false;  }  Type type = new TypeToken<Set<String>>() {  }.getType();  Set<String> tagSet = gson.fromJson(taguser, type);  for (String tag : tagSet) {  if(!tagSet.contains(tag)){ // 如果tagSet中不包含这个标签,直接跳过这个用户  return false;  }  }  return true; // 到这边就是可以进入下一个步骤了  }).map(this::getSafetyUser)  .collect(Collectors.toList());  }

如何测试方法运行时间

核心思想:System.currentTimeMillis()

List<String> tagList = Arrays.asList("Java", "Python");  
long start1 = System.currentTimeMillis();  
List<User> users1 = userService.searchUserByTags(tagList);  
long result1 = System.currentTimeMillis() - start1;  
long start2 = System.currentTimeMillis();  
List<User> users2 = userService.searchUserByTags2(tagList);  
long result2 = System.currentTimeMillis() - start2;  
System.out.println("使用sql查询用时:" + result1);  
System.out.println("使用内存查询用时:" + result2);  
System.out.println("测试结束");
使用sql查询用时:1156
使用内存查询用时:59
  1. 根据业务的数据量可以自由选择查询方法
  2. 同时使用两种不同的查询,谁先返回用谁

第二次直播

规划

  1. 之前标签接口再调试
  2. 前端开发
  3. 整合路由 30-50
  4. 后端api swagger + knife4j
  5. 爬虫 用户信息

接口调试10

弃用接口方法:

  1. 在方法前+ @Deprecated

  2. 将方法私有化 private (❓设置有问题)

  3. stream / parallelStream 流失处理

  4. Optional 可选类(java8 快速判断 是否为空 否则为xxx 类似ifnull)

Set<String> tagSet = gson.fromJson(taguser, type);  
tagSet = Optional.ofNullable(tagSet).orElse(new HashSet<>());

如果json解析为null,则设置为空的HashSet

前端整合路由11

  1. 整合路由

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

安装Vue route:一个html动态访问不同的组件

npm install vue-router@4

如何使用route?

配置信息:

const router = VueRouter.createRouter({  // 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。  history: VueRouter.createWebHashHistory(),  routes, // `routes: routes` 的缩写  
})  app.use(router)
const routes = [  {path: '/', component: Index},  {path: '/team', component: Team},  {path: '/profile', component: Profile},  
]  
export default routes;

页面显示跳转:

显示route的跳转页面 <div id="content">  <router-view/>  </div><!--  下面的边栏-->  <van-tabbar route @change="onChange">  <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>  <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>  <van-tabbar-item to="/profile" icon="friends-o" name="profile">个人</van-tabbar-item>  </van-tabbar>

在js中触发事件如何跳转页面?

const router = useRouter(); 创建一个实例const onClickRight = () => {  router.push('/search')   使用push到指定的页面
};

搜索页面

如何设计一个搜索页面:

去看其他客户端或者网页是怎么做的 模仿!

image.png

通过搜索 选中标签 添加到已选标签中

ref的用处:

const searchText = ref('');建了一个初始值为空字符串的响应式引用。这个引用可以在组件中进行双向绑定,并且当其值发生变化时,Vue会自动更新所有使用这个引用的地方。

用户信息页面12

创建信息实体

export type userType = {  id : number;  user : string;  userAccount : string;  avatarUrl : string;  gender : number;  phone : string;  email : string;  userStatus : string;  userRole : string;  planetCode : string;  tags : string[];  createTime : Date;  
}

image.png

创建页面

使用vant组件cell:

  <van-cell-group inset>  
<!--    设置 is-link 属性后会在单元格右侧显示箭头,并且可以通过 arrow-direction 属性控制箭头方向。-->  <van-cell title="昵称" is-link to="/user/edit" :value="user.username"/>  <van-cell title="账号"  :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()"/>  </van-cell-group>

image.png

image.png

使用route传参

创建的个人信息页面:
image.png

页面会进行跳转:to="/user/edit"

通过route传递参数到edit页面,然后进行修改回传

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

USB (5)

USB是一个poll的总线。并且数据传输是对齐到time-line的。 对于比如鼠标这样的设备&#xff0c;主机会最快125us poll一次&#xff0c;看是否有输入。这也就是interrupt transfer类型。 对于isochronous transfer类型&#xff0c;数据是在固定的时隙传输的&#xff0c;但不保证…

Python魔法之旅-魔法方法(22)

目录 一、概述 1、定义 2、作用 二、应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类型检…

怎么改图片分辨率的dpi数值?简单调整图片dpi的方法

图片分辨率的dpi是目前使用图片时比较常见的要求之一&#xff0c;在网上上传图片时比如证件照类型&#xff0c;都经常会对图片dpi数值有要求。在使用图片的时候&#xff0c;如果dpi的数值不满足用户使用&#xff0c;那么就会无法正常上传使用&#xff0c;那么修改图片api具体该…

42.vue-element-admin界面上的search字段配置

vue-element-admin界面上的search字段&#xff08;下图红色部分&#xff09;是可配置&#xff0c;使用*.vue里的search关键字进行配置。 一、配置方法 1.如果这个字段要放到search区域&#xff0c;则&#xff1a; search: {hidden: false}, 2.如果这个字段不要放到search区域…

实验七、创建小型实验拓扑《计算机网络》

早检到底是谁发明出来的。 一、实验目的 完成本实验后&#xff0c;您将能够&#xff1a; • 设计逻辑网络。 • 配置物理实验拓扑。 • 配置 LAN 逻辑拓扑。 • 验证 LAN 连通性。 二、实验任务 在本实验中&#xff0c;将要求您连接网络设备并配置主机实现基本的网络…

贪心算法-数组跳跃游戏(mid)

目录 一、问题描述 二、解题思路 1.回溯法 2.贪心算法 三、代码实现 1.回溯法实现 2.贪心算法实现 四、刷题链接 一、问题描述 二、解题思路 1.回溯法 使用递归的方式&#xff0c;找到所有可能的走步方式&#xff0c;并记录递归深度&#xff08;也就是走步次数&#x…

【AI法官】人工智能判官在线判案?

概述 AI法官是一款为用户提供专业法律分析和判决建议的智能体应用。用户只需简要描述案情&#xff0c;AI法官便会利用其强大的法律知识和逻辑推理能力&#xff0c;快速且准确地梳理出判决结果。该应用的目标是为用户提供高效、准确、合法的判决建议。 角色任务 任务描述 作为…

小程序 UI 风格魅力非凡

小程序 UI 风格魅力非凡

Oracle的优化器

sql优化第一步&#xff1a;搞懂Oracle中的SQL的执行过程 从图中我们可以看出SQL语句在Oracle中经历了以下的几个步骤&#xff1a; 语法检查&#xff1a;检查SQL拼写是否正确&#xff0c;如果不正确&#xff0c;Oracle会报语法错误。 语义检查&#xff1a;检查SQL中的访问对象…

海南聚广众达电子商务咨询有限公司打造一站式电商服务

在数字经济的浪潮中&#xff0c;电商行业蓬勃发展&#xff0c;各种平台和服务商如雨后春笋般涌现。其中&#xff0c;海南聚广众达电子商务咨询有限公司凭借其专业的团队和丰富的经验&#xff0c;在抖音电商服务领域独树一帜&#xff0c;成为业界的佼佼者。 海南聚广众达电子商…

判断对称树

leetcode - 101 - 对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false提示&a…

注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例&#xff0c;绑定生命周期回调函数、错误监听和页面不存在监听函数等。 详细的参数含义和使用请参考 App 参考文档 。 整个小程序只有一个 App 实例&#xff0c;是全部页面共享的。开发者可以通过 getApp 方法获取到全…

【递归、搜索与回溯】穷举vs暴搜vs深搜vs回溯vs剪枝

穷举vs暴搜vs深搜vs回溯vs剪枝 1.全排列2.子集 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 管他什么深搜、回溯还是剪枝&#xff0c;画出决…

【Java】解决Java报错:NoClassDefFoundError

文章目录 引言1. 错误详解2. 常见的出错场景2.1 类路径配置错误2.2 依赖库缺失2.3 类文件被删除或损坏2.4 类加载器问题 3. 解决方案3.1 检查类路径配置3.2 检查依赖库3.3 检查类文件3.4 调试类加载器问题 4. 预防措施4.1 使用构建工具管理依赖4.2 定期进行构建和测试4.3 使用I…

【Unity+AI01】在Unity中调用DeepSeek大模型!实现AI对话功能!

要在Unity中调用DeepSeek的API并实现用户输入文本后返回对话的功能&#xff0c;你需要遵循以下步骤&#xff1a; 获取API密钥&#xff1a; 首先&#xff0c;你需要从DeepSeek获取API密钥。这通常涉及到注册账户&#xff0c;并可能需要订阅相应的服务。 集成HTTP请求库&#xf…

【APP移动端自动化测试】第一节.环境配置和adb调试工具

文章目录 前言一、Java环境搭建二、AndroidSDK环境搭建三、Android模拟器安装四、adb调试工具基本介绍 4.1 adb构成和基本原理 4.2 adb获取包名&#xff0c;界面名 4.3 adb文件传输 4.4 adb获取app启动时间 4.5 adb获取手机日志 4.6 adb其他有关…

python的resample()函数

介绍 在Python中,resample()函数是一个常用的工具,用于对时间序列数据进行重新采样。这个函数可以将时间序列数据从一个频率转换为另一个频率,比如将每天的数据转换为每月的数据。在本教程中,我将向你展示如何使用resample()函数,并解释每个步骤的具体含义。 整体流程 首先…

独具魅力的 App UI 风格才能称之为优秀

独具特色的App UI 长什么样&#xff01;看这里

Java案例:找素数

文章目录 题目问题反思代码改进 题目 找素数 判断101-200之间有多少个素数&#xff0c;并输出所有素数 只需要除到 n/2 即可。 算数平方根。&#xff08;j*j<i&#xff09;实际上可以更高效地只除到Math.sqrt(n)&#xff08;或者说Math.sqrt(n) 1为了处理整数除法&#xf…

Master-Worker 架构的灰度发布难题

作者&#xff1a;石超 一、前言 Master-Worker 架构是成熟的分布式系统设计模式&#xff0c;具有集中控制、资源利用率高、容错简单等优点。我们数据中心内的几乎所有分布式系统都采用了这样的架构。 &#xfeff; 我们曾经发生过级联故障&#xff0c;造成了整个集群范围的服…