一、计划
1、随机产生一组（10个）算术题，可以使用循环，并剔除不够减的
2、把一组算术题显示在页面上，并同步计时
3、显示对错，给出提示，并统计分数（假设一题10分），最后再统计时间
二、需求分析
用户故事：
作为一名一年级小学生的家长，我希望制作一个出题软件，完成100以内的正整数的加减法题随机产生。以便减轻我的家庭负担。
具体设计：
本案例是用JavaWeb项目做的，采用前后端分离的技术，前端技术：js ，也引入的bootstrap插件，后端技术：使用的是Java语言，后端接收前端提交的参数，并做出判断，然后再保存数据到前端，做出响应，
为了开发的便捷，使用了Spring框架，因为前端提交的参数数据太多，引入了BeanUtils插件，一键封装数据。最后成功的把本案例部署到了云服务器上。本博客末尾会给出地址，感兴趣的话可以访问一下。
PSP阶段：
| 四则运算 | 实际花费时间 | 估计花费时间 |
| 计划 | 3 | 2.5 |
|
明确需求和其他相关因素，估计每个阶段的时间成本 |
2 | 3 |
|
开发 |
12 | 10 |
|
需求分析 |
5 | 4 |
|
生成设计文档 |
3 | 2.5 |
|
设计复审（和同事审核设计文档） |
2 | 1 |
|
代码规范（为目前的开发制定合适的规范） |
1 | 0.5 |
|
具体设计 |
5 | 6 |
|
具体编码 |
1 | 1 |
|
代码复审 |
0.5 | 0.5 |
|
测试（自测、修改代码、提交修改） |
1 | 1 |
|
测试报告 |
0.2 | 0.1 |
|
计算工作量 |
1 | 1 |
|
事后总结，并提出过程改进计划 |
0.5 | 0.5 |
三、具体编码
项目的架构：
1、cn.edu.hnzj.controller.java文件的内容
package cn.edu.hnzj.controller; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.beanutils.BeanUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; @Controller public class pageController { /** * 接收用户提交的参数 */ @RequestMapping("/getParam") public ModelAndView getParam(HttpServletRequest request,HttpServletResponse response) throws Exception{ //创建ModelAndView对象 ModelAndView mav = new ModelAndView(); //创建PagePow对象 PagePo po = new PagePo(); //使用populate方法一键封装，前台提交的所有的参数 BeanUtils.populate(po, request.getParameterMap()); Integer value1 = po.getValue1(); Integer value2 = po.getValue2(); Integer value3 = po.getValue3(); Integer value4 = po.getValue4(); Integer value5 = po.getValue5(); Integer value6 = po.getValue6(); Integer value7 = po.getValue7(); Integer value8 = po.getValue8(); Integer value9 = po.getValue9(); Integer value10 = po.getValue10(); Integer value11 = po.getValue11(); Integer value12 = po.getValue12(); Integer value13 = po.getValue13(); Integer value14 = po.getValue14(); Integer value15 = po.getValue15(); Integer value16 = po.getValue16(); Integer value17 = po.getValue17(); Integer value18 = po.getValue18(); Integer value19 = po.getValue19(); Integer value20 = po.getValue20(); Integer values1 = po.getValues1(); Integer values2 = po.getValues2(); Integer values3 = po.getValues3(); Integer values4 = po.getValues4(); Integer values5 = po.getValues5(); Integer values6 = po.getValues6(); Integer values7 = po.getValues7(); Integer values8 = po.getValues8(); Integer values9 = po.getValues9(); Integer values10 = po.getValues10(); // if( values1 ==0 || values2 ==0 ||values3 ==0 || values4 ==0 ||values5 ==0 || // values6 ==0 ||values7 ==0 ||values8 ==0 ||values9 ==0 ||values10 ==0) { // // mav.addObject("msg1", "此题您还没有做答!"); mav.setViewName("page.jsp"); return mav; // } int count =0;//记录答题分数,答对一题得10分 //第一题 if(value1+value2==values1) { //如果value1+value2=values1就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg1", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values1", values1); count+=10; }else { mav.addObject("msg1", "对不起，答错了!"); mav.addObject("values1", values1); } //第二题 if(value3+value4==values2) { //如果value3+value4=values2就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg2", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values1", values2); count+=10; }else { mav.addObject("msg2", "对不起，答错了!"); mav.addObject("values2", values2); } //第三题 if(value5+value6==values3) { //如果value5+value6=values3就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg3", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values3", values3); count+=10; }else { mav.addObject("msg3", "对不起，答错了!"); mav.addObject("values3", values3); } //第四题 if(value7+value8==values4) { //如果value7+value8=values4就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg4", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values4", values4); count+=10; }else { mav.addObject("msg4", "对不起，答错了!"); mav.addObject("values4", values4); } //第五题 if(value9+value10==values5) { //如果value9+value10=values5就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg5", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values5", values5); count+=10; }else { mav.addObject("msg5", "对不起，答错了!"); mav.addObject("values5", values5); } //第六题 if(value11-value12==values6) { //如果value11-value12=values6就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg6", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values6", values6); count+=10; }else { mav.addObject("msg6", "对不起，答错了!"); mav.addObject("values6", values6); } //第七题 if(value13-value14==values7) { //如果value13-value14=values7就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg7", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values7", values7); count+=10; }else { mav.addObject("msg7", "对不起，答错了!"); mav.addObject("values7", values7); } //第八题 if(value15-value16==values8) { //如果value15-value16=values8就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg8", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values8", values8); count+=10; }else { mav.addObject("msg8", "对不起，答错了!"); mav.addObject("values8", values8); } //第九题 if(value17-value18==values9) { //如果value17-value18=values9就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg9", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values9", values9); count+=10; }else { mav.addObject("msg9", "对不起，答错了!"); mav.addObject("values9", values9); } //第十题 if(value19-value20==values10) { //如果value19-value20=values10就返回 “恭喜您，答对了”，否则就返回"答错了!"。 mav.addObject("msg10", "恭喜您，答对了"); //用于把输入的结果保存到前台 mav.addObject("values10", values10); count+=10; }else { mav.addObject("msg10", "对不起，答错了!"); mav.addObject("values10", values10); } String str= "本次答题共得分为："; mav.addObject("count", str+count); mav.setViewName("page.jsp"); return mav; } }
WebContent下的page.jsp文件内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>四则运算</title> <link rel="stylesheet" href="bootstrap/bootstrap.min.css" type="text/css"/> <script src="bootstrap/bootstrap.min.css"></script> <link rel="stylesheet" href="./css/style.css" type="text/css"/> <script src="layui.js"/> <style> .center{ text-align: center; } input{ text-align: center; } </style> </head> <body> <h3 style="text-align: center;">四则运算</h3> <hr/> <!-- form表单用于随机生成10到算术题 --> <form action="${pageContext.request.contextPath}/getParam" method="POST" class="center"> <!-- 第一道算术题 --> <input type="text" style="width:40px;height:30px" name="value1" id="value1" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">+</b></span> <input type="text" style="width:40px;height:30px" name="value2" id="value2" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values1" value="${values1 }"> ${msg1 } <br/> <!-- 第二道算术题 --> <input type="text" style="width:40px;height:30px" name="value3" id="value3" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">+</b></span> <input type="text" style="width:40px;height:30px" name="value4" id="value4" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values2" value="${values2 }"> ${msg2 } <br/> <!-- 第三道算术题 --> <input type="text" style="width:40px;height:30px" name="value5" id="value5" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">+</b></span> <input type="text" style="width:40px;height:30px" name="value6" id="value6" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values3" value="${values3 }"> ${msg3 } <br/> <!-- 第四道算术题 --> <input type="text" style="width:40px;height:30px" name="value7" id="value7" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">+</b></span> <input type="text" style="width:40px;height:30px" name="value8" id="value8" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values4" value="${values4 }"> ${msg4 } <br/> <!-- 第五道算术题 --> <input type="text" style="width:40px;height:30px" name="value9" id="value9" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">+</b></span> <input type="text" style="width:40px;height:30px" name="value10" id="value10" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values5" value="${values5 }"> ${msg5 } <hr/> <!-- 第六道算术题 --> <input type="text" style="width:40px;height:30px" name="value11" id="value11" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">-</b></span> <input type="text" style="width:40px;height:30px" name="value12" id="value12" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values6" value="${values6 }"> ${msg6 } <br/> <!-- 第七道算术题 --> <input type="text" style="width:40px;height:30px" name="value13" id="value13" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">-</b></span> <input type="text" style="width:40px;height:30px" name="value14" id="value14" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values7" value="${values7 }"> ${msg7 } <br/> <!-- 第八道算术题 --> <input type="text" style="width:40px;height:30px" name="value15" id="value15" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">-</b></span> <input type="text" style="width:40px;height:30px" name="value16" id="value16" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values8" value="${values8 }"> ${msg8 } <br/> <!-- 第九道算术题 --> <input type="text" style="width:40px;height:30px" name="value17" id="value17" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">-</b></span> <input type="text" style="width:40px;height:30px" name="value18" id="value18" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values9" value="${values9 }"> ${msg9 } <br/> <!-- 第十道算术题 --> <input type="text" style="width:40px;height:30px" name="value19" id="value19" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">-</b></span> <input type="text" style="width:40px;height:30px" name="value20" id="value20" value="javascript:GetRandomn()" /> <span><b style="font-size: 22px;">=</b></span> <input type="text" style="width:40px;height:30px" name="values10" value="${values10 }"> ${msg10 } <br> <br> <br> <!-- <button class="btn btn-success">提交</button>--> <input type="submit" value="提交" /> <button class="btn btn-danger">重做</button> <!-- <input type="reset" value="重置"/> --> </form> ${count }<br/> <h2 style="font-family: 微软雅黑"></h2> </body> </html> <script type="text/javascript"> //获取随机范围内数值的函数 function GetRandom(n){ GetRandomn=Math.floor(Math.random()*n+1) } //开始调用，获得一个1-100的随机数 for(var i=1; i<21; i++){ GetRandom(50); document.getElementById('value'+i).value = GetRandomn; } //输出查看 // document.write(GetRandomn) //document.getElementById('value1').value = GetRandomn; //document.getElementById('value2').value = GetRandomn; //document.getElementById('value3').value = GetRandomn; </script> <script type="text/javascript"> var h2 = document.getElementsByTagName('h2')[0]; //获取时间，每隔1s，更新 var t1 = setInterval(function(){ var d1 = new Date(); var y = d1.getFullYear(); var m = d1.getMonth() + 1; var d = d1.getDate(); var h = d1.getHours(); var i = d1.getMinutes(); var s = d1.getSeconds(); //构造表示时间的字符串 var str = y + "年" + m +"月" + d + "日" + h + "时" + i + "分" + s + "秒"; h2.innerHTML = str; //写入到h2标签中 },1000); </script> <script type="text/javascript"> function f1(){ console.log('setTimeout'); } var t1 = window.setTimeout(f1,1000); console.log( t1 ); var btns = document.getElementsByTagName('button'); btns[0].onclick = function(){ clearTimeout(t1); } var t2 = setInterval(function(){ console.log( 'setInterval' ); },1500); btns[1].onclick = function(){ clearInterval(t2); } </script>
src下的springmvc-config.xml文件内容
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd"> <!-- 指定需要扫描的包 --> <context:component-scan base-package="cn.edu.hnzj.controller" /> <!-- 定义视图解析器 --> <bean id="viewResolver" class= "org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- 设置前缀 --> <property name="prefix" value="/WEB-INF/jsp/" /> <!-- 设置后缀 --> <property name="suffix" value=".jsp" /> </bean> </beans>
WebContent下的WEB-INF下的web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>siZeYunSuan</display-name> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc-config.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class> org.springframework.web.filter.CharacterEncodingFilter </filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
运行截图：
四、代码复审
本案例还有一些不足之处，例如代码有点冗余（用Ajax可能会好一些，后端在往前端传数据的时候，会省下一些代码。异步请求，局部刷新。），还有我是前5道题随机生成的加法，后五道题生成的减法，也就是说没有随机生成加减号，这后端再处理的时候就方便很都多。才想起来，忘了对负数进行剔除了，其实这个也简单，在后端进行一下简单的判断就行了。
五、测试
使用的是Debug模式，例如:前端在往后端传数据的时候，开启此模式，可以事半功倍。
六、测试报告
无
七、事后总结
刚开始接触这个作业本来打算随便做做应付一下，但后来发现，这些页面和后端的代码，还是有些费劲的。我本人是不太擅长做这些前端页面的，我做这个案例在前端花费的时间远大于后端的时间。就比如说那个随机数的生成我就是用最笨的方法弄的。确实完成这个案例，对我前端的技术有不少帮助，同时感觉到了我某些技术的薄弱的地方。
地址：http://39.105.232.183:8080/siZeYunSuan/page.jsp
本博客未经本人同意，禁止转载，否则后果自负。
