复利计算器

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

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>

<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 曹嘉琪阅读(1135) 评论(2) 编辑收藏举报

刷新页面返回顶部

曹嘉琪

为尊严而战

复利计算器

公告