ZUCC_软件工程_大作业

软件工程 大作业

前端代码：https://github.com/Owemshu/uni-WeCare/tree/main
后端代码：https://github.com/Owemshu/spring-WeCare/tree/main

前端使用了 HBuilder 的 uni-app（vue2）进行小程序的编写；
后端使用了 SpringBoot 进行后端编写；

一、阶段一

1、数据库设计

channel 表（记录频道数据）

字段名	类型	备注
channel_id	bigint	主键，记录频道编号
user_id	varchar(50)	外键，记录创建频道的用户编号
channel_categor	bigint	外键，记录频道类别编号
channel_name	varchar(50)	记录频道名称
channel_image_src	varchar(255)	记录频道预览图映射地址
is_swiper	tinyint	记录频道是否为商店页面轮播图素材（默认为否）
channel_description	varchar(255)	记录频道的介绍详情
detail_src	varchar(255)	记录频道自定义的富文本映射地址（默认为空）

channel_category 表（记录频道分类的类别）

字段名	类型	备注
channel_category_id	bigint	主键，记录频道分类类别编号
channel_category_name	varchar(50)	记录频道分类类别名称
channel_category_image_src	varchar(50)	记录频道分类类别对应的预览图映射地址

comment 表（记录评论数据）

字段名	类型	备注
comment_id	bigint	主键，记录评论编号
trace_id	bigint	外键，记录评论附带的时空信息
posting_id	bigint	外键，记录评论附属的动态编号
content	varchar(255)	记录评论内容

posting 表（记录动态信息）

字段名	类型	备注
posting_id	bigint	主键，记录动态编号
trace_id	bigint	外键，记录发布动态附带的时空信息
posting_name	varchar(50)	记录动态名称
posting_image_src	varchar(255)	记录动态预览图，如果内容不为图片媒体会自动添加对应的默认预览图
posting_description	varchar(255)	记录动态详细信息
media_type	int	记录动态类型，0：图片；1：视频；2：录音
posting_media_src	varchar(255)	记录对应媒体文件的映射地址，当为图片媒体时该字段无效（默认为空）

relationship 表（记录用户关系信息）

字段名	类型	备注
relationship_id	bigint	主键，记录关系信息编号
user_id	varchar(50)	外键，记录该关系发起者用户编号
accept_user_id	varchar(50)	外键，记录该关系接受者用户编号
is_accept	tinyint	记录该关系是否生效（默认为不生效）

subscription 表（记录频道订阅信息）

字段名	类型	备注
subscription_id	bigint	主键，记录频道订阅信息编号
user_id	varchar(50)	外键，记录该订阅发起者用户编号
accept_user_id	varchar(50)	外键，记录该订阅接受者用户编号
channel_id	bigint	外键，记录该订阅频道编号
subscription_time	varchar(50)	记录订阅推送时的时间
is_accept	tinyint	记录该订阅信息是否生效（默认为不生效）

trace 表（记录某节点时空信息）

字段名	类型	备注
trace_id	bigint	主键，记录轨迹信息编号
user_id	varchar(50)	外键，记录该轨迹信息中用户的编号
trace_time	datetime	记录该节点下日期、时间信息
longitude	double	记录该节点下经度信息
latitude	double	记录该节点下纬度信息

user 表（记录用户信息）

字段名	类型	备注
user_id	varchar(50)	主键，记录用户编号
password	varchar(50)	记录用户密码（默认为空）
openid	varchar(50)	记录用户的 openid（针对于微信用户，默认为空）
nick_name	varchar(50)	记录用户名称（默认为空）
phone_number	varchar(50)	记录用户手机号（默认为空）
avatar_url	varchar(255)	记录用户头像的映射地址，默认设置为默认头像
gender	tinyint	记录用户性别，0：男；1：女（默认为男）
city	varchar(50)	记录用户所在城市（默认为空）
province	varchar(50)	记录用户所在省份（默认为空）
country	varchar(50)	记录用户所在国家（默认为空）

2、数据库内容填充

channel

channel_category

comment

posting

relationship

subscription

trace

user

2、 服务器初步部署尝试

1）搭建基本环境

• mysql：5.6.51 MySQL Community Server (GPL)
• java：openjdk version “1.8.0_352”

2）数据库数据同步

将本地测试正常的数据库数据导出（数据 + 结构）为 sql 文件，再使用工具（这里使用 Navicat）连接远程数据库导入 sql 文件

3、SpringBoot 项目运行

本地使用 Maven 打包（jar包）后上传到服务器（注意相关端口是否开启）后部署运行文件并输出日志文件

nohup java -jar WeCare.jar >> mylog.log &

正常返回则说明测试工程部署成功

二、阶段二

1、uniapp 设计

详细代码请移步 github：https://github.com/Owemshu/uni-WeCare
shop 页面最终效果如下：

1）基本轮廓

在主体小程序内设计了四个 tabbar 页面（首页、联系人、商店及我的）并为其额外设定了激活图案

2）shop 页面设计

搜索框

这里的搜索区域本质上可以看成一个“贴图”，在点击该区域时会跳转到一个新的页面（搜索页面）
在该窗口下存在三部分内容：

1. 搜索区域，这里默认点击会调出手机键盘方便输入

2. 搜索历史区域，该区域会读取登录用户存储的本地数据，不受登出及切换账号影响

   1. 单击搜索历史会跳转到一个搜索结果列表（分页查询）
      

3. 搜索结果区域，该区域会通过键入的关键词进行实时搜索并返回结果（分页查询），同时激活该区域会覆盖历史区域部分

   1. 单击联想结果会直接跳转到对应的详情页面
      

轮播图区域

通过设置数据库内的 channel 表的 is_swiper 来实现动态管理轮播图内容控制。同时单击轮播图可以直接进入频道详情，如上“单击联想结果”

频道分类区域

通过设置数据库内的 channel_category 表可以动态地实现频道分类管理。通过单击相应的频道分类可以进入频道分类内容的列表，同时也提供了无内容提示。


在具体的分类列表内设置了下拉刷新及上拉触底刷新机制实现分页查询，可以有效避免数据请求相关错误的发生。同时也包含基本的数据请求完毕的反馈机制。

2）channel 频道详情页设置

详情页包含四部分内容：

1. 频道预览图
2. 频道相关信息（包括名称、创建人及简介）
3. 订阅部分
4. 补充部分的富文本

其中订阅部分内容主要如下：

1. 日期选择器，通过选择合适订阅日期及时间来进行推送
   

2. 订阅者选择，对象为包含自己在内的所有好友，其中自己是不需要进行请求确认的
   

3. 订阅，相应的通过后台数据查询可以返回以下几种结果

   1. 订阅请求已发送
   2. 订阅者已订阅该频道
   3. 订阅失败

2、SpringBoot 设计（测试以本地为例）

详细代码请移步 github：https://github.com/Owemshu/spring-WeCare

1）创建订阅频道

返回内容备注：

• 1：正常添加完成
• 0：未添加成功
• -1：已经订阅该频道，未添加成功

2）获取轮播图数据

3）获取频道分类数据

4）通过关键字查询频道

返回内容备注：

• total：查询出符合要求的结果总数
• list：分页结果内容
• pageNum：当前页数
• pageSize：当前页大小

5）通过 channel_id 获取频道信息

备注：这里的 channel_id 是直接跟在https://localhost:8082/shop/channel/后的，充当请求数据

三、uniapp 设计

详细代码请移步 github：https://github.com/Owemshu/uni-WeCare

my 页面效果如下：

1、第一部分

这一部分包括联系人数、今日动态、我的动态及轨迹数据四大部分，在每次显示本页面时均会向后端进行数据请求更新数据并保留在本地。

• 联系人数：显示当前好友数量，单击跳转到联系人页面

• 今日动态：显示今天的好友（包括自己）发布的动态数量，单击跳转到首页页面

• 我的动态：显示个人发布动态数量，单击跳转到个人动态列表（分页查询）
  

• 轨迹数据：显示个人行动的时空数据数量，单击跳转到轨迹数据列表（分页查询）
  

2）第二部分

这一部分包括个人订阅、订阅申请、全部订阅及好友申请四大部分

• 个人订阅：仅包含个人为自己订阅的频道信息（分页查询）
  
• 订阅申请：仅包含他人为自己订阅的频道申请信息（分页查询）
  
• 全部订阅：包含上述两种类型订阅信息及个人为他人订阅申请信息（分页查询）
  
• 好友申请：包含本人申请好友及他人申请好友的数据，如果是他人提交的好友申请，本人可以通过单击“同意申请”进行通过
  
  对于单击频道订阅申请会跳转到订阅详情窗口，内容如下：

1. 频道预览图
2. 订阅消息概览，包括频道名称、订阅接受时间及当前订阅申请状态
3. 订阅发起人的信息
4. 订阅接收人的信息
5. 交换按钮，对应第二部分的订阅申请状态，如果本人为接收人则可以进行订阅信息的接收或取消订阅，否则不会出现交互按钮

3）第三部分

这一部分包括个人设置、联系客服及退出登录

• 个人设置：针对于各项信息可以进行修改，先单击要修改的内容（右侧）会激活弹窗，在弹窗内填入合法字符既可修改成功；头像则没有改弹窗转而是拉起文件选择器（手机上是文件管家或者相册一类）选择图像后上传
  
  
• 联系客服：单击激活信息体系框展示客服手机号（仅为测试使用）
  
• 退出登录：单击退出登录后会清除全部本地个人数据，并出现登录提示页面，同时其他页面访问受限；同时再次单击“一键登录”即可以重新获取到信息
  

2、SpringBoot 设计（测试以本地为例）

详细代码请移步 github：https://github.com/Owemshu/spring-WeCare

1）通过 subscriptionId 修改订阅状态

返回内容备注：

• 1：修改成功
• 0：修改失败

2）通过 userId 获取订阅信息

返回内容备注：

• subscriptionId
• userId
• user 对象：{userId, password, openid, nickName, phoneNumber, avatarUrl, gender, city, province, country}
• acceptUserId
• acceptUser 对象：{userId, password, openid, nickName, phoneNumber, avatarUrl, gender, city, province, country}
• channelId
• channel 对象：{channelId, userId, channelCategoryId, channelName, channelImageSrc, isSwiper, channelDescription, detailSrc, channelIntroduce}
• subscriptionTime
• isAccept

3）通过 userId 获取动态

返回内容备注：

• total：查询出符合要求的结果总数
• list：分页结果内容
• pageNum：当前页数
• pageSize：当前页大小

4）通过 userId 获取联系人

5）个人信息更新

6）微信 jscode2session

7）微信登录

8）上传头像

uniapp 接口实例：

const res = await uni.uploadFile({
	url: _self.updateBasePath + 'my/uploadHeadPortrait',
	filePath: path,
	name: "fileUpload",
	formData: {
		"userId": _self.userinfo.userId
	},
	header: {
		"Content-Type": "multipart/form-data",
	}
});

9）通过 userId 获取好友申请

返回内容备注：

• relationshipId
• userId
• user 对象：{userId, password, openid, nickName, phoneNumber, avatarUrl, gender, city, province, country}
• acceptUserId
• acceptUser 对象：{userId, password, openid, nickName, phoneNumber, avatarUrl, gender, city, province, country}
• accept

10）通过 relationshipId 同意好友申请

返回内容备注：

• 1：修改成功
• 0：修改失败

3、微信登录补充

上述过程中使用到了微信登录相关接口，这里做一个解释。其中登录步骤如下：

1. 小程序中调用 uni.login（微信中为 wx.login）接口获取到 code 验证码，该码唯一标识了该用户在本程序中的验证关系，该码有效时间五分钟且只能使用一次。
2. 小程序中调用 uni.getUserProfile（微信中为 wx.getUserProfile）接口获取到 encryptedData（包括敏感数据在内的完整用户信息的加密数据）、iv（加密算法的初始向量）、rawData（不包括敏感信息的原始数据字符串，用于计算签名）、signature（使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息）
3. 将获取到的 code、encryptedData、iv、rawData、signature 打包使用 /my/user/wxlogin 路径下的 POST 方法传入后台，后台解密数据获取到该用户在本小程序唯一身份码 openid，对应数据库选择登录用户或者创建新用户，最后返回用户数据

四、阶段四

1、uniapp 设计

详细代码请移步 github：https://github.com/Owemshu/uni-WeCare

contact 页面如下所示：

1）左侧人物滑动选择条

具体来说这里添加了滑动设计，同时对已选择的对象进行了明显的视觉区分。当左侧人物选择栏选择之后，右侧的内容页也会发生改变。

2）右侧内容页

这里主要功能分为四部分：

1. 用户基本信息展示：包含用户名、性别、手机号及地区（拼接）

2. 动态信息：右侧展示动态数量，下发展示近四条动态的预览图，单击可以查看动态信息列表（分页查询，包含下拉触底及上拉刷新）

3. 轨迹信息：右侧展示轨迹信息数量，单击可以查看轨迹信息列表（分页查询），同时单击具体的轨迹点可以拉起内置地图查看具体位置。

4. 功能按钮：删除好友

二、SpringBoot 设计（测试以本地为例）

详细代码请移步 github：https://github.com/Owemshu/spring-WeCare

1）通过 userId 获取轨迹数据

2）通过 userId 获取联系人信息

五、阶段五

1、uniapp 设计

详细代码请移步 github：https://github.com/Owemshu/uni-WeCare

首页效果如下：

1）主体设计

采用分页查询，并设置了上拉刷新及下拉触底刷新机制。每个动态纵向排列，左侧为发布者的基本信息（用户名及头像），右侧为发布动态的动态名、预览图及时空信息。同时在右侧有布局一个悬浮课拖动的快捷导航，将常用的一些功能集中在此。

2）动态卡片

单击首页的动态卡片既可进入动态详情页面。可以将动态详情页面分为三部分，每部分具体如下：

1. 发布者信息及动态内容：这一部分存在发布者的个人信息（用户名及头像），单击用户名即可以跳转到联系人对应位置；另一方面包含了基本的动态信息（动态内容、媒体、发布时空信息），单击“位置”即可查看该用户发布动态的位置；对于媒体，目前支持图片、视频及录音，均可以正常显示播放
   
   

2. 评论部分：同理这一部分也包含了评论者的基本个人信息（用户名及头像）以及评论内容与发布的时空信息，单击“用户名”或“位置”也可以实现更细致的查看。需要注意的是这里如果点击本人用户名会跳转到 my 页面。

3. 发布评论内容部分：单机“输入”按钮即会激活弹出提示窗，可以在提示窗内输入评论内容后单击“提交”即可发送评论。
   
   

2、快捷导航

快捷导航目前集成了“发布动态”和“添加好友”的功能

1）发布动态

1. 动态名与动态详细信息设定：这里可以对动态名与动态详细信息进行设定，单击“设定”会激活一个可输入的提示窗，在指定位置输入字符单击“保存”即可完成相应设定。
   

2. 选择媒体：对于不同类型的媒体（图片、视频或音频）会调用不同的输入 api

   1. 图片：点击指定位置后，在拉起的文件选择框内选择图片后完成自动上传
      
      
   2. 视频：点击“选择文件”后，在拉起的文件选择框内选择视频（通过设置，容量应小于50MB）后完成自动上传
      
      
   3. 音频：长按指定按钮后激活录音功能，一定时间后松开即会显示“已完成录音”
      
      
      
   4. 注意如果频繁切换媒体模式，那么最终保存的文件类型取决于选择的类型，文件类型为最后上传的文件

3. 功能按钮：在完成上诉两步之后单击“发布动态”即可以发布。

2）添加好友

通过输入对方的手机号码来进行好友添加，如果对方没有设置手机号或手机号不存在则会无效。

2、SpringBoot 设计（测试以本地为例）

详细代码请移步 github：https://github.com/Owemshu/spring-WeCare

1）添加好友

返回内容备注：

• 1：修改成功
• 0：修改失败

2）删除好友

返回内容备注：

• 1：修改成功
• 0：修改失败

3）创建评论

4）创建轨迹点

5）通过 userId 获取今日动态

• total：查询出符合要求的结果总数
• list：分页结果内容
  • postingId
  • traceId
  • trace 对象：{traceId, userId, longitude, latitude, traceTime}
  • postingName
  • postingImageSrc
  • postingDescription
  • mediaType
  • postingMediaSrc
  • user 对象：{userId, password, openid, nickName, phoneNumber, avatarUrl, gender, city, province, country}
• pageNum：当前页数
• pageSize：当前页大小

6）通过 postingId 获取评论

返回结果备注：

• commentId
• traceId
• trace 对象：{traceId, userId, longitude, latitude, traceTime}
• user 对象：{userId, password, openid, nickName, phoneNumber, avatarUrl, gender, city, province, country}
• postingId
• content

7）上传媒体文件及创建动态信息

上传媒体文件 uniapp 案例：

const uploadRes = await uni.uploadFile({
	url: _self.updateBasePath + '/home/uploadPostingMedia',
	filePath: _self.tempFilePath,
	name: "fileUpload",
	formData: {
		"userId": _self.userinfo.userId
	},
  header: {
		"Content-Type": "multipart/form-data",
	}
});```
创建动态信息 uniapp 案例：

```js
const res = await uni.$http.post('/home/posting', {
	traceId: traceId,
	postingName: _self.postingName,
	postingImageSrc: imageSrc,
	postingMediaSrc: filePath,
  postingDescription: _self.postingDescription,
	mediaType: _self.mediaType
})```