结对项目之网页版四则运算报告

前言

        这次我们做的是网页版的四则运算，采用前后端分离的方式来完成此次项目。在本次项目中我负责前端部分，我的搭档刘鹏负责后端部分。这次的结对项目对于我来说是一个很好的复习css和js的机会，很好地练习了ajax技术，对前后端分离也有了更好的理解。

一、项目地址

代码仓库地址：

陈慧妮：https://github.com/Chenhn110/Calcu/tree/master/CalculateProject

刘    鹏：https://github.com/LeonP3ng/CalculateWeb

服务器项目地址：http://rammsteinlp.cn:8080/CalculateProject/

后台搭档刘鹏博客地址：https://blog.csdn.net/Leon_Theprofessional/article/details/89187137

二、项目功能描述

      本项目是网页版的四则运算出题软件，此软件为学生用户提供以下功能：

      1、定制出题要求。每次出题时，学生用户在页面输入学号和所需生成题目的要求：题目数量，算式数值范围（仅整数运算实现了），题目中运算符个数，题目中是否包含括号，题目中是否含分数。输入完要求后再点击开始生成题目按钮即可生成题目（不包含答案）。

      2、做题功能。出题完毕后，学生用户可以答题并开始计时。

      3、判题功能。学生用户作答完毕后点击在线验证答案即可查看正确答案、错题、正确率和用时。

      4、下载功能。学生用户可以点击下载题目按钮将本次所做的题目和答案下载到本地。

三、项目界面设计及功能测试

      界面设计：

      本次项目我只制作了一个index.html页面（特别简单但不美观的页面），所有操作均在本页面完成。

      功能测试：

1、输入要求并生成题目：

2、做完题后在线验证答案

3、点击下载题目

 四、部分代码展示

1、向后台请求数据并将题目部分展示在页面，答案部分先存储在数组 ansList 中以备验证答案时使用

 $.ajax({
                type: "POST",
                url: "http://152.136.68.17:8080/CalculateProject/hello",
                data: data, 
                dataType: 'JSON', 
                 success: function(data){
                    console.log(data);
                    console.log(data.questions);
                    var list = data.questions; 
                    for(var i in list){
                        for(var key in list[i]){
                            //console.log(key);
                            //console.log(list[i][key]);
                            ansList[i] = list[i][key];
                            //console.log(ansList);
                            var idx = Number(i) + 1; 
                            quesitonsHtmlArr += ('<li>' + '题' + idx + ":  " + key.toString() + ' = ' + "<input class='answer' type='text'/>"  + '</li>' + '<br>');
                            answersHtmlArr += ('<li>' + '题' + idx + '答案： ' + list[i][key].toString() + '</li>' + '<br>');
                        }
                    }
                    document.getElementById("quesText").innerHTML = quesitonsHtmlArr;
                },
                error:function(){
                    alert("error!");
                }

            });

2、 验证答案部分

将用户输入的答案和出题时获取到的存储在 ansList 内的答案进行对比，若相同则将题目序号加入正确题目中，否则加入错误题目中

$("#Ans").click(function(){
    $("#ansText").show();
    $(".ansTips").hide();
     var classes = document.getElementsByClassName("answer");
        for(var i = 0; i < classes.length; i++) {
            results[i] = classes[i].value;
            //console.log(results[i]);
        }
        
        var right = "正确题目编号：";
        var fault = "错误题目编号：";
        var rating = "正确率为： ";
        var time = "用时： ";
        var rNum = 0; 
        var tNum = ansList.length;
        for(var i = 0;i<results.length;i++) {
            //console.log(results[i]);
            //console.log(ansList[i]);
             if(results[i] == ansList[i]) {
                right += i+1 + ",";
                rNum += 1;
            } else {
                fault+= i+1 + ",";
            }
        }
        time += $.trim($("#Ctime").val()) + "s";
        //console.log(rNum);
        //console.log(ansList.length);
        rating += Math.round(rNum/tNum*10000)/100.00+"%";
        document.getElementById("ansText").innerHTML = answersHtmlArr;
        document.getElementById("rights").innerHTML = right;
        document.getElementById("faults").innerHTML = fault;
        document.getElementById("rating").innerHTML = rating;
        document.getElementById("time").innerHTML = time;
});

 3、计时器

出题后从 0 开始计时，验证答案时停止及时。

function timedCount(){
    document.getElementById('Ctime').value = c;
    c = c+1;
    t = setTimeout("timedCount()",1000);
}

function stopCount(){
    
     clearTimeout(t);
    
 }

 

五、项目结对

1、结对过程。

        项目开始前，我和刘鹏两个人先商量了采用何种方式，最终选择了前后台分离方式。然后提前约定好需要传递哪些数据和参数，才开始动手做。前期我们俩按照约定好的功能模块各司其职，后期合项目时期，刘鹏把做好的接口给我，然后一起解决出现的各种bug。

        粗心地我因为忘记把传递参数改成与后端搭档传回来的一致，所有刚开始怎么也请求不到数据，后来还是细心的搭档发现才及时改正。又因为我对js和ajax都没有很精通，所以我在请求到数据后提取需要的数据在页面展示的时候就遇上了对我而言的大麻烦。我第一次接触map传值，所以取值的时候怎么取也取不我想要的数据，在多次尝试仍旧失败的情况下，我无奈地去找搭档，希望他换一种传值方式传给我（毕竟我太菜了），在沟通过程中，我很感谢他的迁就，也很感谢他在接受我新的请求时，仍旧努力为我寻求着解决问题的方法。最后，在刘鹏的帮助和自己的尝试下，我终于成功地将想要的数据在页面上显示出来了（真的是激动到落泪）。

2、结对感受

        在结对项目中，两个人的沟通真的至关重要，提前协商好各自需要些什么功能再动手操作会省事许多。最后的最后，实名感谢我耐心的技术大佬搭档刘鹏同学！有一个好的搭档让我每次遇到问题时都不那么暴躁，最终在顺（Kan）利（Ke）完成任务的同时也巩固了我前端的基础知识。