一.前提
(1)作业来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2213
(2)GitHub地址:http://github.com/P-and-A/learningGit
(3)调试环境:IntelliJ IDEA ,CHORME浏览器
二.作业要求
(1)基本要求
- 自动生成题目,单个题目最多不能超过4个运算符,操作数小于100。
- 用户可以输入答案
- 若用户输入答案正确,则提示正确;若答案错误,则提示错误,并要提示正确答案是多少。
(2)扩展要求
- 用户可以选择出题的个数(最多不能超过5个题目),答题结束可以显示用户答错的题目个数和答对的题目个数。
- 可以出表达式里含有负整数(负整数最小不小于-100)的题目,且负数需要带括号,用户输入的结果不用带括号。如: 2*(-4) = -8
- 程序可以设置皮肤功能,可以改变界面的颜色即可。
- 程序可以出单个整数阶乘的题目:如:4!=24。
(3)结对成员
姓名:梁秋华 学号:201606120036 博客园地址:https://home.cnblogs.com/u/liangqiuhua/
姓名:廖超凡 学号:201606120044 博客园地址:https://www.cnblogs.com/grate/
三.时间估算
结对项目软件过程耗时估计表与统计表
(时间单位:小时)
PSP2.1 |
个人软件实现阶段 |
预计时间 |
实际时间 |
Planning |
计划 |
10 |
16 |
· Estimate |
估计这个任务需要多少时间 |
10 |
17 |
Development |
开发 |
10 |
10 |
· Analysis |
需求分析 (包括学习新技术) |
0.5 |
0.5 |
· Design Spec |
生成设计文档 |
0.5 |
0.5 |
· Design Review |
设计复审 |
0.2 |
0.2 |
· Coding Standard |
代码规范 |
0.1 |
0.1 |
· Design |
具体设计 |
0.2 |
0.2 |
· Coding |
具体编码 |
1 |
1 |
· Code Review |
代码复审 |
0.5 |
0.5 |
· Test |
测试(自我测试,修改代码,提交修改) |
1 |
1 |
Reporting |
报告 |
0.5 |
0.5 |
· |
测试报告 |
0.5 |
0.5 |
· |
计算工作量 |
1 |
1 |
· |
并提出过程改进计划 |
1 |
1 |
五.工作详情
(一)工作:
梁秋华: 设计前期的界面设计部分、使用计时器、按键、按钮、测试输入答案
廖超凡: 架设服务器、数据库录入题目、前后端数据交互、判断正误、统计成绩
(备注:后期根据工作进度与实际情况有一定的改动)
(二) 部分功能代码介绍:
(1)时间功能:进入系统后进行倒计时的操作,有一定的时间限制,到时间后会自动结束答题
已取消该功能
(2)题目选择显示功能:可以通过下拉框来选择题目显示的数目,此处可以从后端服务器数据库中获得题目
methods:{ get:function(){ //发送get请求 var num = $('#itemNum').val(); this.ischeck = false; //刷新批改状态 this.$http.get('get_questions/'+this.selected).then(function(res){ this.msg=res.body; },function(){ console.log('请求失败'); }); // 页面初始化 $.each( $('[data-index]'), function(index,item){ var a = item.children; a[1].value=""; if(a[2].style.visibility="visible"){ a[2].style.visibility="hidden"; } }); },
(3)提交功能:通过检验用户录入的数据与服务器数据库中的数据是否一致来分辨对错
check:function () { $.each( $('[data-index]'), function(index,item){ var a = item.children; if(a[1].value!=vm.msg[index].ans){ a[2].style.visibility="visible"; vm.wrongNum = vm.wrongNum +1; } }); this.ischeck = true; }
(4)换肤功能:更换颜色
change:function () { this.skinchange=!this.skinchange; },
(5)vue Onload:
window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:[], selected:'', wrongNum:0, ischeck: false, skinchange:false, }, watch: { // 如果 `question` 发生改变,这个函数就会运行 selected: function () { this.get(); } },
(三)运行与测试结果
图1.回答并统计成绩
图2.有正误扣分提示
图3.选择题目数量并打印
图4.换肤功能演示
图5.阶乘操作
(四)结对照片
六.收获与感悟
由这个作业去学习了例如JavaScript、vuejs、Bootstrap等新知识,同时也同时也回顾了前面学习的CSS、HTML等知识。这些知识无论是对当前学习还是后面工作都有很大的好处。在结对项目中遇到问题可以和同伴协作搞定问题,可以一起讨论问题,感受到了结对项目的好处。一起结对解决工作问题是我认为这里最好的一点,大家都有自己的能力去解决问题。有人指导的情况下可以让我好好学习到未知知识。在商讨后可以有大家的各自理解,可以好好一起完成这个项目,我觉得结对结对项目有一定的优势。通过结对项目提高自己的一些业务能力或者交流能力,最重要是技术上的能力,为以后的工作打好基础。