软件工程：大作业报告（阶段五）

前端代码地址：Github

后端代码地址：Github

uniapp 设计

首页效果如下：

主体设计

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

动态卡片

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

发布者信息及动态内容：这一部分存在发布者的个人信息（用户名及头像），单击用户名即可以跳转到联系人对应位置；另一方面包含了基本的动态信息（动态内容、媒体、发布时空信息），单击“位置”即可查看该用户发布动态的位置；对于媒体，目前支持图片、视频及录音，均可以正常显示播放
评论部分：同理这一部分也包含了评论者的基本个人信息（用户名及头像）以及评论内容与发布的时空信息，单击“用户名”或“位置”也可以实现更细致的查看。需要注意的是这里如果点击本人用户名会跳转到 my 页面。
发布评论内容部分：单机“输入”按钮即会激活弹出提示窗，可以在提示窗内输入评论内容后单击“提交”即可发送评论。

快捷导航

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

发布动态

动态名与动态详细信息设定：这里可以对动态名与动态详细信息进行设定，单击“设定”会激活一个可输入的提示窗，在指定位置输入字符单击“保存”即可完成相应设定。
选择媒体：对于不同类型的媒体（图片、视频或音频）会调用不同的输入 api
1. 图片：点击指定位置后，在拉起的文件选择框内选择图片后完成自动上传
2. 视频：点击“选择文件”后，在拉起的文件选择框内选择视频（通过设置，容量应小于50MB）后完成自动上传
3. 音频：长按指定按钮后激活录音功能，一定时间后松开即会显示“已完成录音”
4. 注意如果频繁切换媒体模式，那么最终保存的文件类型取决于选择的类型，文件类型为最后上传的文件
功能按钮：在完成上诉两步之后单击“发布动态”即可以发布。

添加好友

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

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

添加好友

返回内容备注：

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

删除好友

返回内容备注：

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

创建评论

创建轨迹点

通过 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：当前页大小

通过 postingId 获取评论

返回结果备注：

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

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

上传媒体文件 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 案例：

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