伙伴匹配系统(移动端 H5 网站（APP 风格）基于Spring Boot 后端 + Vue3 - 06

伙伴匹配系统(移动端 H5 网站（APP 风格）基于Spring Boot 后端 + Vue3 - 06

项目地址：

• Github：github.com/China-Rainb...
• Gitee：gitee.com/Rainbow--Se...

@toc

上线部署：

先区分多环境：前端区分开发和线上接口，后端 prod 改为用户线上公网可访问的数据库。

免备案快速上线方案：

• 前端： Vercerl(免费国外的慢了一些)：vercel.com/

前端打包方式：

我们可以，忽略 Vite 的规范提示，直接打包

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

这里使用 Vercerl 需要安装如下 serve 工具：执行如下命令：

npm i -g serve

安装好之后，就可以使用该 vercel 了

vercel --prod

• **后端：**微信云托管(部署容器的平台，付费)：cloud.weixin.qq.com/cloudrun

快速启动项目

快速本地启动前端

1. 安装 node >= 16
2. 在项目的控制台输入如下命令

npm install --force

快速本地启动后端

1. 导入项目：JDK 1.8
2. 配置 本地 Maven ，使用 Maven 加载依赖
3. 需要安装：MySQL5/8，Redis
4. MySQL 创建如下数据表：

create table tag
(
    id           bigint auto_increment comment 'id'
        primary key,
    tagName      varchar(256)                       null comment '标签名称',
    userId       bigint                             null comment '用户id',
    parenId      bigint                             null comment '父标签 id',
    isParent     tinyint                            null comment '0 - 不是, 1- 父标签',
    createTime   datetime default CURRENT_TIMESTAMP null comment '创建时间',
    updateTime   datetime default CURRENT_TIMESTAMP null comment '更新时间',
    isDelete     tinyint  default 0                 not null comment '是否删除 0 1（逻辑删除）'
)
    comment '标签';


--   为 user 表，添加上一个新的 tags 字段
alter table user add column tags varchar(1024) null comment '标签列表';



# 数据库初始化
# @author <a href="https://github.com/China-Rainbow-sea">
create
database if not exists yupao;

use
yupao;

-- 用户表
create table user
(
    username     varchar(256) null comment '用户昵称',
    id           bigint auto_increment comment 'id'
        primary key,
    userAccount  varchar(256) null comment '账号',
    avatarUrl    varchar(1024) null comment '用户头像',
    gender       tinyint null comment '性别',
    userPassword varchar(512)       not null comment '密码',
    phone        varchar(128) null comment '电话',
    email        varchar(512) null comment '邮箱',
    userStatus   int      default 0 not null comment '状态 0 - 正常',
    createTime   datetime default CURRENT_TIMESTAMP null comment '创建时间',
    updateTime   datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
    isDelete     tinyint  default 0 not null comment '是否删除',
    userRole     int      default 0 not null comment '用户角色 0 - 普通用户 1 - 管理员',
    planetCode   varchar(512) null comment '星球编号',
    tags         varchar(1024) null comment '标签 json 列表'
) comment '用户';

-- 队伍表
create table team
(
    id          bigint auto_increment comment 'id' primary key,
    name        varchar(256)       not null comment '队伍名称',
    description varchar(1024) null comment '描述',
    maxNum      int      default 1 not null comment '最大人数',
    expireTime  datetime null comment '过期时间',
    userId      bigint comment '用户id（队长 id）',
    status      int      default 0 not null comment '0 - 公开，1 - 私有，2 - 加密',
    password    varchar(512) null comment '密码',
    createTime  datetime default CURRENT_TIMESTAMP null comment '创建时间',
    updateTime  datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
    isDelete    tinyint  default 0 not null comment '是否删除'
) comment '队伍';

-- 用户队伍关系
create table user_team
(
    id         bigint auto_increment comment 'id'
        primary key,
    userId     bigint comment '用户id',
    teamId     bigint comment '队伍id',
    joinTime   datetime null comment '加入时间',
    createTime datetime default CURRENT_TIMESTAMP null comment '创建时间',
    updateTime datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
    isDelete   tinyint  default 0 not null comment '是否删除'
) comment '用户队伍关系';


-- 标签表（可以不创建，因为标签字段已经放到了用户表中）
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)
) comment '标签';

# https://t.zsxq.com/0emozsIJh

create index idx_userId
    on tag (userId);

5. 修改 resources 目录下的 application.yaml的配置文件，主要是修改其中的：MySQL，以及 Redis 的配置

5. 后端处理访问的地址路径的修改：为你自己的

@CrossOrigin(origins = {"http://localhost:5173","http://localhost:3000"})  // 配置前端访问路径的放行,可以配置多个

6. 后端跨域问题处理配置，你自己想要放行的路径地址：在 yupao-backend/src/main/java/com/rainbowsea/yupao/config/WebMvcConfg.java 目录下

7. 该项目的 Swagger 接口文档地址：http://localhost:8080/api/doc.html

补充

坑点：

拷贝，复制，工具类

技巧：

当如果我们想要，让每个包装类，映射到前端的时候，都有一个分页属性的话，我们可以编写一个，通用的分页类，让其它需要给分页类的，实体类，继承该分页类即可。

package com.rainbowsea.yupao.common;


import lombok.Data;

import java.io.Serializable;

/**
 * 通用分页请求参数
 */
@Data
public class PageRequest implements Serializable {

    private static final long serialVersionUID = 9075699384270981491L;

    /**
     * 页面大小
     */
    protected int pageSize = 10;

    /**
     * 当前是第几页
     */
    protected int pageNum = 1;
}

@Data
@EqualsAndHashCode(callSuper = true) //  告诉lombok在生成的 equals()​ 方法中调用 super.equals()​，并在生成的 hashCode()​ 方法中包含 super
// .hashCode
// ()​ 的结果。
public class TeamQuery extends PageRequest {
    /**
     * id
     */
    private Long id;

    /**
     * id 列表
     */
    private List<Long> idList;

}

import java.util.Optional;
  // status 是否公开(int) 不传默认 0(公开)
        int status = Optional.ofNullable(team.getStatus()).orElse(0);

技巧：

跨域

注意点：

---

npm i --save-dev @types/node

问题：Uncaught ReferenceError: Cannot access 'xxx' before initialization问题

• blog.csdn.net/cjy030209/a...

---

优化点：

1. 加入不同的队伍，抢的不是同一个资源，就不需要，抢锁了。可以将锁的范围缩小一些。

用户和队伍 Id，都要锁一下。

• 同一个用户，同时刻只允许你加入一个队伍，一个用户不可以一次性加入 10 个队伍。
• sysnchronized 是(加在对象上的)，String.valueOf(id).intern 表示根据 Id 是，每次生成的是同一个对象的地址，不会新 new 一个 String 对象，新 new 就是不同的对象，不同的锁了。
• 可以试试，将锁的范围设计的更加小一些，比如试试使用段锁。

2. 分享队伍------，可以新开一个链接，（其中页面上是一个二维码）
3. 内容多的时候，分页显示
4. 根据标签页查询的时候，太慢了，也可以试试添加上加载骨架进行一个优化。以及优化查询速度，太慢了。
5. 添加注册功能和对应登录功能

6. 优化前端性别选择，而不是输入数字 1，0
7. 增加退出功能
8. 切换搜索模式（搜索用户、搜索标签）
9. 用户可以上传用户头像 ，队伍头像。

最后：

"在这个最后的篇章中，我要表达我对每一位读者的感激之情。你们的关注和回复是我创作的动力源泉，我从你们身上吸取了无尽的灵感与勇气。我会将你们的鼓励留在心底，继续在其他的领域奋斗。感谢你们，我们总会在某个时刻再次相遇。"