2022年4月12日
【介绍本作品的创意来源，产生背景，作品的主要功能，成果的应用目标等。】
创意来源：
米游社, NGA, 网易大神，百度贴吧等社区类交流app
产生背景:
在日常生活中, 有使用过米游社, NGA, 网易大神，百度贴吧等社区论坛类交流app, 在这类软件中, 不仅可以进行发帖讨论, 也可以实现与好友的私信交流。故想要开发一个类似的平台，用户可以去发现或寻找有相同兴趣爱好的人，也发布困扰自己的问题去寻求帮助。
主要功能：
-
在社区板块下发布帖子，浏览帖子，查看帖子详情及其评论区，在帖子下发表评论。
-
在好友板块下，浏览已经添加的好友，查找自己的好友，点击对应好友进入一对一私聊页面。
-
在消息板块下，实时更新用户个人收到的各类新消息新通知，包括好友申请，新私信，新评论等。
-
在个人空间板块下，展示用户个人基本信息，包括ID，昵称，头像，基本信息可以修改；好友添加功能。
应用目标：
成为各类圈子（如校园圈， 文学爱好圈， 编程圈， 游戏圈等）进行交流交友的平台，为想要寻求志同道合的人提供一个独立温馨的线上社区，论坛。
{width="6.258333333333334in" height="3.425in"}
图1系统功能框架图
【对系统功能分层逐一详细说明。注意此处给出的是从用户角度看到的功能。】
用户管理：在app启动界面，进行新用户注册与老用户登录，每个用户都会被分配一个id。若是在该机上曾经登录过某个用户账号，系统则会以该用户账号进行自动登入。登入成功后，进入"个人"页面，可对个人基本信息进行更改（如昵称修改）。
好友管理：在"个人"页面，可进行"添加好友"操作；搜索成功后可进行好友申请，接收到好友申请的用户可以选择"同意"或"拒绝"，同意后，双方会分别更新在对方的"好友"页面。
论坛管理：在"论坛"页面，可以浏览到所有用户发布的主贴，点击右下角"➕"图标，进入"新话题发布页"界面，输入相关内容后点击"确认发布"，发布成功或失败会进行弹窗提示并返回"论坛"页面，下拉刷新即可查看更新的内容。点击某个主贴，即可进入"话题详情"页面，该页面包含该话题的详细内容，评论区以及发布评论区。点击页面footer的"评论"按钮，评论输入框小窗接触隐藏。在输入完内容后，点击确认即可发布评论。下拉刷新即可查看更新的内容。
**私信管理：**在"好友"页面中，点击选中好友，即可转至与该好友一对一的"私信"页面。包含对话记录与输入框，在输入框中输入相关内容后，点击"发送"，新私信会更新在双方的对话记录部分。
**消息管理:**在"消息"页面,展示好友发来的新私信,新的好友申请,论坛新评论等消息。点击对应消息可进入相应操作界面。
【介绍系统开发所使用的软件和硬件环境，包括所用到的开源平台、第三方工具。
给出使用操作系统的名称、生产厂家、版本号等。
给出所用开源平台的官方网站、版本，该平台提供的功能。如关键算法的实现或部分实现调用了第三方工具或源代码，请标出其出处，写明已实现的功能。
给出使用数据库的名称、生产厂家、版本号等。如使用了多种数据库，则要说明如何实现相互之间的关联。
给出使用的硬件设备，型号、生产厂家等。】
软件环境：
Windows 10 (by Microsoft)
IntelliJ IDEA 2021.2.2
HBuilder X
Data Studio
Nox 7.0.25
硬件环境：
Lenovo XiaoXinAir-14IIL 2020
设备名称 LAPTOP-8N6ETSQH
处理器 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz 1.19 GHz
机带 RAM 16.0 GB (15.8 GB 可用)
数据库：
名称：openGauss
生产厂家：华为
版本号：openGauss 2.1.0
开源/第三方工具:
Mui前端框架
Html5 Plus API
org.n3r.idworker
EASYTuan
采用集中式系统，后端部署在腾讯云服务器
{width="2.408333333333333in"
height="1.3in"}
{width="2.408333333333333in"
height="1.3in"}
后端开发：
- SpringBoot2
采用Spring框架，它是Java EE编程领域的一个轻量级开源框架，主要采用MVC与前后端分离相结合的设计思想。M表示ModelAndView，表示控制器的处理结果，其中的Model表示转发的数据（如果是重定向，则Model没有意义），而View表示最终负责响应的视图组件的名称；V表示ViewResolver，表示根据视图组件的名称，确定具体使用的是哪个视图组件；C表示Controller，表示实际处理请求的组件，例如接收请求参数，决定最终是转发或重定向的方式来响应。
设计思想如下图所示：
{width="6.266666666666667in" height="2.175in"}
MVC与前后端分离相结合的设计架构
- Netty
使用Netty实现基本的聊天功能，是一个基于NIO的客户、服务器端的编程框架，简化和流线化了网络应用的编程开发过程，它作为一个专门实现websocket的框架，使得搭建websocket更简单稳定。
WebSocket 是一种标准协议，用于在客户端和服务端之间进行双向数据传输。它是基于 TCP 的一种独立实现。当服务器完成协议升级后（ HTTP -> WebSocket ），服务端可以主动推送信息给客户端，解决了轮询造成的同步延迟问题。由于 WebSocket 只需要一次 HTTP 握手，服务端就能一直与客户端保持通信，直到关闭连接，这样就解决了服务器需要反复解析 HTTP 协议，减少了资源的开销。
基于websocket长连接的通讯技术，一次连接，持续通讯，且建立连接后，可主动实时反馈服务器信息，实现聊天。
- 持久层框架：Mybatis-plus（国产开源项目）
Mybatis-Plus 是基于JAVA的持久层框架 ，是MyBatis 的一个增强工具。内置通用 Mapper、通用 Service，仅仅通过少量配置即可实现单表大部分 CRUD 操作，更有强大的条件构造器，满足各类使用需求，简单便捷的实现对数据库的操作。
前端开发：
- Mui框架（国产）
Mui框架提供大量封装好的JS与CSS文件，拥有十分丰富且接近原生移动app的组件。使用了组件化的思想，把特有的组件封装在单独的CSS和JS文件中，方便开发
- 完整性与安全性考量，采用触发器等数据库技术。例如避免发表不良话题，建立触发器进行敏感词检测，自动删除带有敏感词的话题。
{width="2.783333333333333in" height="1.0666666666666667in"}
- 基于原本的web项目的MVC模式，改进为适应移动端app的MVC加前后端分离模式。
{width="6.266666666666667in" height="2.175in"}
-
应用了大量国产软件，如数据库方面使用华为研发的Open Gauss数据库；前端设计采用在Hbuilder X 里使用mui框架；持久层操作使用Mybatis-plus；数据库连接池使用阿里的DRUID。
-
现在少有的使用OpenGauss数据库为移动端app提供服务。
【对系统或子系统实现方法进行详细说明。】
使用的是移动app的C/S架构。因为C/S架构的界面和操作可以很丰富；安全性能可以很容易保证它只有两层的传输，而不是中间有很多层；由于只有一层交互，直接相连，因此响应速度较快。
{width="6.266666666666667in"
height="4.091666666666667in"}
数据统一存储于腾讯云服务器上的Open Gauss数据库中，并对隐私信息进行了MD5加密处理。
- []{#_Toc109536544 .anchor}数据库
{width="6.258333333333334in" height="3.05in"}
ER图
表1
数据表名: Users 中文描述：用户信息表
字段名称 字段描述 数据类型 长度 是否允许空 缺省值 备注
Id 用户编号 varchar 255 N NULL 主键
Username 用户账号 varchar 255 N NULL 索引
Password 用户密码 varchar 255 N NULL
Face_image 用户头像 varchar 255 Y NULL
Nickname 用户昵称 Varchar 255 Y NULL
Cid 手机平台版本 Varchar 255 Y NULL
表2
数据表名: Topic 中文描述：论坛主帖表
字段名称 字段描述 数据类型 长度 是否允许空 缺省值 备注
Tno 话题编号 Varchar 255 N NULL 主键
Tnum 评论数量 Int4 255 N NULL
Tcontent 话题内容 Varchar 255 Y NULL
Posttime 发布时间 Varchar 255 Y NULL
Tagname 所属板块名称 Varchar 255 N NULL
Title 话题标题 Varchar 255 N NULL 索引
Poster 发布者 Varchar 255 N NULL
Img 图片信息 Varchar 255 Y NULL
表3.
数据表名: comment 中文描述：评论表
字段名称 字段描述 数据类型 长度 是否允许空 缺省值 备注
[Cno]{.ul} 评论编号 Varchar 255 N NULL 主键
Content 评论内容 Varchar 255 N NULL
Ctime 评论时间 Varchar 255 N NULL
Cname 评论者 Varchar 255 N NULL
Img 图片信息 Varchar 255 Y NULL
Tno 话题编号 Varchar 255 N NULL 外键
表4.
数据表名: comment 中文描述：评论表
字段名称 字段描述 数据类型 长度 是否允许空 缺省值 备注
[Tag_id]{.ul} 板块id Int4 50 N NULL 主键
Tagname 板块名 Varchar 255 N NULL
表5.
数据表名:my_friends 中文描述：好友表
字段名称 字段描述 数据类型 长度 是否允许空 缺省值 备注
[Id]{.ul} 关系id Varchar 255 N NULL 主键
Myuserid 我方id Varchar 255 N NULL
Myfriendsuserid 好友id Varchar 255 N NULL
表6
数据表名:friends_request 中文描述：好友申请表
字段名称 字段描述 数据类型 长度 是否允许空 缺省值 备注
[Id]{.ul} 申请id Varchar 255 N NULL 主键
Send_user_id 申请方id Varchar 255 N NULL
Accept_user_id 接收方id Varchar 255 N NULL
Request_date 申请时间 Timestamp N NULL
表7.
数据表名: chat_msg 中文描述：私信表
字段名称 字段描述 数据类型 长度 是否允许空 缺省值 备注
Id 私信编号 Varchar 255 N NULL 主键
Senduser 发送方id Varchar 255 N NULL
Acceptuser 接收方id Varchar 255 N NULL
Msg 私信内容 Varchar 255 N NULL
Sign_flag 签收状态 Int10 N NULL
Createtime 创建时间 Timestamp 255 N NULL
固定footer上可以选择相应主功能分区, 并高亮选中的功能区。图标设计取自阿里提供的ICONFONT矢量图标库。图像风格以"红，黑，白"三色为主体。
论坛页面 论坛页面
{width="2.325in" height="3.4833333333333334in"}
{width="2.3333333333333335in" height="3.475in"}
消息页面 个人空间页面
{width="2.316666666666667in"
height="3.466666666666667in"}
{width="2.308333333333333in"
height="3.433333333333333in"}
【介绍主要功能页面，并简要介绍这些页面的设计特色、操作方法。】
- 登录与注册页面
登录时会检验输入是否为空，账号与密码是否与数据库中数据匹配
注册时检验账号是否与数据空中已有用户重复，两次密码输入是否一致，输入是否为空，注册成功与否都会弹窗提示, 是否重复检验是后端检索数据库查找是否有匹配的用户名,若返回值不为空，则说明重复。密码输入一直检验则是前端js实现，获取两个输入框内容，进行判断。
{width="2.675in" height="4.875in"}
{width="2.7583333333333333in" height="4.908333333333333in"}
下图为注册失败与成功的相应提示。
{width="2.658333333333333in" height="5.75in"}
{width="2.7916666666666665in" height="5.75in"}
- 论坛页面，该页面包含帖子列表与"发帖"按钮。
点击帖子，进入详情页面，该页面包含该帖子的详细内容（标题，正文，发布者，发布时间），获取方式为后端调用mybatis的mapper方法，获取一个关于帖子的list，转换为Json格式后返回给前端显示。评论区与"评论"按钮，评论区获取评论内容是通过一个条件构造器，再service中实现sql查找符合主帖id的评论列表。
{width="2.4916666666666667in" height="4.675in"}
{width="2.425in" height="4.666666666666667in"}
点击"发表评论"按钮，即可弹出输入框进行评论，只有输入内容不为空时，"提交"按钮才会变为红色，此时允许进行提交操作。操作成功后，输入框隐藏，弹窗提示下拉刷新。
{width="2.433333333333333in" height="3.7333333333333334in"}
{width="2.4in" height="3.7083333333333335in"}
点击黄色的"发帖"按钮，即可进入发帖页面，只有标题，正文均有输入时，"发布"按钮才会高亮，此时才允许进行发布。发布成功后返回上一级，下拉刷新后可查看更新内容。
{width="2.6333333333333333in" height="5.258333333333334in"}
{width="2.658333333333333in" height="5.266666666666667in"}
添加好友功能, 输入账号,进行查找与好友申请，前端返回给后端输入值，后端进行匹配该账号信息的查找，返回前端相应数据。
{width="2.575in" height="4.575in"}
{width="2.475in" height="4.583333333333333in"}
对方会收到申请消息
{width="2.6166666666666667in" height="4.258333333333334in"}
个人空间页面 好友列表页面
{width="2.45in" height="4.358333333333333in"}
{width="2.433333333333333in" height="4.325in"}
在"好友"页面点击相应好友即可私信，私信的实现是通过后端启动一个netty服务器，前端send出一个socket请求，netty服务器进行响应与接收。
{width="2.316666666666667in" height="4.125in"}
- 在安卓端下载好apk文件后,点击安装 2.安装好后, 桌面多出下示图标,点击即可进入app
{width="1.525in"
height="2.725in"}
{width="1.8916666666666666in"
height="1.8916666666666666in"}
3进入app, 左上角选择注册, 成功后登录
{width="1.6416666666666666in" height="2.925in"}
- 后续操作可参照3.3.2"主要功能页面"
本作品的创意阶段经历了从web向移动端的转折，目的有二：一是当今使用手机而不使用PC的用户越来越多，对于大多数人来说一个移动端应用的便捷性要远大于网页；二是本人想要多接触一些开发技术，尝试学习并去应用一下未曾接触过的移动端开发领域。
在开发过程中，遇到了许多问题，如：
-
如何实现一个低耦合的前后端分离项目，学习到了运用ajax技术发送post，而不再使用与后端高度绑定的thymeleaf框架；
-
在数据库操作中，适应Open Gauss所独有的一些特性，如不能直接设置递增字段，而要通过创建自增序列实现，
{width="5.316666666666666in"
height="0.44166666666666665in"}
后来出于稳定性考虑选择在java程序里直接设计方法类分配id给数据进行编号。
- 初次接触云服务器的搭建与项目在linux环境部署，要学习许多linux操作指令，学会根据日志检索错误。
作品的改进方向：
目前作品的功能较少，如没有"点赞"，"转发"，"统计"等功能，所以使用体验性欠缺，且缺乏文件服务器，导致图片，视频等文件不能上传至论坛。所以作品未来主要的改进方向是添加入更多的功能，使得论坛更具有可用性；搭建文件服务器，使个人信息，用户交流更加方便。
[1] 计算机软件产品开发文件编制指南. 中华人民共和国国家标准GB8567-88. 国家标准局，1988年1月7日.
[2] 谢希仁.计算机网络（第四版）. 大连理工大学出版社，2006.8.
同文件下附有源代码
(后端) (前端)
{width="2.475in" height="6.083333333333333in"}
{width="2.05in" height="2.716666666666667in"}