第1章绪论

1.1 引言

随着经济快速发展，人民的精神生活日益丰富，对健康的意识也提高了，因此参加活动的意愿十分强烈。在此基础上，我们小组选择了拼团系统的制作和学习，借此锻炼我们的实际问题分析解决和团队协作能力。

1.2 研究内容

拼团–团队活动AA 制

1.2.1 组团

（1）团长创建(组建) 团队并发布活动消息（时间、起点、主要内容等）；

（2）加入团员（团员申请参加活动）；

（3）（团长）确定团队成立，并通知参与人；

（4）确定团队活动的起始时间，交纳团费（可多次交纳）；

1.2.2 团队活动

（1）每次团队活动记录参加人员，活动费用参与人员均摊；

（2）活动过程中根据需要追加AA 费用，也支持某团员独立追加费用；

（3）活动结束，计算团队成员分推费用；

（4）支持输出帐单，并导出到EXCEL 表格中。

（5）活动结束，生成活动报告。

1.2.3 开发工具

（1）后端采用MVC设计模式，使用SpringBoot+MyBatis plus框架，数据库采用MySQL；

（2）前端采用Bootstrap，视图界面美观；

（3）使用Docker进行部署；

（4）系统运行以微服务的方式运行，微服务框架采用Spring Cloud

（5）系统项目源码通过git进行管理；

第2章需求分析

2.1 业务流程分析

2.1.1 基于实验需求的业务分析

⑴ 组团

团长创建新团，编辑团队信息，需要一个创建活动页面，提供信息填写与提交。团员申请参加活动需要在首页活动列表增加一个参加活动按钮，触发后添加团员信息到参团记录表。

⑵ 团队活动

在导航栏加入参团记录，实现每次团队活动记录参加人员，在团长的管理活动页面添加活动起始按钮以及账单生成按钮，实现AA制。成员可以在管理活动页面（仅参加的活动）独立追加团费，追加费用计入总费用和AA计算，团长结束活动后，打印生成活动报告和账单明细。

2.1.2 业务流程图及其说明

系统结构图

流程说明：首先以游客身份进入系统，可预览团队信息，当用户登录（注册，登录）账户后，可进入拼团系统首页，普通团员有3种操作，分别是：①加入团队：可以看到已创建的团队活动，可以选择加入团队；②创建团队：自己成为团长，输入团队信息创建，获得管理活动权限；③管理团队：创建团队自动成为团长，管理团队只能管理自己创建的团队，获得修改、结束活动，打印活动报告和账单权限；④缴纳团费：可以为自己缴费也可以追加团费，缴费后可以通过AA制导出活动账单到Excel。

2.2 系统用例分析

系统用例图

第3章概要设计

3.1 总体架构

3.1.1 总体架构图

系统总体架构图

3.2 项目结构

3.2.1 项目结构图

项目结构图

src/main/java结构说明

common 存放公共的常量类，自定义异常

config 存放配置类，相当于xml配置文件

controller 存控制器，负责接收http请求，转发请求，封装业务数据

entity存实体类, 用lombok插件生成set get方法

mapper 数据接口访问层DAO文件

service 存业务接口service/impl下存放实现类

utils存工具类

Application.java是系统的启动类

src/main/resources下存放配置文件其中

application.yml是主要配置文件

webapp/page存放jsp页面

webapp/static是存放js ,css ,图片等静态资源的

3.2.2 项目实现功能

用户注册登录：

加入团队：

team/list.jsp里布置了参加活动按钮，点击即可参与。

创建团队：

选择导航栏的创建活动，输入相关信息提交即可创建。

管理活动：

manage.jsp页面提供修改活动、确定活动、结束活动、生成报告、帐单列表、追加费用按钮实现相应功能。

参团列表：

joinRecord/list.jsp页面展示参团人员记录。

AA制团费：

bill.list页面展示账单明细并提供导出excel按钮。

账单导出excel：

BillController进行跳转实现本地下载。

3.2.3 总体流程

新用户注册后进行登录，老用户输入用户名/手机号进行登录，进入系统界面后可以选择团队加入，也可创建新的团队，成为新团的团长，拥有修改团队信息、生成活动报告、账单等权限，所有团员都可通过参团记录查看各人的拼团情况。活动刚成立处于新建状态，由团长决定活动开始时间和结束时间，活动结束后可生成活动账单，查看AA费用，团员进行缴纳，并支持团长和团员独立追加费用，活动结束后可退出系统。

第4章数据库设计

4.1 　数据库选型

4.1.1 　几种数据库比较

随着数据库管理系统技术的成熟，目前比较流行的数据库有MySQL、SQL Server、Oracle、Sybase等，而我们本次设计所使用的MySQL，它是最受欢迎的开源SQL数据库管理系统。MySQL是一个快速的、多线程、多用户和健壮的SQL数据库服务器。MySQL服务器支持关键人物、重负载生产系统的使用，也可以将它嵌入到一个大配置的软件中去。而与其他的数据库相比较，MySQL有如下的一些优点：

1）MySQL是一个关系数据库管理系统

2）MySQL是开源的

3）MySQL服务器是一个快速的、可靠的和易于使用的数据库服务器

4）MySQL服务器工作在客户/服务器或嵌入系统中

5）有大量的MySQL软件可以使用

4.1.2 　MySQL数据库

MySQL是一个完全免费的数据库系统，是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于Oracle公司。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。

4.1.3 数据库安全

我们采用MD5实现数据库用户表密码的单项加密，先将原来的数据变成一个16个字节的数组，然后将这个长度为16的字节数组用16进制表示，这个16进制的字符串就是加密最后的结果。

MD5加密

4.2 数据库设计

数据库ER图

表4.1 用户表

表名	用户表 user
说明	记录用户的身份信息以及对系统的相关设置
字段名	数据类型	是否为空	是否为主键	说明
id	INTEGER	N	Y	用户唯一标志号
username	VARCHAR(50)	Y	N	用户昵称
password	VARCHAR(255)	Y	N	用户密码
real_name	VARCHAR(50)	Y	N	用户真实姓名
phone	VARCHAR(255)	Y	N	用户的电话号码
role	INTEGER	Y	N	用户是否为管理员

表4.2 团队表

表名	团队表team
说明	所选团队信息
字段名	数据类型	是否为空	是否为主键	说明
id	INTEGER	N	Y	团队
team_name	VARCHAR(50)	Y	N	团队名称
team_leader	INTEGER	Y	N	团长的id
start_time	VARCHAR(50)	Y	N	开始时间
end_time	VARCHAR(50)	Y	N	结束时间
state	INTEGER	Y	N	团队建立状态
cost	DECIMAL（10，2）	Y	N	团队总消费

表4.3 参团记录表

表名	用户表 join_record
说明	参团人员记录
字段名	数据类型	是否为空	是否为主键	说明
id	INTEGER	N	Y	用户唯一标志号
team_id	INTEGER	Y	N	团队序号
user_id	INTEGER	Y	N	用户序号

表4.4 账单表

表名	bill
说明	账单
字段名	数据类型	是否为空	是否为主键	说明
id	INTEGER	N	Y	用户唯一标志号
user_id	INTEGER	Y	N	用户昵称
team_id	INTEGER	Y	N	团队名称
cost	DECIMAL(10,2)	Y	N	费用
remark	VARCHAR(255)	Y	N	备注

第5章详细设计

5.1 数据访问层设计

表的操作（CURD）:

项目利用MybatisPlus简化开发，启动即会注入基本CURD，直接面向对象操作，MP内置通用mapper、通用service，每个service都继承IService，在IService里定义了各种方法，帮助我们用少量配置实现大部分CURD操作。

我们只需要创建TeamMapper、UserMapper等接口，并继承BaseMapper接口，不需要创建SQL映射文件。

5.2 表示层设计

（1）登录注册页面设计

创建一个login的jsp页面，在里面添加一个form表单，在里面设计用户名、密码输入文本框，同时也可以采用手机号登录，以及登录跳转按钮，再添加一个注册用户信息的模态框。

<form style="margin<form style="margin-top: -30px;">
   <center><h4>登录</h4></center>
   <input type="text" id="username" class="form-control uname" placeholder="用户名" value=""/>
   <input type="password" id="password" class="form-control pword m-b" placeholder="密码" value=""/>
   <input type="button" value="登录" class="btn btn-primary btn-block" onclick="login()"></input>
                   <a href="/signup">注册</a>
</form>
<form style="margin-top: -30px;">
   <center><h4>登录</h4></center>
   <input type="text" id="phone" class="form-control uname" placeholder="手机号" />
   <input type="password" id="password2" class="form-control pword m-b" placeholder="密码" />
   <input type="button" value="登录" class="btn btn-primary btn-block" onclick="loginByPhone()"></input>
                   <a href="/signup">注册</a>
</form>

（2）创建活动页面设计

在页面展示的中间有一个创建活动的按钮，点击则跳转到创建活动的信息输入页面，通过输入活动名称，费用，开始时间，结束时间，点击提交按钮则创建成功。

<input type="text" placeholder="活动名称" class="form-control" name="teamName" id="teamName" value="${data.teamName}">
<input type="text" placeholder="费用" class="form-control" name="cost" id="cost" value="${data.cost}">
<input type="text" placeholder="开始时间" class="form-control" name="startTime" id="startTime" value="${data.startTime}">
<input type="text" placeholder="结束时间" class="form-control" name="endTime" id="endTime" value="${data.endTime}">
<button class="btn btn btn-sm btn-primary" id="btn">提交</button>

（3）参团记录页面设计

在页面展示的右边有一个参团记录的按钮，点击则跳转到参团记录页面，该页面可以看见活动ID，活动名称，以及团员姓名，同时表格的右上方也有刷新按钮，可以实时查看参团记录。

<div class="table-responsive">
           <table id="table">
           </table>
  </div>

（4）活动列表页面设计

在页面展示的左边有一个活动列表的按钮，点击则跳转到活动列表页面，该页面可以查看活动ID，活动名称，费用，开始时间，结束时间以及状态，同时也可以进行参加活动这一操作，表格的右上方也有着刷新按钮，确保活动的最新情况。

同（3），自适应表格。

（5）管理活动页面设计

该页面在活动列表的操作基础上新增了修改活动，确定成立，结束活动，生成报告，账单列表，追加费用等功能，同时也包含着刷新按钮，以此确保活动的最新情况。

events: {               // 注册按钮组事件
    'click #edit': function (event, value, row, index) {
        edit(row.id)
    },
    'click #setup': function (event, value, row, index) {
        updateState(row.id, 2)
    },
    'click #finish': function (event, value, row, index) {
        updateState(row.id, 3)
    },
    'click #appendCost': function (event, value, row, index) {
        appendCost(row.id)
    },
    'click #genReport': function (event, value, row, index) {
        genReport(row.id)
    },
    'click #billList': function (event, value, row, index) {
        billList(row.id)
    },
    'click #excel': function (event, value, row, index) {
        excel(row.id)
    }
}

5.3 业务逻辑层设计

（1）用户登录

（2）加入团队

用户登陆进入系统后，点击“参加活动”按钮，该成员会自动加入到团队中，并将用户的信息保存到join_record表中,在JoinRecordController中添加注解，把用户提交的请求通过对url的匹配，分配给List，进行处理并返回结果。

（3）创建团队

用户点击创建团队跳转到teamAdd.jsp，输入新团队相关信息进行创建。

（4）管理团队

用户只可以对自己创建的团队进行信息修改和数据查看，TeamController中根据函数需要的url返回操作成功的消息或者无权操作的提示或者访问对应jsp文件。

（5）AA缴费

请求通过 @PostMapping(“team/updateState”)找到TeamController的updateState方法，业务是判断把团队状态修改为结束时，用总团费除以总人数，得到AA制每人的团费，存到账单表。

（6）账单导出

在进入帐单列表界面后，点击导出账单，在BillController中进行跳转，实现本地账单下载。请求通过@GetMapping(“/bill/exportExcel”)找到BillController的exportExcel方法，先查出该团队的账单list，然后设置keys(字段名数组)，columnNames(excel表头)，两者是一一对应的，然后循环账单list, 填充表格，然后调用ExcelUtil.downloadExcel方法导出excel，底层是通过调用apache的POI组件实现的。

5.4团队合作设计过程实现（git进行下的版本管理）

计划利用git进行项目的版本管理，专项负责人已掌握通过vscode进行git的分支管理技术，例如git branch xx(创建分支) , git checkout xx(切换分支), git mergexx(项目合并)等操作.因为部分组员在git官网下载的64位版本被系统识别不适用，且尝试与组长沟通解决未果，所以本团队共同商议决定统一将自己实现的部分上交组长，由组长试运行检验，接着通过腾讯会议将已完成部分交付组员并部署下一步各自任务，让团队可以通过共同讨论，参与，实现前后端的功能衔接，最终分别于7.4，7.7，7.9发布三个版本的项目（最终链接已附在目录下方）。为弥补本团队因特殊原因无法完美实现git版本管理功能的遗憾，本团队对此项目的开发进行了开发日志管理，下附开发日志。