登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›伙伴匹配系统(移动端 H5 网站（APP 风格）基于Spring Bo ...

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

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

1.gif

项目地址：

  • Github：https://github.com/China-Rainbow-sea/yupao
  • Gitee：https://gitee.com/Rainbow--Sea/yupao
@
目录

  • 伙伴匹配系统(移动端 H5 网站（APP 风格）基于Spring Boot 后端 + Vue3 - 06
  • 上线部署：
  • 免备案快速上线方案：
  • 快速启动项目

    • 快速本地启动前端
    • 快速本地启动后端

  • 补充
  • 优化点：
  • 最后：

上线部署：

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


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

前端打包方式：
3.png

我们可以，忽略 Vite 的规范提示，直接打包
4.png
  1.   "scripts": {
  2.     "dev": "vite",
  3.     "build": "vite build",
  4.     "preview": "vite preview"
  5.   },
复制代码
5.png

6.png

这里使用 Vercerl 需要安装如下 serve 工具：执行如下命令：
  1. npm i -g serve
复制代码
安装好之后，就可以使用该 vercel 了
  1. vercel --prod
复制代码
7.png

8.png


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

快速启动项目

快速本地启动前端


  • 安装 node >= 16
  • 在项目的控制台输入如下命令
  1. npm install --force
复制代码
10.png

11.png

12.png

13.png

14.png

15.png

快速本地启动后端


  • 导入项目：JDK 1.8
  • 配置 本地 Maven ，使用 Maven 加载依赖
  • 需要安装：MySQL5/8，Redis
  • MySQL 创建如下数据表：
  1. create table tag
  2. (
  3.     id           bigint auto_increment comment 'id'
  4.         primary key,
  5.     tagName      varchar(256)                       null comment '标签名称',
  6.     userId       bigint                             null comment '用户id',
  7.     parenId      bigint                             null comment '父标签 id',
  8.     isParent     tinyint                            null comment '0 - 不是, 1- 父标签',
  9.     createTime   datetime default CURRENT_TIMESTAMP null comment '创建时间',
  10.     updateTime   datetime default CURRENT_TIMESTAMP null comment '更新时间',
  11.     isDelete     tinyint  default 0                 not null comment '是否删除 0 1（逻辑删除）'
  12. )
  13.     comment '标签';
  16. --   为 user 表，添加上一个新的 tags 字段
  17. alter table user add column tags varchar(1024) null comment '标签列表';
  21. # 数据库初始化
  22. # @author
  23. create
  24. database if not exists yupao;
  26. use
  27. yupao;
  29. -- 用户表
  30. create table user
  31. (
  32.     username     varchar(256) null comment '用户昵称',
  33.     id           bigint auto_increment comment 'id'
  34.         primary key,
  35.     userAccount  varchar(256) null comment '账号',
  36.     avatarUrl    varchar(1024) null comment '用户头像',
  37.     gender       tinyint null comment '性别',
  38.     userPassword varchar(512)       not null comment '密码',
  39.     phone        varchar(128) null comment '电话',
  40.     email        varchar(512) null comment '邮箱',
  41.     userStatus   int      default 0 not null comment '状态 0 - 正常',
  42.     createTime   datetime default CURRENT_TIMESTAMP null comment '创建时间',
  43.     updateTime   datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
  44.     isDelete     tinyint  default 0 not null comment '是否删除',
  45.     userRole     int      default 0 not null comment '用户角色 0 - 普通用户 1 - 管理员',
  46.     planetCode   varchar(512) null comment '星球编号',
  47.     tags         varchar(1024) null comment '标签 json 列表'
  48. ) comment '用户';
  50. -- 队伍表
  51. create table team
  52. (
  53.     id          bigint auto_increment comment 'id' primary key,
  54.     name        varchar(256)       not null comment '队伍名称',
  55.     description varchar(1024) null comment '描述',
  56.     maxNum      int      default 1 not null comment '最大人数',
  57.     expireTime  datetime null comment '过期时间',
  58.     userId      bigint comment '用户id（队长 id）',
  59.     status      int      default 0 not null comment '0 - 公开，1 - 私有，2 - 加密',
  60.     password    varchar(512) null comment '密码',
  61.     createTime  datetime default CURRENT_TIMESTAMP null comment '创建时间',
  62.     updateTime  datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
  63.     isDelete    tinyint  default 0 not null comment '是否删除'
  64. ) comment '队伍';
  66. -- 用户队伍关系
  67. create table user_team
  68. (
  69.     id         bigint auto_increment comment 'id'
  70.         primary key,
  71.     userId     bigint comment '用户id',
  72.     teamId     bigint comment '队伍id',
  73.     joinTime   datetime null comment '加入时间',
  74.     createTime datetime default CURRENT_TIMESTAMP null comment '创建时间',
  75.     updateTime datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
  76.     isDelete   tinyint  default 0 not null comment '是否删除'
  77. ) comment '用户队伍关系';
  80. -- 标签表（可以不创建，因为标签字段已经放到了用户表中）
  81. create table tag
  82. (
  83.     id         bigint auto_increment comment 'id'
  84.         primary key,
  85.     tagName    varchar(256) null comment '标签名称',
  86.     userId     bigint null comment '用户 id',
  87.     parentId   bigint null comment '父标签 id',
  88.     isParent   tinyint null comment '0 - 不是, 1 - 父标签',
  89.     createTime datetime default CURRENT_TIMESTAMP null comment '创建时间',
  90.     updateTime datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP,
  91.     isDelete   tinyint  default 0 not null comment '是否删除',
  92.     constraint uniIdx_tagName
  93.         unique (tagName)
  94. ) comment '标签';
  96. # https://t.zsxq.com/0emozsIJh
  98. create index idx_userId
  99.     on tag (userId);
复制代码

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


  • 后端处理访问的地址路径的修改：为你自己的
17.png
  1. @CrossOrigin(origins = {"http://localhost:5173","http://localhost:3000"})  // 配置前端访问路径的放行,可以配置多个
复制代码

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


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

19.png

20.png

坑点：
21.png

拷贝，复制，工具类
22.png

技巧：
当如果我们想要，让每个包装类，映射到前端的时候，都有一个分页属性的话，我们可以编写一个，通用的分页类，让其它需要给分页类的，实体类，继承该分页类即可。
23.png
  1. package com.rainbowsea.yupao.common;
  4. import lombok.Data;
  6. import java.io.Serializable;
  8. /**
  9. * 通用分页请求参数
  10. */
  11. @Data
  12. public class PageRequest implements Serializable {
  14.     private static final long serialVersionUID = 9075699384270981491L;
  16.     /**
  17.      * 页面大小
  18.      */
  19.     protected int pageSize = 10;
  21.     /**
  22.      * 当前是第几页
  23.      */
  24.     protected int pageNum = 1;
  25. }
复制代码
24.png
  1. @Data
  2. @EqualsAndHashCode(callSuper = true) //  告诉lombok在生成的 equals()​ 方法中调用 super.equals()​，并在生成的 hashCode()​ 方法中包含 super
  3. // .hashCode
  4. // ()​ 的结果。
  5. public class TeamQuery extends PageRequest {
  6.     /**
  7.      * id
  8.      */
  9.     private Long id;
  11.     /**
  12.      * id 列表
  13.      */
  14.     private List<Long> idList;
  16. }
复制代码
25.png
  1. import java.util.Optional;
  2.   // status 是否公开(int) 不传默认 0(公开)
  3.         int status = Optional.ofNullable(team.getStatus()).orElse(0);
复制代码
技巧：
26.png

跨域
27.png

注意点：
28.png

29.png

30.png
  1. npm i --save-dev @types/node
复制代码
问题：Uncaught ReferenceError: Cannot access ‘xxx‘ before initialization问题

  • https://blog.csdn.net/cjy030209/article/details/133504889
优化点：


  • 加入不同的队伍，抢的不是同一个资源，就不需要，抢锁了。可以将锁的范围缩小一些。
用户和队伍 Id，都要锁一下。

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

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


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

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


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
史穹逊
6 天前

0

粉丝关注

15

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫