面向校招/社招,开源社区系统 Echo,基于目前主流 Java Web 技术栈,并提供详细的开发文档和配套教程

2021-02-12 20:47:25 +08:00
 smallbeef1998

博主目前东南大学研究生在读,近一个月开发了一款社区系统,为接下来的校招做准备,同时开源出来和各位小伙伴一起交流学习。项目仍然存在很多不完善的地方,大家多多指教~

💻 核心技术栈

后端:

前端:

🎀 界面展示

首页:

登录页:

帖子详情页:

个人主页:

朋友私信页:

私信详情页:

系统通知页:

通知详情页:

账号设置页:

数据统计页:

搜索详情页:

🎨 功能列表

🔐 待实现及优化

以下是我个人发现的本项目存在的问题,但是暂时没有头绪无法解决,集思广益,欢迎各位小伙伴提 PR 解决:

以下是我觉得本项目还可以添加的功能,同样欢迎各位小伙伴提 issue 指出还可以增加哪些功能,或者直接提 PR 实现该功能:

🌱 本地运行

各位如果需要将项目部署在本地进行测试,以下环境请提前备好:

然后修改配置文件中的信息为你自己的本地环境,直接运行是运行不了的,而且相关私密信息我全部用 xxxxxxx 代替了。

本地运行需要修改的配置文件信息如下:

1 )application-develop.properties

2 )logback-spring-develop.xml

每次运行需要打开:

另外,还需要事件建好数据库表,详细见下文。

📜 数据库设计

用户 user

DROP TABLE IF EXISTS `user`;
SET character_set_client = utf8mb4 ;
CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  `salt` varchar(50) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `type` int(11) DEFAULT NULL COMMENT '0-普通用户; 1-超级管理员; 2-版主;',
  `status` int(11) DEFAULT NULL COMMENT '0-未激活; 1-已激活;',
  `activation_code` varchar(100) DEFAULT NULL,
  `header_url` varchar(200) DEFAULT NULL,
  `create_time` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `index_username` (`username`(20)),
  KEY `index_email` (`email`(20))
) ENGINE=InnoDB AUTO_INCREMENT=101 DEFAULT CHARSET=utf8;

讨论帖 discuss_post

DROP TABLE IF EXISTS `discuss_post`;
SET character_set_client = utf8mb4 ;
CREATE TABLE `discuss_post` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `title` varchar(100) DEFAULT NULL,
  `content` text,
  `type` int(11) DEFAULT NULL COMMENT '0-普通; 1-置顶;',
  `status` int(11) DEFAULT NULL COMMENT '0-正常; 1-精华; 2-拉黑;',
  `create_time` timestamp NULL DEFAULT NULL,
  `comment_count` int(11) DEFAULT NULL,
  `score` double DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `index_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

评论(回复)comment

CREATE TABLE `comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `entity_type` int(11) DEFAULT NULL COMMENT '评论目标的类别:1 帖子; 2 评论 ',
  `entity_id` int(11) DEFAULT NULL COMMENT '评论目标的 id',
  `target_id` int(11) DEFAULT NULL COMMENT '指明对谁进行评论',
  `content` text,
  `status` int(11) DEFAULT NULL COMMENT '状态:0 正常; 1 禁用',
  `create_time` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `index_user_id` (`user_id`),
  KEY `index_entity_id` (`entity_id`)
) ENGINE=InnoDB AUTO_INCREMENT=247 DEFAULT CHARSET=utf8;

私信 message

DROP TABLE IF EXISTS `message`;
SET character_set_client = utf8mb4 ;
CREATE TABLE `message` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `from_id` int(11) DEFAULT NULL,
  `to_id` int(11) DEFAULT NULL,
  `conversation_id` varchar(45) NOT NULL,
  `content` text,
  `status` int(11) DEFAULT NULL COMMENT '0-未读;1-已读;2-删除;',
  `create_time` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `index_from_id` (`from_id`),
  KEY `index_to_id` (`to_id`),
  KEY `index_conversation_id` (`conversation_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

🌌 理想的部署架构

我每个都只部署了一台,以下是理想的部署架构:

🎯 功能逻辑图

画了一些不是那么严谨的图帮助各位小伙伴理清思绪。

单向绿色箭头:

  • 前端模板 -> Controller:表示这个前端模板中有一个超链接是由这个 Controller 处理的
  • Controller -> 前端模板:表示这个 Controller 会像该前端模板传递数据或者跳转

双向绿色箭头:表示 Controller 和前端模板之间进行参数的相互传递或使用

单向蓝色箭头:A -> B,表示 A 方法调用了 B 方法

单向红色箭头:数据库或缓存操作

注册

  • 用户注册成功,将用户信息存入 MySQL,但此时该用户状态为未激活
  • 向用户发送激活邮件,用户点击链接则激活账号( Spring Mail )

登录 | 登出

  • 进入登录界面,动态生成验证码,并将验证码短暂存入 Redis ( 60 秒)

  • 用户登录成功(验证用户名、密码、验证码),生成登录凭证且设置状态为有效,并将登录凭证存入 Redis

    注意:登录凭证存在有效期,在所有的请求执行之前,都会检查凭证是否有效和是否过期,只要该用户的凭证有效并在有效期时间内,本次请求就会一直持有该用户信息(使用 ThreadLocal 持有用户信息)

  • 勾选记住我,则延长登录凭证有效时间

  • 用户登录成功,将用户信息短暂存入 Redis ( 1 小时)

  • 用户登出,将凭证状态设为无效,并更新 Redis 中该用户的登录凭证信息

下图是登录模块的功能逻辑图,并没有使用 Spring Security 提供的认证逻辑(我觉得这个模块是最复杂的,这张图其实很多细节还没有画全)

分页显示所有的帖子

  • 支持按照 “发帖时间” 显示
  • 支持按照 “热度排行” 显示( Spring Quartz )
  • 将热帖列表和所有帖子的总数存入本地缓存 Caffeine (利用分布式定时任务 Spring Quartz 每隔一段时间就刷新计算帖子的热度 /分数 — 见下文,而 Caffeine 里的数据更新不用我们操心,它天生就会自动的更新它拥有的数据,给它一个初始化方法就完事儿)

账号设置

  • 修改头像(异步请求)
    • 将用户选择的头像图片文件上传至七牛云服务器
  • 修改密码

此处只画出修改头像:

发布帖子(异步请求)

显示评论及相关信息

评论部分前端的名称显示有些缺陷,有兴趣的小伙伴欢迎提 PR 解决~

关于评论模块需要注意的就是评论表的设计,把握其中字段的含义,才能透彻了解这个功能的逻辑。

评论 Comment 的目标类型(帖子,评论) entityType 和 entityId 以及对哪个用户进行评论 /回复 targetId 是由前端传递给 DiscussPostController 的

一个帖子的详情页需要封装的信息大概如下:

添加评论(事务管理)

私信列表和详情页

发送私信(异步请求)

点赞(异步请求)

将点赞相关信息存入 Redis 的数据结构 set 中。其中,key 命名为 like:entity:entityType:entityId,value 即点赞用户的 id 。比如 key = like:entity:2:246 value = 11 表示用户 11 对实体类型 2 即评论进行了点赞,该评论的 id 是 246

某个用户的获赞数量对应的存储在 Redis 中的 key 是 like:user:userId,value 就是这个用户的获赞数量

我的获赞数量

关注(异步请求)

  • 若 A 关注了 B,则 A 是 B 的粉丝 Follower,B 是 A 的目标 Followee
  • 关注的目标可以是用户、帖子、题目等,在实现时将这些目标抽象为实体(目前只做了关注用户)

将某个用户关注的实体相关信息存储在 Redis 的数据结构 zset 中:key 是 followee:userId:entityType ,对应的 value 是 zset(entityId, now) ,以关注的时间进行排序。比如说 followee:111:3 对应的 value (20, 2020-02-03-xxxx),表明用户 111 关注了实体类型为 3 即人(用户),该帖子的 id 是 20,关注该帖子的时间是 2020-02-03-xxxx

同样的,将某个实体拥有的粉丝相关信息也存储在 Redis 的数据结构 zset 中:key 是 follower:entityType:entityId,对应的 value 是 zset(userId, now),以关注的时间进行排序

关注列表

发送系统通知

显示系统通知

搜索

类似的,置顶、加精也会触发发帖事件,就不再图里面画出来了。

置顶加精删除(异步请求)

网站数据统计

帖子热度计算

每次发生点赞(给帖子点赞)、评论(给帖子评论)、加精的时候,就将这些帖子信息存入缓存 Redis 中,然后通过分布式的定时任务 Spring Quartz,每隔一段时间就从缓存中取出这些帖子进行计算分数。

帖子分数 /热度计算公式:分数(热度) = 权重 + 发帖距离天数

// 计算权重
double w = (wonderful ? 75 : 0) + commentCount * 10 + likeCount * 2;
// 分数 = 权重 + 发帖距离天数
double score = Math.log10(Math.max(w, 1))
        + (post.getCreateTime().getTime() - epoch.getTime()) / (1000 * 3600 * 24);

📖 配套教程

想要自己从零开始实现这个项目或者深入理解的小伙伴,可以扫描下方二维码关注公众号『飞天小牛肉』,第一时间获取配套教程, 不仅会详细解释本项目涉及的各大技术点,还会汇总相关的常见面试题,目前尚在更新中。

并推荐我的开源教程类项目 『 CS-Wiki 』,Gitee 推荐项目,目前已 0.9k star: 致力打造完善的 Java 后端知识体系,不仅仅帮助各位小伙伴快速且系统的准备面试(秋招 /社招),更指引学习的方向

📞 联系我

有什么问题也可以添加我的微信,记得备注来意:格式 <u>(学校或公司 - 姓名或昵称 - 来意)</u>

👏 鸣谢

本项目参考牛客网 — Java 高级工程师课程,感谢老师和平台

3531 次点击
所在节点    分享创造
47 条回复
smallbeef1998
2021-02-13 09:26:22 +08:00
@Cbdy 大佬,怎么说😄
smallbeef1998
2021-02-13 11:36:21 +08:00
为什么大家都在收藏却不愿意给个 star😂
wbd31
2021-02-13 12:25:03 +08:00
项目的 kafka 是用在了什么地方
smallbeef1998
2021-02-13 12:42:25 +08:00
@wbd31 关注、点赞、评论的系统通知,以及相应的触发 Elasticsearch 数据的更新。可以看看逻辑图😀
anrgct
2021-02-13 14:51:34 +08:00
冲这么多字支持一下😬
smallbeef1998
2021-02-13 15:02:12 +08:00
@anrgct 🥳
Austin2035
2021-02-13 17:23:59 +08:00
这种项目适合学习与教学,能说明轮子玩的够熟。
Austin2035
2021-02-13 17:31:35 +08:00
我的建议是:
1. console 提的报错与警告修改一下
```JavaScript
Uncaught SyntaxError: Unexpected token 'export'
DevTools failed to load SourceMap: Could not load content for http://1.15.127.74/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
```
2.如果有余力,可以把网站修改为,首屏 SSR,其余的使用 restful API.
好处在于,1. 增加了前后端分离的模式 2.提升了用户体验 3.减轻了服务器后端的压力(尤其高并发场景,能节约带宽与算力)
smallbeef1998
2021-02-13 17:38:50 +08:00
@lookcos 感谢大佬建议啊😄 不过对我这样的初学者来说,前后端不分离相对来说比较友好,强行前后端分离容易把我搞懵
lasfresas
2021-02-13 17:47:40 +08:00
感觉做的挺好
smallbeef1998
2021-02-13 17:58:27 +08:00
@lasfresas 感谢😁
wolfan
2021-02-13 18:36:05 +08:00
移动端适配不成。
chenlee9876
2021-02-14 02:19:38 +08:00
老哥你直接把 IP 暴露出来真的大丈夫嘛?不考虑整个域名之类的嘛?
smallbeef1998
2021-02-14 08:35:15 +08:00
@chenlee9876 不考虑😂 练手项目 没必要吧
tousfun
2021-02-14 08:59:48 +08:00
up 研一已经学了这么多东西了吗 本科也是 cs ?
smallbeef1998
2021-02-14 09:05:53 +08:00
@919615766 对的
Adaocean
2021-02-14 14:24:12 +08:00
@smallbeef1998 前辈的作品完整度也太高了。
smallbeef1998
2021-02-14 14:27:03 +08:00
@Adaocean 哈哈哈哈 不然怎么在疯狂的内卷里活下来
smallbeef1998
2021-02-14 14:29:00 +08:00
@wolfan 是这样的 我一个人精力实在有限 开源出来也是期待诸位大佬们帮助完善 让我跟在后面学习学习😀
Adaocean
2021-02-14 15:24:32 +08:00
@smallbeef1998 很棒 赞赞赞

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/753088

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX