前端优化
加载匹配功能与加载骨架特效
骨架屏 : vant-skeleton
index.vue中
/** * 加载数据 */
const loadData = async () => { let userListData; loading.value = true; //心动模式 if (isMatchMode.value){ const num = 10;//推荐人数 userListData = await myAxios.get('user/match',{ params: { num, }, }) .then(function (response) { console.log('/user/match succeed',response); return response?.data; }) .catch(function (error) { console.log('/user/match error',error); showFailToast('请求失败'); }); } else { //不开启推荐模式,默认全部查询 //普通用户使用分页查询todo 并没有实现 userListData = await myAxios.get('/user/recommend',{ params: { pageSize: 8, pageNum: 1, }, }) .then(function (response) { console.log('/user/recommend succeed', response); return response?.data?.records; }) .catch(function (error) { console.log('/user/recommends error',error); showFailToast('请求失败'); }); } if (userListData){ userListData.forEach((user: userType) =>{ if (user.tags){ user.tags = JSON.parse(user.tags); } }) userList.value = userListData; } loading.value = false;
} //`watchEffect`函数用于在响应式数据发生变化时执行副作用（side effect）操作。在这个例子中，当数据发生变化时，会调用`loadData()`函数来加载数据。watchEffect(() =>{ loadData();
})
前端导航标题
router :控制路由跳转
route: 获取路由信息
解决：使用 router.beforeEach，根据要跳转页面的 url 路径 匹配 config/routes 配置的 title 字段
//标题
const DEFAULT_TITLE='柚见'
const title=ref(DEFAULT_TITLE);
/** * 根据路由切换标题 */
router.beforeEach((to,from)=>{ const toPath=to.path; const route=routes.find((r)=>{ return toPath==r.path; }) title.value=route.title ?? DEFAULT_TITLE; })
重定向到登录页
根据后端返回的未登录的错误码,重定向
全局响应拦截器中修改
发现页面一直不能正常跳转
切换hash模式
不同的历史模式 | Vue Router (vuejs.org)
登录成功后自动跳转回之前页面
添加创建队伍按钮
添加样式
引入样式
换成vant库中的+
<!-- 创建队伍按钮--> <van-button type="primary" @click="doJoinTeam" class="add-button" icon="plus"> </van-button>
队伍操作按钮权限控制
更新队伍：仅创建人可见
v-if="team.userId === currentUser?.id"
解散队伍：仅创建人可见
v-if="team.userId === currentUser?.id"
加入队伍： 仅非队伍创建人、且未加入队伍的人可见
退出队伍：创建人不可见，仅已加入队伍的人可见
后端修改
仅加入队伍和创建队伍的人能看到队伍操作按钮（listTeam 接口要能获取我加入的队伍状态） ✔
方案 1：前端查询我加入了哪些队伍列表，然后判断每个队伍 id 是否在列表中（前端要多发一次请求）
方案 2：在后端去做上述事情（推荐）
加密队伍与公开队伍的展示
前端修改
Tab 标签页 - Vant 4 (gitee.io)
<van-tabs v-model:active="activeName"> <van-tab title="公开队伍" name="public"></van-tab> <van-tab title="加密队伍" name="secret"></van-tab>
</van-tabs>
const onTabChange=(name)=>{ if(name==='public') { //查询公开队伍 listTeam() }else if(name === 'secret'){ //查询加密队伍 listTeam(' ',2); } console.log(name) }
//只有管理员和本人才能查看非私有的房间
if (!isManager && !statusEnum.equals(TeamStatusEnum.PUBLIC) && !statusEnum.equals(TeamStatusEnum.SECRET)) {
throw new BusinessException(ErrorCode.NO_AUTH);
}
点击加入加密队伍后,弹窗密码跳出
<script setup lang="ts">
import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/team.ts";
import myAxios from "../plungins/myAxios.js";
import {showFailToast, showSuccessToast} from "vant";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
import {useRouter} from "vue-router"; const router=useRouter();
const password=ref('');
//加入该队伍的id
const joinId=ref(0)
const showPwd=ref(false)
interface TeamCardListProps{ teamList: TeamType[];
} const props= withDefaults(defineProps<TeamCardListProps>(),{ //@ts-ignore teamList: [] as TeamType[]
}); //获得当前用户
const currentUser=ref()
onMounted(async ()=>{ const res=await getCurrentUser() currentUser.value=res
}) //加入队伍之前---------------------------------------------------------------------
const preJoinTeam=(team : TeamType)=>{ joinId.value=team.id; if(team.status === 2) { //打开加密弹窗 showPwd.value=true; } else if(team.status === 0) { doJoinTeam(); }
}
const doJoinCancel = () => { joinId.value = 0; password.value = '';
}
//点击公开队伍,加入队伍------------------------------------------------------------
const doJoinTeam=async()=>{ if(!joinId.value) { return ; } const res=await myAxios.post('/team/join',{ teamId:joinId.value, password:password.value }) if(res?.code===0){ showSuccessToast("加入成功") doJoinCancel(); }else{ showFailToast("加入失败\n"+(res.description ? `${res.description}`: '')) }
}
//跳转到更新页---------------------------------------------------------------------
const doUpdateTeam=({id}: { id: any })=>{ router.push({ path:'/team/update', query:{ id } })
}
//点击退出队伍-------------------------------------------------------------------
const doQuitTeam=async (id)=>{ const res=await myAxios.post('/team/quit',{ teamId:id }) if(res?.code===0){ showSuccessToast("操作成功") }else{ showFailToast("操作失败\n"+(res.description ? `${res.description}`: '')) } }
//点击解散队伍-------------------------------------------------------------------------
const doDeleteTeam=async ({id}: { id: any })=>{ const res=await myAxios.post('/team/delete',{ id }) if(res?.code===0){ showSuccessToast("操作成功") }else{ showFailToast("操作失败\n"+(res.description ? `${res.description}`: '')) }
} </script>
已加入队伍人数
<div> {{ `已加入人数 : ${team.hasJoinNum} / ` + team.maxNum }}
</div>
后端优化
队伍按钮权限控制
@GetMapping("/list")
public BaseResponse<List<TeamUserVO>> listTeams(TeamQuery teamQuery,HttpServletRequest request) { if (teamQuery == null) {
throw new BusinessException(ErrorCode.PARAMS_ERROR);
}
boolean isManager = userService.isManager(request);
User loginUser = userService.getLoginUser(request); // 1、查询队伍列表
List<TeamUserVO> teamList = teamService.listTeams(teamQuery, isManager);
final List<Integer> teamIdList = teamList.stream().map(TeamUserVO::getId).collect(Collectors.toList());
// 2、判断当前用户是否已加入队伍
QueryWrapper<UserTeam> userTeamQueryWrapper = new QueryWrapper<>();
try {
userTeamQueryWrapper.eq("userId", loginUser.getId());
userTeamQueryWrapper.in("teamId", teamIdList);
List<UserTeam> userTeamList = userTeamService.list(userTeamQueryWrapper);
// 已加入的队伍 id 集合
Set<Integer> hasJoinTeamIdSet = userTeamList.stream().map(UserTeam::getTeamId).collect(Collectors.toSet());
teamList.forEach(team -> {
boolean hasJoin = hasJoinTeamIdSet.contains(team.getId());
team.setHasJoin(hasJoin);
});
} catch (Exception e) {} return ResultUtils.success(teamList);
}
查询已加入队伍的人数
//3.查询已加入队伍数
QueryWrapper<UserTeam> userTeamQueryWrapper2 = new QueryWrapper<>();
userTeamQueryWrapper.in("teamId", teamIdList);
List<UserTeam> userTeamList2 = userTeamService.list(userTeamQueryWrapper2); //队伍id => userId集合
Map<Integer, List<UserTeam>> teamIdUserTeamList = userTeamList2.stream().collect(Collectors.groupingBy(UserTeam::getTeamId));
teamList.forEach(team ->
team.setHasJoinNum(teamIdUserTeamList.getOrDefault(team.getId(), new ArrayList<>()).size())
);
多次快速点击加入队伍,重复加入队伍
只要我们点的足够快，就可以在同一时间内往数据库插入多条同样的数据，所以这里我们使用分布式锁（推荐）使用两把锁，一把锁锁队伍，一把锁锁用户（实现较难，不推荐）
之前的代码
//该用户已加入的队伍数量不能超过5个
int userId = loginUser.getId();
// 只有一个线程能获取到锁
RLock lock = redissonClient.getLock("youjian:join_team"); QueryWrapper<UserTeam> userTeamQueryWrapper = new QueryWrapper<>();
userTeamQueryWrapper.eq("userId",userId);
int hasJoinNum = (int) userTeamService.count(userTeamQueryWrapper);
if (hasJoinNum >= 5){
throw new BusinessException(ErrorCode.PARAMS_ERROR,"最多创建和加入5个队伍");
} //不能重复加入已加入的队伍
userTeamQueryWrapper = new QueryWrapper<>();
userTeamQueryWrapper.eq("userId",userId);
userTeamQueryWrapper.eq("teamId",teamId);
int hasUserJoinTeam = (int) userTeamService.count(userTeamQueryWrapper);
if (hasUserJoinTeam > 0){
throw new BusinessException(ErrorCode.PARAMS_ERROR,"用户已加入该队伍");
}
//不能加入已满队伍
userTeamQueryWrapper = new QueryWrapper<>();
userTeamQueryWrapper.eq("teamId",teamId);
int teamHasJoinNum = (int) userTeamService.count(userTeamQueryWrapper);
if (teamHasJoinNum >= team.getMaxNum()){
throw new BusinessException(ErrorCode.PARAMS_ERROR,"队伍已满");
} //3.加入，修改队伍信息
UserTeam userTeam = new UserTeam();
userTeam.setUserId(userId);
userTeam.setTeamId(teamId);
userTeam.setJoinTime(new Date());
return userTeamService.save(userTeam);
修改后
@Resource
private RedissonClient redissonClient;
