结对编程1（201421123070，201421123073）

题目描述：

咱们在我的做业1中，用各类语言实现了一个命令行的四则运算小程序。进一步，本次要求把这个程序作成GUI（能够是Windows PC 上的，也能够是Mac、Linux，web，手机上的），成为一个有基本功能、必定价值的程序。在下面的功能需求中实现两个：

1. 记录用户的对错总数，程序退出再启动的时候，能把之前的对错数量保存并在此基础上增量计算。
2. 有计时功能，能显示用户开始答题后的消耗时间。
3. 界面支持中文简体/中文繁体/英语，用户能够选择一种.

简单的分工说明：（两人组）

毕川：

1. 负责算法的设计，中缀表达式的计算。（缘由）在第一次我的做业中，我舍友说：“我点了你的连接，我输入了10000道题......诶，你的服务器好像崩了！！！！！！，用户体验太差”吸收上次的教训，决定改变一下本身用程序生成式子和计算结果这种方式。因此咱们讨论决定用题库的方式解决速度慢的问题。本来想在网上找一下题库的，找了好久都只有题没有答案，因此决定用算法本身算答案。
2. 记录用户的对错总数，程序退出再启动的时候，能把之前的对错数量保存并在此基础上增量计算。

我：

1. 界面支持中文简体/中文繁体/英语，用户能够选择一种.
2. 有计时功能，能显示用户开始答题后的消耗时间。

最后封装成一种替代第一次做业中生成题目的方法（也就是从数据库中取）。

实现过程：（我）

1. 界面支持中文简体/中文繁体/英语，用户能够选择一种

对于这题，我画了一个简单的表面流程图，描述了这个切换语言的过程。（无技术基础看）

关于具体实现过程参考下面的执行过程：（有技术基础看）

流程图分解说明：

（1）语言单选框点击事件的发生，使用的是jquery中的click方法触发

（2）lanaguage参数设置为三个，也就是单选框的value值，分别对应简体中文simpleChinese，繁体中文traditionalChinese,英语English。

（3）使用ajax异步传输

/*
firstPage1:表示第一个页面从上往下第一个文字语言须要动态变化的位置
firstPage2:表示第一个页面从上往下第二个文字语言须要动态变化的位置
result.firstPage1：表示从后台获取的对应语言对应位置的配置文件内容
result.firstPage2：表示从后台获取的对应语言对应位置的配置文件内容
*/

<script type="text/javascript">
$(function(){
    var lanaguage1=$('input:radio:checked').val();
    $.ajax({
        dataType:"json",
        type:"post", 
        data : {
            lanaguage : lanaguage1
        },
        url : "LanguageServlet?page=firstPage",
        success : function(result) {
            $("#firstPage1").html(result.firstPage1);
            $("#firstPage2").val(result.firstPage2);
        }
        }); 
 });
</script>

（4)根据传入的语言参数，用properties对象的方法加载对应的语言配置文件的内容

因为涉及三种语言，因此设置了三个配置文件，分别是simpleChinese。properties，traditionalChinese.properties，English.properties.大概的内容以下图

/*
    加载语言配置文件代码
*/

if(lanaguage.trim().equals("simpleChinese")){
    InputStream  inputStream= Test.class.getClassLoader().getResourceAsStream("simpleChinese.properties");
    prop.load(inputStream);     ///加载属性列表
}       
else if(lanaguage.trim().equals("traditionalChinese")){
    InputStream  inputStream= Test.class.getClassLoader().getResourceAsStream("traditionalChinese.properties");
    prop.load(inputStream);     ///加载属性列表
}       
else{
    InputStream  inputStream= Test.class.getClassLoader().getResourceAsStream("English.properties");
    prop.load(inputStream);     ///加载属性列表           
}
    String firstPage1=prop.getProperty("firstPage1");
    String firstPage2=prop.getProperty("firstPage2");

（5）获取内容转化为JSON并返回页面

/*
PrintWriter pw = response.getWriter();
JSON用到的包是阿里巴巴的fastJSON.jar
*/

    Map<String,String>map=new HashMap<>();
    map.put("firstPage1", firstPage1);
    map.put("firstPage2", firstPage2);
    String json=JSON.toJSONString(map);
    pw.print(json);//返回数据

（6）在用jquery中的html方法在对应的地方填充JSON数据也就是第（3）中success成功后中的方法。

以上就是功能一的所有描述。

2. 有计时功能，能显示用户开始答题后的消耗时间。

（1）对于这一功能我也画一个很是简单流程图表示

（2）具体实现过程

（该功能没有使用数据库，利用cookie功能实现存储，存储时间为一年）

①设置了一个TimerReturn类来表示（便于数据处理）

②前端js主要时间代码（百度而来，修改了一点点，本应附上连接后面没找到（PS：若有侵权告知删除））

/*
timeShow为显示时间的位置。

document.getElementById("time").value=two_char(h) + ":" + two_char(m) + ":" + two_char(s);

因为时间不在答案提交的form中，因此使用form中添加<input type="hidden" id="time" name="time">进行所需的时间提交
*/
<script>
    function two_char(n) {
        return n >= 10 ? n : "0" + n;
    }
    function time_fun() {
        var sec=0;
        setInterval(function () {
            sec++;
            var date = new Date(0, 0)
            date.setSeconds(sec);
            var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
            document.getElementById("timeShow").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s);
            document.getElementById("time").value=two_char(h) + ":" + two_char(m) + ":" + two_char(s);
        }, 1000);      
    }
</script>

③后台进行返回结果的处理，把结果session而且把结果存储到cookie中。

String time=(String)request.getParameter("time");       
    List<TimerReturn>timeList=(List<TimerReturn>) request.getSession().getAttribute("timeList");
    if(timeList==null){
        timeList=new ArrayList<>();
    }
    TimerReturn timeReturn=new TimerReturn(list.size()+"",time,list.size()-count+"",count*1.0/list.size()*100+"%");
    timeList.add(timeReturn);
    request.getSession().setAttribute("flag", "true");//控制前端时间记录的表头是否显示，若是没有获取到flag则不显示
    request.getSession().setAttribute("timeList", timeList);

/*
写入Cookie
*/
    boolean flag=true;//用于断定是不是第一存入cookie，true表示第一次存
    for(int i=0;i<c.length;i++){
        if(c[i].getName().equals("timeList")){
    String totalTimeList=c[i].getValue()+"M"+perTimeList;//用M拼接每次的结果
    Cookie c1=new Cookie("timeList", totalTimeList);
    c1.setMaxAge(3600*24*30*12);//设置cookie存在时间单位s
    response.addCookie(c1);
    flag=false;
        }
    }
    if(flag==true){
    Cookie c1=new Cookie("timeList", perTimeList);
    c1.setMaxAge(3600*24*30*12);
    response.addCookie(c1);
    }

④前端用c标签获取

<c:forEach var="Result" items="${timeList}">
    <c:if test="${!empty Result.time}">
    <tr>
        <td>${Result.totalCount}</td>
        <td>${Result.time}</td>
        <td>${Result.errorCount}</td>
            <td>${Result.correctRate}</td>
    </tr>
    </c:if>
</c:forEach>

效果动图:

附上具体的网页连接：我也本身试试

结对细节

事前讨论的代码规则

1. 变量命名的规则：以变量的功能命名，使用完整的英文描述，采用驼峰命名法。
2. 函数传参过程当中尽可能采用形式传值
3. 花括号“{}”不容许省略，即便只有一段代码。
4. 使用括号“()”来强调运算符优先级。
5. 记得格式化代码，eclipse里面Ctrl+Shilft+F

代码共同提交记录

实验总结

• 实验方面的不足：
  • 虽然出题的速度能够比第一次做业快不少，可是没有找不少题库（可是有时间应该是不成问题的）只有390+题。
  • 前端技术差，没有好的排版（也没有找一个好的样式）。
  • 本能够不跳转页面都用ajax的，而后没有改。
• 结对方面不足：
  • 虽然以前一块儿合做过，可是仍是缺少更多的交流，和事前的讨论，以致于在编程方面都修改了某个东西，后面整合出了问题。后面仍是把计时和错误的统计结合在一块儿。
  • 太缺乏一块儿开发的经历，之前都是一我的作完。除非一些项目结构，每一部分没有什么联系的一块儿开发还能够。
  • 命名方面仍是须要事先规定，有的命名仍是不够清晰，以致于队友看不懂。
  • 简单的项目我认为1+1不必定大于1，可是项目稍微大的，1+1必定大于2，两我的的考虑总比单独的两我的更周全。
• 对队友的见解：
  • 合做中没有遇到意见不一致，讨论的结果都是两我的赞同的。
  • 队友的实力是很是强的，并且速度快，合做过程当中遇到问题一块儿讨论，而后交流本身的意见，说出本身方案的优缺点，而后选择一种较好的方案一致经过。
  • 若是要说建议的话，在后面合做中遇到不合了才能提出，此次合做上没有遇到什么不合的地方。
  • 对队友说的话就是：合做愉快。
• 遇到的问题：
  • 在cookie拼接的时候原本用了||分割每次要存储的结果。但是在java提取时，用split（）分割时被当成了特殊符号，一直没有成功，后来通过检查发现，最后用一个不会涉及到的字符M来分割，就能够了。
  • 在数据库写入时，一直没有写入成功。也没有错误，苦恼了好久，后面重启了一下IDE，而后就。。。。。成功了。这种莫名其妙的问题常常遇到。

代码仓库：https://github.com/hts-technology/hts.git