软件工程:大作业报告(阶段三)

前端代码地址:Github

后端代码地址:Github

uniapp 设计

my 页面效果如下:

image-20230103205143867

第一部分

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

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

  • 今日动态:显示今天的好友(包括自己)发布的动态数量,单击跳转到首页页面

  • 我的动态:显示个人发布动态数量,单击跳转到个人动态列表(分页查询)

    image-20230103205655701
  • 轨迹数据:显示个人行动的时空数据数量,单击跳转到轨迹数据列表(分页查询)

    image-20230103205803047

第二部分

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

  • 个人订阅:仅包含个人为自己订阅的频道信息(分页查询)

    image-20230103211108399
  • 订阅申请:仅包含他人为自己订阅的频道申请信息(分页查询)

    image-20230103211156968
  • 全部订阅:包含上述两种类型订阅信息及个人为他人订阅申请信息(分页查询)

    image-20230103211259659
  • 好友申请:包含本人申请好友及他人申请好友的数据,如果是他人提交的好友申请,本人可以通过单击“同意申请”进行通过

    image-20230103212233870

对于单击频道订阅申请会跳转到订阅详情窗口,内容如下:

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

第三部分

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

  • 个人设置:针对于各项信息可以进行修改,先单击要修改的内容(右侧)会激活弹窗,在弹窗内填入合法字符既可修改成功;头像则没有改弹窗转而是拉起文件选择器(手机上是文件管家或者相册一类)选择图像后上传

    image-20230103212445526 image-20230103212559765
  • 联系客服:单击激活信息体系框展示客服手机号(仅为测试使用)

    image-20230103212930304
  • 退出登录:单击退出登录后会清除全部本地个人数据,并出现登录提示页面,同时其他页面访问受限;同时再次单击“一键登录”即可以重新获取到信息

    image-20230103213047404

SpringBoot 设计(测试以本地为例)

通过 subscriptionId 修改订阅状态

image-20230103213408552

返回内容备注:

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

通过 userId 获取订阅信息

image-20230103213553892

返回内容备注:

  • 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

通过 userId 获取动态

image-20230103213929399

返回内容备注:

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

通过 userId 获取联系人

image-20230103214029726

个人信息更新

image-20230103214636034

微信 jscode2session

image-20230103214706858

微信登录

image-20230103214735410

上传头像

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",
	}
});

通过 userId 获取好友申请

image-20230103220822137

返回内容备注:

  • 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

通过 relationshipId 同意好友申请

image-20230103220954398

返回内容备注:

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

微信登录补充

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

  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,对应数据库选择登录用户或者创建新用户,最后返回用户数据