复利计算器
一.界面的设计:页头、面板、页尾
1.标题:用bootstrap进行设计
2.计算面板 (计算本金,计算复利) 这个功能模块如果用不同的表单进行处理比较简单,可是我选择了异步请求处理,因为自己这方面比较薄弱,而且在项目开发中是经常用到,接此机会提高自己的能力
3.页尾 :比较简单,只需写明一些相关的信息,一种习惯
二.效果图
三.问题与解决:
1. 问题:页面经常出现404页面不存在的错误
解决:因为Javaweb一有错误的代码或者逻辑不对,就不能访问到相应的页面,只能通过打断点进行调试或者输出打印语句进行查找错误,由于自己对打断点操作不是很熟练,我更多时候是通过system.out.printf()输出语句一步步进行找错误
由于最近刚刚接触了struts2框架,想试着用struts2的相关内容写这个小作业,但是struts2的标签写jsp页面经常报错,采用C标签库就不会出现错误,所以在整个小作业中是没有用到struts2的标签
2. 问题:点击按钮,如何默认将相应的框禁用
解决:用异步请求,在这个过程中,知道如何将进行异步请求传递参数并且拿到action提交过来的值
function doChose(chose) { $.ajax({ url:"<%=path%>/Calculator/Calculator1?chose=" + chose, success : function(chose) { alert(chose); // alert(chose.trim() == "1"); if (chose.trim() == "2") { document.all.compoundAmount.disabled = true; $("#compoundAmount").val( "最终计算结果"); // document.all.compoundAmount.value = "最终计算结果"; // alert(chose+"74544ff"); document.all.principal.disabled = false; // document.all.principal.value = ""; $("#principal").val(""); $("#year").val(""); $("#annualRate").val(""); } else if (chose.trim() == "1") { document.all.principal.disabled = true; // document.all.principal.value = "最终计算结果"; $("#principal").val("最终计算结果"); document.all.compoundAmount.disabled = false; // document.all.compoundAmount.value = ""; $("#compoundAmount").val(""); $("#year").val(""); $("#annualRate").val(""); } } }); }
3. 页面刷新问题:在问题三的异步请求方法中加入js刷新页面代码,点击“本金”按钮之后点击“复利”按钮,页面刷新会将“默认将相应的框禁用”的功能闪退了,设置的“默认将相应的框禁用“秒现秒退”
解决:因为之前用了window.location.reload();是正个页面刷新,所以才用下面的解决方案
$("#compoundAmount").val( "最终计算结果"); document.all.principal.disabled = false; $("#principal").val(""); $("#year").val(""); $("#annualRate").val("");
4. 初始化页面的问题:默认选中“本金”按钮
解决:只要在<input>标签中加入checked="checked",还有输入框禁用设置,注意异步请求不要用submit提交数据,这样会提交两次,而是用“button”调用方法进行异步提交
<input type="radio" name="chose" id="benjin" onclick="doChose('1')" value="1" checked="checked"/><label for="benjin">本金</label>
<input type="radio" name="chose" id="benjin" onclick="doChose('1')" value="1" checked="checked"/><label for="benjin">本金</label>
<input type="radio" name="chose" id="fuli" value="2" onclick="doChose('2')"/><label for="fuli">复利</label>
<div>存入本金: <input name="principal" id="principal" disabled="true" value="最终计算结果"/></div>
<br>
<div>存入年利率:<input name="annualRate" id="annualRate"/>%</div>
<br>
<div>存入年限:<input name="year" id="year"/></div>
<br>
<div>复利终值: <input name="compoundAmount" id="compoundAmount" /></div>
<br>
<div><input type="button" value="计算" onclick="principal.disabled == true?onBenjin('1'):onFuli('2')"/></div>
三.总结
1. 如果是页面出错,可以按f12进行检查;如果是后台出错,通过控制台检查错误
2. tomcat记得清理缓存,不然会带来一些错误
3. 在写小作业的过程中,会经常不注意小细节,有时页面出差经常是小细节出错,但是又很难找不出来,比如input标签常常忘记添加结束标志“/” js方法经常忘记写括号
4. 用struts2,在jsp页面嵌套其他的jsp需要用struts2.xml配置文件配置,而不是原来学习简单web开发的中的直接forward到其他页面,而是要通过action去找到其他页面,跟熟练掌握程度有关,如果再加强相关的训练,将会很自然的往相应的思路想
5. 学会调试程序解决问题是我目前需要提高的能力之一
6. 要学会用百度!!
四. 疑问
1. struts2标签在开发中是否比较少用到?
2. 我写异步请求是否是正确的逻辑思路?是否会有其他更好的思路?我的代码有哪些需要优化的?