Followers——团队编程实战

Followers_ 团队 2022-04-23 23:50:50
这个作业属于哪个课程福大软工实践W班
这个作业要求在哪里软工实践——团队编程实战
这个作业的目标开发一个抽奖平台
其他参考文献《构建之法》、CSDN

目录

  • 一、项目地址
  • 二、Gitcode 的提交日志截图
  • 三、程序运行环境
  • 四、功能实现思路描述
  • 五、程序截图说明
  • 六、组员职责分工
  • 七、组员贡献度
  • 八、合作中遇到的困难及解决方法
  • 九、PSP表格

一、项目地址

仓库地址：https://gitcode.net/SoftwareEngineering2022ClassW/followers/teampractice4/-/tree/master
访问地址：http://47.95.151.202/index.html#/

二、Gitcode 的提交日志截图

img

img

img

img

img

img

img

img

img

img

commit次数统计

学号commit次数
05190411220
22190022313
2219002257
2219003054
22190030910
2219003254
2219003314
22190033412
2219004136
22190042417

三、程序运行环境

本项目为web项目，搭载在阿里云服务器上。

  • 前端：
    开发工具为Visual Studio Code，开发语言为Ajax、js、css、HTML，框架为vue；运行环境为各类浏览器（谷歌浏览器、火狐浏览器等）。

  • 后端：
    开发工具为IntelliJ IDEA，开发语言为java，框架为springboot；运行环境为java环境。

四、功能实现思路描述

本次开发基本完成基础功能要求，部分实现附加功能1和附加功能2。

  • 前端设计实现过程
    前端采用vue框架，并且引入了element ui。
    通过axios请求与后端数据进行交互。

  • 后端设计实现过程
    后端采用springboot框架，集成了mybatis对数据库进行操作，项目结构图如下：

在这里插入图片描述

在这里插入图片描述

数据库创建了4张表：activity（抽奖活动信息表）、admin（管理员表）、user（用户表）、participant（参与活动信息表）。

activity：

在这里插入图片描述

participant:

在这里插入图片描述

user:

在这里插入图片描述

admin:

在这里插入图片描述

这里以实现返回抽奖活动信息为例子，来介绍如何通过springboot框架向前端提供接口。
首先在数据库里建立一张表格activity，里面存储了所有的抽奖活动信息。
然后创建一个POJO（Plain Ordinary Java Objects）实体类Activity，每一个成员变量对应数据库里的字段，实现相应的构造函数、set、get方法等。
接着创建一个dao(Data Access Object)ActivityDao类，该类为接口。Dao层实际上就是定义了简单的CRUD操作，相当于sql中的单条select,insert,upate,delete语句。这里定义了一些数据库的操作方法，主要是根据条件查找，返回相应数据。该接口通过mybatis来实现，创建一个ActivityMapper.xml，通过mybatis的语法实现对数据库的操作。
再创建service层：ActivityService接口和ActivityServiceImpl实现类。service层就是具体业务的实现，一般多次组合dao层的方法(dao层方法达到了重用目的)。
最后是控制层Controller，创建了ActivityController，在这里调用service类的方法，返回数据供前端调用。通过注解@RequestMapping("/activity")，前端可以访问该接口获取数据。

  • Quartz实现定时开奖任务

Tigger能够被持久化，这样即使在发布后，任务依然能够执行，不需要重新设定，同时也能够轻松暂停恢复触发器。SpringBoot中的定时任务都需要新建一个Java类并继承QuartzJobBean、实现executeInternal()。

  • Scheduler：Quartz 中的任务调度器，通过 Trigger 和 JobDetail 可以用来调度、暂停和删除任务。
  • Trigger：Quartz 中的触发器，是一个类，描述触发 Job 执行的时间触发规则。
  • JobDetail：Quartz 中需要执行的任务详情，JobExecutionContext参数支持对定时任务的参数传递，通过jobDataMap的get方法即可取出参数。
  • Job：Quartz 中具体的任务，包含了执行任务的具体方法。是一个接口，只定义一个方法 execute() 方法，在实现接口的 execute() 方法中编写所需要定时执行的 Job
JobDetail jobDetail = JobBuilder.newJob(Draw.class)
                .withIdentity(String.valueOf(activityID))
                .usingJobData("id", activityID) //传入参数
                .storeDurably()
                .build();

        Trigger trigger = TriggerBuilder.newTrigger()
                .forJob(jobDetail)//关联上述的JobDetail
                .withIdentity(String.valueOf(activityID))//给Trigger以ID起名
                .withSchedule(SimpleScheduleBuilder.simpleSchedule().withRepeatCount(0))// 重复次数 执行一次不重复
                .startAt(date) //定时运行
                .build();
  • 登录

后端接受前端传来的表单参数，在用户表中查找是否有相关记录；若数据库中存在该用户且密码正确，则返回登录成功的信息以及用户的姓名、手机号、地址等信息。

    public Map<String,Object> login(@RequestBody Map<String,String> user, HttpServletRequest req){
        Map<String,Object> result=new HashMap<>();
        String phone=user.get("username");
        String password=user.get("password");
        User userInfo=userService.selectUserByPhone(phone,password);
        if(userInfo!=null) {
            HttpSession session = req.getSession();//先创建session
            session.setAttribute("user", userInfo);
            result.put("msg", "success");
            result.put("name", userInfo.getName());
            result.put("phone", userInfo.getPhone());
            result.put("address", userInfo.getAddress());
            result.put("ip", IpUtil.getIpAddr(req));
        }
        else{
            result.put("msg", "failed");
        }
        return result;
    }

前端建立store.js并引入vue和vuex，在接受到登录成功的信息后，将数据传入store.js中，并将vuex实例暴露出去，则用户中心等页面即可通过store获取并显示出用户的基本信息。

    if(res.data.msg==="success"){
      this.$store.commit('setUserData', {
        name: res.data.name,
        phone: res.data.phone,
        address: res.data.address,
      })
      this.$router.push('/homePage');

通过session中的removeAttribute方法销毁用户的session，实现账号的登出。

public Object logout(HttpSession session){
        session.removeAttribute("user");
        return null;
    }

用户通过填写以下表单发布活动，发布抽奖时可以选择奖品等级，如二等奖、三等奖：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="开始时间" required>
            <el-col :span="11">
            <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="10">
            ...
    </el-form>

点击发布活动的按钮后，将表单的信息通过axios传到后端，后端通过insert语句将活动信息加入activity表中。

    public Object addActivity(@RequestBody Map<String,Object> activity) throws ParseException {
        Activity activity1=new Activity();
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        activity1.setFirst((String) activity.get("first"));
        activity1.setSecond((String) activity.get("second"));
        activity1.setThird((String) activity.get("third"));
        ...
        activityService.addActivity(activity1);
        return null;
    }

后端通过数据库查询语句得到所有的活动信息列表，返回给前端：

    public List<Activity> list() {
        List<Activity> list = activityService.getActivityList();
        return list;
    }

五、程序截图说明

img

提示输入用户名、密码，普通用户的用户名即为注册时的手机号，管理员为固定用户名：admin，密码：123456。

img

点击去注册进入注册界面。

img

确认密码可以对密码进行二次验证。

img

注册成功弹出提示信息。

img

登录成功后进入主页面。

img

点击抽奖活动展示活动列表。

img

点击发布抽奖，基础设置部分可以进行活动名称，开始时间，结束时间，参与人数，活动概要等设置。

img

奖品设置进行相关设置。

img

消息通知页面通知用户参与的抽奖信息。

img

用户中心提示基础信息和中奖信息。

img

管理员中心后端接口暂时没有实现，只是在前端填充了一些静态数据。

六、组员职责分工

学号工作内容
051904112后端小组长；数据库设计；后端部分（26%）：开奖功能完善。
221900223数据库设计；后端部分（18%）：开奖功能初步实现。
221900225数据库设计；前端部分（22%）：登录注册页面的实现。
221900305前端部分（18%）：代码审查、界面设计。
221900309数据库设计；后端部分（28%）：登录注册接口的实现。
221900325前端部分（14%）：代码审查、界面设计。
221900331组长；数据库设计；前端部分；博客撰写；后勤等。
221900334数据库设计；后端部分（28%）：开奖功能完善。
221900413数据库设计；前端部分（22%）：消息中心、用户中心、管理员中心页面的实现。
221900424前端小组长；数据库设计；前端部分（22%）：抽奖活动、发布抽奖页面的实现、前端架构。

七、组员贡献度

学号贡献度
05190411212.4%
2219002238.2%
22190022510.46%
2219003057.74%
22190030912.2%
2219003256.02%
2219003318.86%
22190033412.2%
22190041310.46%
22190042411.46%

贡献度（100%）= 前端（43%）+ 后端（40%）+ 数据库设计（8%）+ 博客（6%）+ 组长/小组长（3%）

八、合作中遇到的困难及解决方法

051904112

困难：

  1. 之前没怎么当过组长，对组员的了解和分工还不是很合理和清晰。编程的时候也感觉到后端的分工好像没那么容易，还需要多琢磨一下。
  2. 设计数据库没有理论上那么简单，如何在短时间内把具体的客户需求设计成合理的数据信息是挺难的一件事，在后面编码的时候也确实遇到了许多需要和组员协调的地方。
  3. 在向数据库插入数据时报错， Data too long for column 'password' 。

解决方法：

  1. 下次尽力在开始的时候明确合理分工，争取高效率、及时的和队友交流
  2. 理论还需要更多的实战经验去完善，在设计数据库之前也要很好的和组员们沟通后续的使用，避免在后面还出现数据不一致的情况
  3. 通过提示信息发现是数据库中的字段太短了，后面将它设长了

221900223

困难：

刚接触springboot，只会一些比较基本的，不是很会用,然后后端接口设计的时候不太明白要返回什么。

解决方法：

查询资料以后知道了前后端分离后端应该返回给前端数据形式。

221900225

困难：

前几次作业没有进行前后端分离，前端请求方面遇到一些困难，登录注册页面表单验证方面也比较繁琐。

解决方法：

通过百度和csdn查询，表单验证方面理清了验证的思路，添加合理的判断进行验证，巩固了vue的知识。

221900305

困难：

首先在技术上，刚学习了vue框架不久，并且没有进行过多的实战，导致一些看似简单的编码在动手实现时都会遇到预料之外的问题。例如，在项目启动时经常遇到This dependency was not found的问题，老是会忽略一些必要的依赖。有时vue中修改了数据，但视图却无法更新。还遇到了状态码400，并提示用户名和密码错误。
在团队合作上，这算是第一次的多人团队作业，从一开始就和自己做有很大的不同。一开始就用了许多时间在查询资料和工作的分配上，在编码过程中也经常遇到各个不同分工组员之间要相互协调的情况，所以我认为在团队合作上是比较困难的。

解决方法：

在技术上，编码过程中更加注意细节，时刻注意所写代码是否需要依赖。对于400的报错，经百度查询资料以及前后端的核对后发现，是由于前后端字段类型不一致。在合作上，我们为了解决团队协作问题，在各个时间段都找了可以一起编码的场所，面对面使得效率更高，沟通更充分。

221900309

困难：

  1. 提前学习过springboot的登录系统，不过在实战的时候还是出了许多问题。
  2. 启动项目时遇到Tomcat connector in failed state的错误
  3. 在和前端的队友对接的时候，就会发现刚开始的沟通不一致，导致了代码完成后 会出现冲突。

解决方法：

  1. 多和组员沟通和协调，主要是数据一致性的问题
  2. 发现是NI server占据了8080端口
  3. 更加意识到团队合作的重要性，以后在编程前会先协调好前后端的需求。

221900325

困难：

由于能力有限，刚开始花了不少时间在学习框架上。然而在连接数据库时，还是遇到了数据库无法正确加载的问题。

解决方法：

在团队协作过程中，积极学习，并且求助能力较强的队友来帮助自己更快的提高。最后查了很多资料，发现是yml文件中没有正确添加数据库配置信息。

221900331

困难：

  1. 面对未经历过的任务，任务细节不明确，困难未知，成员技术掌握情况不够了解，分工难以进行。
  2. 所需技术不熟悉，不能够较快上手编写。
  3. 工作场地有限，妨碍了成员的交流合作。

解决方法：

  1. 先是召开了一个接近1小时的短会，迅速地商量此次任务的内容详情，商讨了如何完成此次任务，确定了每个人大致的工作方向。
  2. 在有限的时间内，花了一定的时间去学习技术视频，更多的是对症下药，在网络上寻求问题的解答以及寻求队友的帮助。
  3. 进行了场外联系，早上进行短会后立马组织组员进行进餐，12点的时候就提前到机房办公，充分利用机房的便利。

221900334

困难：

  1. 时间太紧迫，没办法很好的处理功能质量与数量之间的关系。
  2. 对接口的测试不熟练，当写完模块需要测试时，花费了较多的时间。
  3. 出现错误Spring Boot Error: java.lang.NoSuchMethodError

解决方法：

  1. 以首先完成老师所要求的功能为主，质量方面没有做到最优
  2. 通过查询资料，学习使用辅助软件测试接口
  3. 查看出错类中是否缺少某方法。查询了官网的信息发现：当移除parent依赖时，需要增加spring-boot-dependencies的依赖。因此在pom.xml中新增依赖。

221900413

困难：

由于开发项目经验欠缺，对于一天内的项目实训确实遇到了不少的麻烦，在前端方面对于vue的一些基础没有掌握好，导致在实现的时候出现不少的bug。

解决方法：

通过百度搜索解决问题，在团队的帮助下解决困难。

221900424

困难：

  1. 一天的时间感觉很紧，所以我对于界面细节的处理就没有把控的很好。
  2. 在和后端交接的时候，返回值和传入参数没有处理的很好。

解决方法：

  1. 想着先完成任务，没有考虑太多的细节，界面差不多简介明了就好。
  2. 在确定这些参数的时候就先和后端沟通好，多问一下队友的意见，不然就会经常有大家的想法不一致然后浪费许多时间修改写好的代码的问题。

九、PSP表格

051904112

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划2030
• Estimate• 估计这个任务需要多少时间2030
Development开发595770
• Analysis• 需求分析 (包括学习新技术)120150
• Design Database Table• 设计数据库表3075
• Design Review• 设计复审2025
• Design• 具体设计2030
• Coding• 具体编码360450
• Code Review• 代码复审1520
• Test• 测试（自我测试，修改代码，提交修改）3020
Reporting报告2020
• Size Measurement• 计算工作量1010
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1010
合计635820

221900223

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划1530
• Estimate• 估计这个任务需要多少时间1530
Development开发615755
• Analysis• 需求分析 (包括学习新技术)6090
• Design Database Table• 设计数据库表4575
• Design Review• 设计复审1520
• Design• 具体设计3050
• Coding• 具体编码420480
• Code Review• 代码复审1520
• Test• 测试（自我测试，修改代码，提交修改）3020
Reporting报告2020
• Size Measurement• 计算工作量1010
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1010
合计650805

221900225

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划2030
• Estimate• 估计这个任务需要多少时间2030
Development开发490720
• Analysis• 需求分析 (包括学习新技术)6080
• Design Database Table• 设计数据库表6075
• Design Review• 设计复审1520
• Design• 具体设计3090
• Coding• 具体编码300420
• Code Review• 代码复审1015
• Test• 测试（自我测试，修改代码，提交修改）1520
Reporting报告2025
• Size Measurement• 计算工作量105
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1020
合计530775

221900305

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划1530
• Estimate• 估计这个任务需要多少时间1530
Development开发475625
• Analysis• 需求分析 (包括学习新技术)60120
• Design Database Table• 设计数据库表4575
• Design Review• 设计复审1515
• Design• 具体设计3030
• Coding• 具体编码300360
• Code Review• 代码复审1010
• Test• 测试（自我测试，修改代码，提交修改）1515
Reporting报告2010
• Size Measurement• 计算工作量105
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划105
合计510665

221900309

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划3030
• Estimate• 估计这个任务需要多少时间3030
Development开发680785
• Analysis• 需求分析 (包括学习新技术)120120
• Design Database Table• 设计数据库表6075
• Design Review• 设计复审2020
• Design• 具体设计3045
• Coding• 具体编码400480
• Code Review• 代码复审2020
• Test• 测试（自我测试，修改代码，提交修改）3025
Reporting报告2525
• Size Measurement• 计算工作量1010
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1515
合计735840

221900325

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划1530
• Estimate• 估计这个任务需要多少时间1530
Development开发445505
• Analysis• 需求分析 (包括学习新技术)90120
• Design Database Table• 设计数据库表5075
• Design Review• 设计复审1010
• Design• 具体设计3030
• Coding• 具体编码240240
• Code Review• 代码复审1010
• Test• 测试（自我测试，修改代码，提交修改）1520
Reporting报告2010
• Size Measurement• 计算工作量105
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划105
合计480545

221900331

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划2530
• Estimate• 估计这个任务需要多少时间2530
Development开发495580
• Analysis• 需求分析 (包括学习新技术)120120
• Design Database Table• 设计数据库表6075
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)3030
• Design Review• 设计复审1515
• Design• 具体设计4560
• Coding• 具体编码180200
• Code Review• 代码复审3060
• Test• 测试（自我测试，修改代码，提交修改）1520
Reporting报告150180
• Size Measurement• 计算工作量3030
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划120150
合计670790

221900334

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划3030
• Estimate• 估计这个任务需要多少时间3030
Development开发710775
• Analysis• 需求分析 (包括学习新技术)120120
• Design Database Table• 设计数据库表6075
• Design Review• 设计复审2020
• Design• 具体设计4560
• Coding• 具体编码420450
• Code Review• 代码复审2020
• Test• 测试（自我测试，修改代码，提交修改）3030
Reporting报告2520
• Size Measurement• 计算工作量1010
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1510
合计765825

221900413

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划2530
• Estimate• 估计这个任务需要多少时间2530
Development开发495670
• Analysis• 需求分析 (包括学习新技术)4560
• Design Database Table• 设计数据库表4575
• Design Review• 设计复审1520
• Design• 具体设计60120
• Coding• 具体编码300360
• Code Review• 代码复审1515
• Test• 测试（自我测试，修改代码，提交修改）1520
Reporting报告2015
• Size Measurement• 计算工作量105
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1010
合计540715

221900424

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划2030
• Estimate• 估计这个任务需要多少时间2030
Development开发640730
• Analysis• 需求分析 (包括学习新技术)6060
• Design Database Table• 设计数据库表6075
• Design Review• 设计复审1520
• Design• 具体设计120120
• Coding• 具体编码360420
• Code Review• 代码复审1015
• Test• 测试（自我测试，修改代码，提交修改）1520
Reporting报告3550
• Size Measurement• 计算工作量1520
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划2030
合计695810
...全文
441 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
道阻且长，行则将至
本轮教学将团队实战调整到团队作业第四次，这样团队成员之间的磨合已经完成，实战中由于协作方面的问题大大减少，最终本轮实战的成果也比较高：Mobius——git编程实战、Followers——团队编程实战、幸存者小队——...
Taro开发系统化实战学习
Taro的故事开始于 2017 年，由京东的技术团队打造，最初是为了让各大电商平台的应用能够同时在微信小程序、H5、App 等多个平台运行。想象一下，开发者只需写一套代码，能在多个平台上运作，这简直就是编程界的...
自然语言处理怎么最快入门？
研究团队，是否有著名团队和人士参加。如果以上几个方面的调研结论不是太清晰，作为初学者可能不要轻易进入。 在确认进入一个领域之后，按照建议一所述，需要找到本领域的开源项目或者工具，仔细研究一遍现有的主要...
常春藤学院风的PFP NFTs你见过没？#社交NFT
Ivy Boys NFT每天在Discord和Twitter上...今天，我们要介绍一个新项目——Ivy Boys NFT，拥有了这个NFT就等于有了新世代的时尚会籍。01时尚爱好者必备——IVYBOYSIvy Boys NFT是一组唯一的超型格的常春藤风格的NFT。...
从技术专家到行业意见领袖
案例一：李某某——从AI研究员到行业意见领袖李某某是一位在人工智能领域拥有丰富研究经验的研究员。专业积累：李某某在AI领域发表了多篇高影响力的论文，参与了多个国家级科研项目，积累了深厚的技术背景和研究成果...
2022年福大-软件工程、实践-W班

142

社区成员

922

社区内容

发帖
与我相关
我的任务
社区描述
2022年福大-软件工程;软件工程实践-W班
软件工程 高校
社区管理员
  • FZU_SE_teacherW
  • 丝雨_xrc
  • Lyu-
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章