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




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

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

- 本地运行项目

Release启动
https://github.com/codingkai001/live-project/releases/tag/0.1html
解压后双击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.pdfgit
遇到的困难及解决方法
- 孙文慈
- 陈序展
- 第一次接触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 |