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

前端代码地址:Github

后端代码地址:Github

uniapp 设计

shop 页面最终效果如下:

image-20230103194905674

基本轮廓

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

image-20230103195134852 image-20230103195147899 image-20230103195204754 image-20230103195223594

shop 页面设计

搜索框

image-20230103195346881

这里的搜索区域本质上可以看成一个“贴图”,在点击该区域时会跳转到一个新的页面(搜索页面)

image-20230103195505003 image-20230103195855213

在该窗口下存在三部分内容:

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

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

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

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

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

      image-20230103201050818

轮播图区域

image-20230103201252844

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

频道分类区域

image-20230103201539004

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

image-20230103201715225 image-20230103201653389

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

image-20230103201919183

channel 频道详情页设置

image-20230103202221959

详情页包含四部分内容:

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

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

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

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

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

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

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

创建订阅频道

image-20230103203923641

返回内容备注:

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

获取轮播图数据

image-20230103204124532

获取频道分类数据

image-20230103204214229

通过关键字查询频道

image-20230103204241545

返回内容备注:

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

通过 channel_id 获取频道信息

image-20230103204432669

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