复利计算器

一.界面的设计:页头、面板、页尾

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>&nbsp;&nbsp;

<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. 我写异步请求是否是正确的逻辑思路?是否会有其他更好的思路?我的代码有哪些需要优化的?

 

posted @ 2016-03-13 01:04  曹嘉琪  阅读(1134)  评论(2编辑  收藏  举报