结对项目-四则运算 “软件”之升级版

 一.前提

（1）作业来源：https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2213

（2）GitHub地址：https://github.com/llgeill/llg-web-class

（3）调试环境：IntelliJ IDEA ，CHORME浏览器

二.作业要求

（1）基本要求

• 自动生成题目，单个题目最多不能超过4个运算符，操作数小于100。
• 用户可以输入答案
• 若用户输入答案正确，则提示正确；若答案错误，则提示错误，并要提示正确答案是多少。

（2）扩展要求

1. 用户答题结束以后，程序可以显示用户答题所用的时间
2. 用户可以选择出题的个数（最多不能超过5个题目），答题结束可以显示用户答错的题目个数和答对的题目个数
3. 用户在第一次答题时，需要用户输入用户名，用户下次启动后，程序需要记住用户前一次输入的用户名 
4. 程序可以设置答题时间，时间设置为整数，单位为秒，最大不能超过120秒，若超过了答题时间未答题，则提示：时间已到，不能答题。

（3）结对成员

       姓名：李利光 学号：201606110062  博客园地址：https://www.cnblogs.com/liliguang/

       姓名：黄扬帆 学号：201606110079  博客园地址：https://www.cnblogs.com/gzcchyf/

三.时间估算

        结对项目软件过程耗时估计表与统计表

       （时间单位：小时）

PSP2.1	个人软件实现阶段	预计时间	实际时间
Planning	计划	1	2
· Estimate	估计这个任务需要多少时间	10	15
Development	开发	10	10
· Analysis	需求分析 (包括学习新技术)	1	1
· Design Spec	生成设计文档	1	1
· Design Review	设计复审	0.5	0.5
· Coding Standard	代码规范	1	1
· Design	具体设计	1	1
· Coding	具体编码	1	1
· Code Review	代码复审	0.5	0.5
· Test	测试（自我测试，修改代码，提交修改）	1	1
Reporting	报告	1	1
·	测试报告	1	1
·	计算工作量	2	2
·	并提出过程改进计划	2	2

四：工作详情

    （一）工作:

               黄杨帆：          设计和编写界面交互部分、设计计时器、保存用户名

               李利光：          后台代码随机生成题目、前后端数据交互、判断正误、计算得分  

    （二） 部分功能代码介绍：

    （1）题目获取功能：通过ajax异步获取一定数量的四则运算习题（前台）

getReq: function () {
    //发送get请求
    this.$http.get('/getOperation?count=' + this.count).then(function (res) {
        this.items = res.body;
    }, function () {
        console.log('请求失败处理');
    });
},

　　    题目获取功能：通过ajax异步获取一定数量的四则运算习题（后台） 

@RequestMapping("getOperation")
    public List<Operation> getOperation(int count){
        List<String> resultList=new ArrayList<>();
        List<String> problemList=new ArrayList<>();
        List<Integer> signNumberList=new ArrayList<>();
        fourArithmeticOperation.outPutData(count,resultList,problemList,signNumberList);
        List<Operation> list=new ArrayList<>();
        for(int i=0;i<resultList.size();i++){
            Operation operation=new Operation();
            operation.setAnswer(resultList.get(i));
            operation.setProblem(problemList.get(i));
            operation.setSignConunt(signNumberList.get(i));
            list.add(operation);
        }
        return list;
    }

    （2）用户提交功能：首先经过校验机制判断是否输入答案，之后进行答案的比对运算出答对题数量和最终得分        

rejectAnswer: function () {
    this.stopTime = true;
    this.get_answer_flag = true;
    this.currentShowResult = true;
    var itemClone = this.items;
    for (var i = 0; i < itemClone.length; i++) {
        if (itemClone[i].user_answer == itemClone[i].answer) {
            itemClone[i].isCorrect = false;
            var item = JSON.parse(JSON.stringify(itemClone[i]));
            this.items.splice(i, 1, item);
            this.currentCorrectCount++;
        } else {
            itemClone[i].isCorrect = true;
        }
    }

},
post: function () {
    //校验表单
    var forms = document.getElementById('valitForm');
    if (forms.checkValidity() === true) {
        forms.classList.remove('was-validated');
        this.rejectAnswer();
    } else {
        forms.classList.add('was-validated');
    }
},

五.软件演示

软件入口地址：http://39.108.158.15/login.html

1.首先进行用户登陆（无需密码）

2.选择随机生成的习题数量

3.将最终答案填入相对应的答案框即可

4.点击提交后即可看到正确答案，并且还有剩余时间、答对习题数、最终得分

六：结对照片

七:收获与感悟

             从这次小项目的合作来看，明确分工和一定的团队交流是非常重要的，可以达到事半功倍的效果。在这软件编写的过程中，尝试了一下前端框架vue，虽然能完成任务，但是代码是非常混乱的，这个原因可能是vue的不熟练所导致的，所以今后还是要花时间多学习一下vue。对于团队合作来说，如果将项目快速的分割成一个个任务单位是需要思考的。