结对编程项目总结与分析

成员：周世焕 王知往

 　　项目部署的网址：https://shihuan.site/OnlinePaper

一、实现的功能清单

       1、实现登录注册，手机验证

　　2、实现登录状态下的密码修改和注销

　　3、实现用户选择题目类型和数量，生成试卷

　　4、实现试题去重

　　5、实现试题上下题切换

　　6、实现改卷功能获取得分

 

二、UI的设计

　　UI在这个项目中是个重要的点，最终决定采用Web来设计UI，主要注重各个功能的逻辑，设计方面大多是使用Bootstrap模板化了。主要功能页面如下：

 

       

 

     这个框架的好处是一开始就是移动端优先的，所以在手机浏览器上也具有很好的浏览体验，如图：

     

 

三、复用个人项目的模块

　　个人项目的出题模块，大部分功能一样，上次的出题模块比较依赖于整个项目，不够独立出来。这次直接将整个出题划为单独的模块，只需接受（试题类型，试题数量）两个参数便能返回整套试题。出题功能就完成了

    

 

 

四、整体架构

      采用了JavaWeb去部署这个项目。

 

      前端页面（注册、登录、考试、修改密码）四个主要页面：

         

 

　　　　增设了一个历史试卷查看功能，能够看到后台给出的试卷和答案是否具有正确性

 

 

       后端Servlet(发送验证码，注册，登录，出题，算分，修改密码)

        

 

 

 

     图片解释：

　1、注册时会用到： SendSMS发送短信，并将验证码打入Session；之后用户提交表单后：RegisterModel 将提取表单信息，写入数据库

　 2、登录用到LoginModel，提取表单信息比对数据库，验证通过将登录状态写入Session

　3、考试时会用到   MathModel按需生成试卷、PaperModel将生成的试卷与Caculator交互算出答案、PaperModel将试卷及答案存入数据库并返回给用户

     4、改分，用到CorrectModel从数据库按用户名及日期为索引，取得试卷答案与表单上交的答案比对，返回分数

 

五、题目的结果计算如何实现

    这是一个很关键的点。一开始采用了后缀表达式计算，一些简单的的表达式可以准确计算，但是我们设计的算法考虑问题不够完整，对一些比如带平方、根号、三角运算符比较的多的表达式计算会出问题。一开始很多天都在想这个问题，时间成本比较高，为了在正确性和时间成本上取舍，决定采取其它可行方案。

    之后室友的一个想法是采用脚本计算，将试题转换为合法表达式，用编译环境自带的脚本运算函数 eval() 去计算合法表达式。这基本上就成了我们最终采用的计算手段。通过将不符合规则的试题字符串转换为合法表达式，再通过eval()运行这个表达式得出结果。

 

        String str = "标准化后的试题"
　　　　 ScriptEngineManager manager = new ScriptEngineManager();
        ScriptEngine se = manager.getEngineByName("js");
        String result  = "";
        
        try {
            DecimalFormat df = new DecimalFormat("0.00");
            Object obj = se.eval(str);        //使用javascript引擎执行表达式
            if(obj instanceof Integer){
                result = String.valueOf((int)obj);
            }else {
                result = df.format(obj).toString();
            }
        } catch (ScriptException e) {
            e.printStackTrace();
        }

 

 

 

 

六、关于HTML和JS方面的

　　 因为前端采用了Web，所以不能绕过这两个知识点。

 

       数据更换比较频繁，这是当前项目一个特点。从后端拿到数据(Json封装)后显示出来，这是UI界面最基本最重要的功能。

       实现这个目的的一个想法是  使用Ajax技术发送服务器请求获取试卷题目数据，然后通过$('#paper').html("试题") 在试题显示处替换获取到的题目；

       另外一种方法是采用动态数据绑定，Vue前端。 直接将试题显示区域和变量data绑定起来，data变，显示就会变。代码段如下

 

        

 

 　　代码说明：

 　   Success: function() 处是和服务端的PaperModel 交互成功后要执行的操作。这里就是将返回的数据da 赋值到Vue实例vm中，这个vm绑定了html的显示区域的内容（如下所示）

 

　  　

 

 

     这里的{{  }} 里面是vm的数据，实现绑定了题号和试题内容。这样就可以简单做到数据的动态显示

 

七、总结

　一、这次结对编程整个流程比较顺畅，同事王知往在我的编码时间内发现我的很多Bug并指导我进行修改，比如下面这些

　　1、注册页面的验证码需要再60s内不能重新发送多次，不然会导致短信提供商把手机号码拦截；

　　　解决方案：加时间检测，禁用发送按钮。

 

　　2、还有登录页面、注册页面、重新修改页面等界面不够友好，很多时候执行操作没有反馈，不知道成没成功；

　　　解决方案：每次表单提交，都应该给予一定反馈，可能是简单的alert弹出框，也可以是在输入框旁边告知用户输错了

 

    二、通过观察王同学的编程活动，学习到了他的一些优点，学以致用

　　　1、非常勤奋。在这次编程项目中，他的激情很高涨，很多时候都编程到晚上十二点，我在晚上精神不是很好，所以我白天投入更加多，就是为了跟上团队的步伐。

　　 2、技术和学习能力比较高。我们一开始要用短信的时候，他提前就了解过了，这在后来的开发活动中，加快了我们使用短信接口的学习过程。

　　 3、至于具体的编码技巧和习惯，不同人的编码过程有很大不同。所以意识到和王同学的编程习惯不同，能帮助我提升。在以后的学习过程中我要更加注重学习编程标准，把编码习惯尽可能靠近业界标准，这还需要很长的路要走，但起码现在要开始了。

 

    最后，能和王知往同学共同努力完成了一个项目还是非常开心。当然这只是起点，是一个很好的起点，未来还有团队项目等着我们去奋斗，互帮互助、共同成长！