《南大猫咪图鉴》

• 《南大猫咪图鉴》项目介绍
• 1 总体介绍
  • 1.1 小组成员
  • 1.2 成员分工
  • 1.3 项目地址及贡献
    • 微信代码管理地址
    • GitHub地址
  • 1.4 开发说明
• 2 小程序介绍
  • 2.1 项目初心
  • 2.2 页面介绍
    • 2.2.1 登录页面
    • 2.2.2 猫咪家园页面
    • 2.2.3 猫咪详情页面
      • 带猫咪名字的返回栏+猫咪图片轮播
      • 猫咪个人信息
      • 猫咪关系及猫生时刻记录
      • 猫咪故事分享
    • 2.2.4 猫咪朋友圈页面
    • 2.2.5 猫咪毛色分类页面
    • 2.2.6 关于页面
      • 浏览量与点赞量
      • GitHub
      • 关于我们
      • 日志
      • 赞赏支持
      • 猫咪管理
      • 意见反馈
• 3 代码结构
  • 3.1 小程序前端
  • 3.2 服务器后端
• 4 参考资料

1 总体介绍

1.1 小组成员

组长	杨云波	181250176
组员	张卓楠	181830249
组员	钱支鑫	181250116
组员	王晓奇	181250143
组员	郑涛	181250200

1.2 成员分工

• 杨云波：资料收集，猫咪信息上传、猫咪朋友圈上传页面
• 张卓楠：前端框架确定，登录界面，猫咪列表页面，猫咪详情页面，关于页面展示内容，资料收集，朋友圈页面优化
• 钱支鑫：猫咪朋友圈页面，资料收集
• 王晓奇：后端服务器搭建及接口文档编写
• 郑涛：猫咪毛色分类展示页面，关于页面，资料收集

1.3 项目地址及贡献

说明：开发过程中遵循gitflow流程，在develop分支中进行编写，最后评审通过后合并至master分支，详细代码贡献见项目地址内

微信代码管理地址

https://git.weixin.qq.com/wx_wx6d6c323fe54d42ee/NJU-catcollection

GitHub地址

https://github.com/sunflower-zzn/NJU-CatSourceBooks 注：GitHub为搬运故无代码贡献参考

1.4 开发说明

• 前端语言：js、wxss、wxml、json（微信小程序相应语言）
• 后端语言：java、SQL（部署在服务器上，通过接口访问）
• 版本控制：微信开发者-代码管理
• 开发会议：每周1-2次，腾讯会议线上平台，并留存相应的会议记录【见_会议记录.md_】

2 小程序介绍

2.1 项目初心

我们希望制作一款《南大猫咪图鉴》的小程序，为南京大学的猫咪们登记造册。 方便同学们快速查看当前校园内猫咪们的个人信息、性格、状态、关系和故事等。 实时分享一些猫咪信息，营造猫咪社区效果，吸引用户关注。 同时也希望通过这种方式使更多的人关注南大的猫咪们，并给予力所能及的帮助。

2.2 页面介绍

2.2.1 登录页面

本页面为小程序的初始页面，用户点击“进入南大猫咪图鉴”，小程序会申请获得用户的个人信息并显示在页面上，经过2s加载后进入主页面。

2.2.2 猫咪家园页面

本页面为_自定义底部导航栏 _中的第一个页面，由图片轮播栏和子导航栏组成。 子导航栏按照猫咪状态（在校、被领养、失踪、去世）分类。 猫咪以列表形式展示，用户可以点击猫咪头像进入详情页面。

2.2.3 猫咪详情页面

本页面为猫咪详情页面，根据上一层点击跳转传参向服务器发起请求获取对应猫咪的信息并展示，展示内容有：

带猫咪名字的返回栏+猫咪图片轮播

猫咪个人信息

猫咪关系及猫生时刻记录

猫咪故事分享

2.2.4 猫咪朋友圈页面

在猫咪朋友圈页面，用户可以查看其他用户发表的朋友圈内容并进行点赞。 用户点击左下角的蓝色加号可以进入新建朋友圈页面，编写内容，选择图片并发布猫咪朋友圈： 返回页面并刷新即可查看最新发布内容：

2.2.5 猫咪毛色分类页面

本页面由猫咪图片轮播栏与垂直导航组成。 垂直导航根据猫咪花色进行分类与快速访问，用户可以迅速根据猫咪毛色查询猫咪。 点击右边栏猫咪头像同样可以进入猫咪详情页面查看猫咪详细信息。

2.2.6 关于页面

关于页面多个页面组成，具体如下：

浏览量与点赞量

view和star数量记录了小程序浏览量和点赞支持数量。 用户可以通过点击star来为我们点赞，并且只能点击一次。

GitHub

用户点击GitHub按钮即可将我们的GitHub项目地址复制到剪贴板

关于我们

点击关于我们即可跳转至作者信息介绍页面，介绍了小程序一些信息与参考资料

日志

日志页面主要记录了我们的开发过程及会议记录

赞赏支持

赞赏支持页面可以放入南大校园内相关公益组织的捐款信息和捐款码，帮助营造更好的猫咪环境。

猫咪管理

本页面支持拥有管理员身份的用户上传猫咪信息 选择上传后即可在猫咪家园页面看到新上传的猫咪

意见反馈

用户可以在此向小程序后台反馈使用过程中遇到的问题：

3 代码结构

3.1 小程序前端

结构整体如图所示： 各模块功能概述： colorui：部分界面样式文件  
images：存放icon，如底部导航栏icon，关于页面标志 pages：文件夹是向用户展示的页面

1.    index：实现底部导航栏跳转到相应的四个页面“：猫咪信息第一页面、猫友圈、猫      咪信息第二页面、关于页面 2.    cathome：猫咪信息第一页面（以学籍分类） 3.    circle：猫友圈页面 4.    catkind：猫咪信息第二页面（以颜色分类） 5.    about：关于页面： 5.1．about：关于我们跳转 5.2．admin：管理员入口 5.3．catDetailUpload：猫咪信息更新 5.4．catpyqUpload：猫友圈发布 5.5．home：关于页面主页 5.6．log：日志 5.7．sponsor：赞赏支持 6.    auth：微信小程序授权 7.    login：首页 8.    utils：项目公共方法 app文件：小程序启动配置以及页面配置

3.2 服务器后端

服务器后端结构如图所示，服务器端接口【见_HTTP请求URL及请求方法说明文档__.md_】 使用springboot+tomcat搭建服务器后端，java作为主要语言，mysql为后端数据库

4 参考资料

在本次小程序开发的过程中我们参考了许多开源库的资料内容，列举在下方以示感谢：

• 前端UI框架：colorUI2.0，作者文晓港
• 免费icon来源：www.icons8.com
• 灵感参考：PKU猫咪图鉴