作业要求
团队阵容
组员职责分工
- 孙文慈:初始化前端Vue项目。博客内容编写。
- 陈序展:安装Vue CLI,element-ui以及环境的调试。博客内容编写。
- 冯凯:读取QQ聊天记录并且序列化成json格式;博客内容收集整理。
- 傅德泉:将处理完的json数据进行关键字提取。博客内容编写。
- 黄海山:GUI原型设计。博客内容编写。
- 黄乐兴:抽奖算法的编码实现。博客内容编写。
- <script>:前后端框架的搭建,程序功能的集成,代码调试与部署。博客内容编写。
github 的提交日志截图




程序运行截图
源码编译
- 从github将项目源码clone到本地

- 切换到项目所在目录并安装

- 本地运行项目

Release启动
https://github.com/codingkai001/live-project/releases/tag/0.1
解压后双击index.html
运行展示
- 抽奖界面首页

- 设置关键字、选择聊天日期、设置奖品以及设置过滤条件

- 根据设置筛选用户,展示抽奖结果

程序开发 / 运行环境
- 纯前端项目,开发语言为JavaScript,使用Vue + element-ui进行开发。
- 运行环境:Chrome 60+及以上版本。
GUI界面
- 首页

- 选择关键字&选择聊天日期

- 设置奖品列表、奖品个数、选择聊天记录、以及条件筛选

- 展示获奖名单

基础功能实现
- 实现完整GUI界面:项目GUI采用Vue+element-ui实现,界面简约大方。
- 设置抽奖事件、文案、规则
- 在输入框中输入抽奖关键词,将自动添加到关键字Label中,可自由添加或删除。
- 在文本框中输入抽奖活动文案。
- 使用简洁的日历界面可以方便的修改抽奖发言时段。
- 抽奖过滤规则
- 弹出框展示抽奖结果名单,显示获奖的成员昵称、账号和奖品,自动将已获奖的同学屏蔽,以免一个同学多次在同一个抽奖中获多个奖项。
抽奖算法设计思路
- 抽奖算法
使用多个维度设置抽奖算法,确保抽奖过程公平公正:
- 随机算法
我们使用的伪随机数算法是XORSHIFT128+,这个算法的基本原理如下:
uint64_t state0 = 1;
uint64_t state1 = 2;
uint64_t xorshift128plus() {
uint64_t s1 = state0;
uint64_t s0 = state1;
state0 = s0;
s1 ^= s1 << 23;
s1 ^= s1 >> 17;
s1 ^= s0;
s1 ^= s0 >> 26;
state1 = s1;
return state0 + state1;
}
关于这个算法,其实现的特点是内存小、计算速度快,但不具有密码学安全性。事实上,对于抽奖,我们也不需要这个。可以阅读相关论文,我们在此不再赘述:
Further scramblings of Marsaglia’s xorshift generators, Sebastiano Vigna, Universit`a degli Studi di Milano, Italy, http://vigna.di.unimi.it/ftp/papers/xorshiftplus.pdf
遇到的困难及解决方法
- 孙文慈
- 陈序展
- 第一次接触Vue,不懂得如何安装Vue CLI,以及进行项目的创建和插件的添加。通过查看官方文档,掌握相关方法解决。
- 对于git命令及相关操作不熟悉。上网查看教程,学习相关命令和操作解决。
- 冯凯
- 在聊天记录的处理过程中,存在许多杂乱的数据,这给数据的序列化带来许多麻烦。通过数据过滤,格式调整,然后再读取数据进行序列化操作。
- 傅德泉
- 黄海山
- 对墨刀原型工具运用不熟悉,通过查找墨刀设计教程,学习不熟悉的操作解决。
- 对github命令不熟悉。通过查找网上的github教程,学习各种基本命令解决。
- 黄乐兴
- 抽奖的流程较为复杂,无法马上编写出一个完整的抽奖算法。解决的方法是采用迭代的开发模式,一步一步增加抽奖的功能,并且在增加功能的同时考虑代码的耦合性,尽可能地让功能模块化,方便日后的维护。
- <script>
团队实战总结
由于团队成员在作业发布之后就开始组内分工,提前进行各个模块功能的开发准备,使得整个程序的开发进度比较顺利,在上机课上提前完成了作业的各项要求与程序的运行测试。因此,本次团队Github实战训练算是比较圆满地完成了任务,机会永远是留给有准备的人。
团队成员贡献比例
221500201 | 初始化前端Vue项目 | 7% |
131601207 | 安装Vue CLI,element-ui以及环境的调试 | 15% |
221600414 | 读取QQ聊天记录并且序列化成json格式 | 17% |
221600415 | 将处理完的json数据进行关键字提取 | 12% |
221600416 | GUI原型设计 | 15% |
221600417 | 抽奖算法的编码实现 | 16% |
221600439 | 前后端框架的搭建,程序功能的集成,代码调试与部署 | 18% |
团队成员PSP表格
PSP表格-孙文慈
Planning | 计划 | | |
• Estimate | • 估计这个任务需要多少时间 | 60 | 70 |
Development | 开发 | 60 | 70 |
• Analysis | • 需求分析 (包括学习新技术) | 0 | 0 |
• Design Spec | • 生成设计文档 | 0 | 0 |
• Design Review | • 设计复审 | 0 | 0 |
• Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
• Design | • 具体设计 | 0 | 0 |
• Coding | • 具体编码 | 40 | 60 |
• Code Review | • 代码复审 | 0 | 0 |
• Test | • 测试(自我测试,修改代码,提交修改) | 20 | 10 |
Reporting | 报告 | 0 | 0 |
• Test Report | • 测试报告 | 0 | 0 |
• Size Measurement | • 计算工作量 | 0 | 0 |
• Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 0 | 0 |
| 合计 | 60 | 70 |
PSP表格-陈序展
Planning | 计划 | | |
• Estimate | • 估计这个任务需要多少时间 | 120 | 120 |
Development | 开发 | 120 | 120 |
• Analysis | • 需求分析 (包括学习新技术) | 0 | 0 |
• Design Spec | • 生成设计文档 | 0 | 0 |
• Design Review | • 设计复审 | 0 | 0 |
• Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
• Design | • 具体设计 | 0 | 0 |
• Coding | • 具体编码 | 100 | 100 |
• Code Review | • 代码复审 | 0 | 0 |
• Test | • 测试(自我测试,修改代码,提交修改) | 20 | 20 |
Reporting | 报告 | 0 | 0 |
• Test Report | • 测试报告 | 0 | 0 |
• Size Measurement | • 计算工作量 | 0 | 0 |
• Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 0 | 0 |
| 合计 | 120 | 120 |
PSP表格-冯凯
Planning | 计划 | | |
• Estimate | • 估计这个任务需要多少时间 | 180 | 250 |
Development | 开发 | 180 | 250 |
• Analysis | • 需求分析 (包括学习新技术) | 0 | 0 |
• Design Spec | • 生成设计文档 | 0 | 0 |
• Design Review | • 设计复审 | 0 | 0 |
• Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
• Design | • 具体设计 | 0 | 0 |
• Coding | • 具体编码 | 120 | 200 |
• Code Review | • 代码复审 | 0 | 0 |
• Test | • 测试(自我测试,修改代码,提交修改) | 60 | 50 |
Reporting | 报告 | 0 | 0 |
• Test Report | • 测试报告 | 0 | 0 |
• Size Measurement | • 计算工作量 | 0 | 0 |
• Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 0 | 0 |
| 合计 | 180 | 250 |
PSP表格-傅德泉
Planning | 计划 | | |
• Estimate | • 估计这个任务需要多少时间 | 50 | 80 |
Development | 开发 | 50 | 80 |
• Analysis | • 需求分析 (包括学习新技术) | 0 | 0 |
• Design Spec | • 生成设计文档 | 0 | 0 |
• Design Review | • 设计复审 | 0 | 0 |
• Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
• Design | • 具体设计 | 0 | 0 |
• Coding | • 具体编码 | 30 | 50 |
• Code Review | • 代码复审 | 0 | 0 |
• Test | • 测试(自我测试,修改代码,提交修改) | 20 | 30 |
Reporting | 报告 | 0 | 0 |
• Test Report | • 测试报告 | 0 | 0 |
• Size Measurement | • 计算工作量 | 0 | 0 |
• Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 0 | 0 |
| 合计 | 50 | 80 |
PSP表格-黄海山
Planning | 计划 | |
· Estimate | · 估计这个任务需要多少时间 | 100 | 130 |
Development | 开发 | |
· Analysis | · 需求分析 (包括学习新技术) | 20 | 30 |
· Design Spec | · 生成设计文档 | 20 | 20 |
· Design Review | · 设计复审 | 20 | 20 |
· Coding Standard | · 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
· Design | · 具体设计 | 10 | 10 |
· Coding | · 具体编码 | 30 | 30 |
· Code Review | · 代码复审 | 0 | 0 |
· Test | · 测试(自我测试,修改代码,提交修改) | 10 | 10 |
Reporting | 报告 | |
· Test Repor | · Test Repor | 10 | 10 |
· Size Measurement | · 计算工作量 | 0 | 0 |
· Postmortem & Process Improvement Plan | · 事后总结, 并提出过程改进计划 | 10 | 10 |
合计 | | 120 | 130 |
PSP表格-黄乐兴
Planning | 计划 | | |
? Estimate | ? 估计这个任务需要多少时间 | 290 | 230 |
Development | 开发 | 270 | 220 |
? Analysis | ? 需求分析 (包括学习新技术) | 60 | 30 |
? Design Spec | ? 生成设计文档 | 40 | 30 |
? Design Review | ? 设计复审2 | 20 | 20 |
? Coding Standard | ? 代码规范 (为目前的开发制定合适的规范)6 | 30 | 30 |
? Design | ? 具体设计 | 30 | 30 |
? Coding | ? 具体编码 | 80 | 70 |
? Code Review | ? 代码复审 | 0 | 0 |
? Test | ? 测试(自我测试,修改代码,提交修改) | 10 | 10 |
Reporting | 报告 | 20 | 10 |
? Test Report | ? 测试报告 | 0 | 0 |
? Size Measurement | ? 计算工作量 | 0 | 0 |
? Postmortem & Process Improvement Plan | ? 事后总结, 并提出过程改进计划 | 20 | 10 |
| 合计 | 290 | 230 |
PSP表格-<script>
Planning | 计划 | | |
• Estimate | • 估计这个任务需要多少时间 | 170 | 150 |
Development | 开发 | 120 | 100 |
• Analysis | • 需求分析 (包括学习新技术) | 0 | 0 |
• Design Spec | • 生成设计文档 | 0 | 0 |
• Design Review | • 设计复审 | 0 | 0 |
• Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 0 | 0 |
• Design | • 具体设计 | 0 | 0 |
• Coding | • 具体编码 | 120 | 100 |
• Code Review | • 代码复审 | 0 | 0 |
• Test | • 测试(自我测试,修改代码,提交修改) | 20 | 10 |
Reporting | 报告 | 0 | 0 |
• Test Report | • 测试报告 | 0 | 0 |
• Size Measurement | • 计算工作量 | 0 | 0 |
• Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 0 | 0 |
| 合计 | 140 | 110 |