您的位置：首页 > 编程语言 > Java开发

用JSP+JavaBean制作简易计算器

2018-03-31 23:06 549 查看

一、起因

    刚刚起步学习JSP，迫于需要提交作业的关系，用了一下午的时间翻阅了各种资料，硬是把作业生生地撸出来。-__-!

      本程序基于JSP+JavaBean实现。

      开发环境：

          WIndows10 1709

            TomCat version 8.5

            JDK version 1.8.0_161

          Google Chrome 65

          Eclipse Java EE Version: Oxygen.2 Release (4.7.2)

          Hbuilder 9.0.2

        源代码：https://github.com/CheungChingYin/Calculator-JSP-version-

      欢迎各位大佬指点修正。

    这个程序并不够完善，只能实现加减乘除，还是两个数的运算。

二、效果图

1、初始界面

2、计算效果

（1）输入数字

（2）运算结果（输入框自动清空）

（3）被除数为0时会弹出Error界面

三、代码

calculator.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page errorPage="/error.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/calculator.css"/>
<title>简易计算器</title>
</head>
<body>
<div id="calculator">
<h1>简易计算器</h1>
<div id="display">
<p>
<jsp:useBean id="calculatorBean" class="top.cheungchingyin.calculator.Calculator"></jsp:useBean>
<jsp:setProperty property="*" name="calculatorBean"/>
<%
calculatorBean.calculator();
%>
计算结果：
<jsp:getProperty property="firstNum" name="calculatorBean"/>
<jsp:getProperty property="operator" name="calculatorBean"/>
<jsp:getProperty property="secondNum" name="calculatorBean"/>
=
<jsp:getProperty property="result" name="calculatorBean"/>
</p>

</div>
<form action="calculator.jsp" method="post">
<table id="calArea">
<tr>
<td><div id="word">第一个数:</div></td>
<td><input type="text" name="firstNum" id="editText"></td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<select name="operator" id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td><div id="word">第二个数</div></td>
<td><input type="text" name="secondNum" id="editText" /></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><input type="submit" name="put" id="buttom" value="提交"></td>
<td><input type="reset" name="clear" id="buttom" value="重置" /></td>
</tr>
</table>

</form>
</div>
</body>
</html>

calculator.css

@charset "UTF-8";
#calArea{
text-align: center;

}
#calculator{
width: 400px;
height: 600px;
background-color: #FFF;
position: absolute;
top: 20%;
left: 40%;
background: hsla(0,0%,100%,.3);
border-radius:20px ;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    z-index: 100;
    overflow: hidden;
    box-sizing: border-box;
}
#display{
width: 400px;
height: 200px;
background-color: #CCC;
margin-bottom: 20px;
font
}
#word{
font-size: 25px;
font: "微软雅黑";
}
#operator{
width: 100px;
height: 30px;
}
#buttom{
width: 80px;
height: 30px;
}
#editText{
width: 250px;
height: 30px;
}
h1{
text-align: center;
}
body{
background: url(../img/login-background.svg);
}
p{
text-align:center;
font-size: 25px;
font: "微软雅黑";
padding-top:90px;
}

Calculator.java

package top.cheungchingyin.calculator;

import java.math.BigDecimal;

public class Calculator {
private String firstNum = "0";
private String secondNum = "0";
private char operator = '+';
private String result;

public String getFirstNum() {
return firstNum;
}

public void setFirstNum(String firstNum) {
this.firstNum = firstNum;
}

public String getSecondNum() {
return secondNum;
}

public void setSecondNum(String secondNum) {
this.secondNum = secondNum;
}

public char getOperator() {
return operator;
}

public void setOperator(char operator) {
this.operator = operator;
}

public String getResult() {
return result;
}

public void setResult(String result) {
this.result = result;
}

public void calculator() {
BigDecimal firstnum = new BigDecimal(this.firstNum);
BigDecimal secondnum = new BigDecimal(this.secondNum);
switch (this.operator) {
case '+':
this.result = firstnum.add(secondnum).toString();
break;
case '-':
this.result = firstnum.subtract(secondnum).toString();
break;
case '*':
this.result = firstnum.multiply(secondnum).toString();
break;
case '/':
if(secondnum.doubleValue()==0) {
throw new RuntimeException("除数不能为0");
}else {
this.result = firstnum.divide(secondnum, 10,BigDecimal.ROUND_HALF_DOWN).toString();
}

default:
break;
}

}

}

error.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isErrorPage="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sorry!出错了!!</title>
</head>
<body>
Sorry!出错了!!<br>
<%= exception.getMessage() %>
</body>
</html>

四、代码介绍

1.关于JavaBean

JavaBeans是Java中一种特殊的类，可以将多个对象封装到一个对象（bean）中。特点是可序列化，提供无参构造器，提供getter方法和setter方法访问对象的属性。名称中的“Bean”是用于Java的可重用软件组件的惯用叫法。

JavaBean程序示例：

参考地址：http://www.runoob.com/jsp/jsp-javabean.html

package com.runoob;

public class StudentsBean implements java.io.Serializable
{
private String firstName = null;
private String lastName = null;
private int age = 0;

public StudentsBean() {
}
public String getFirstName(){
return firstName;
}
public String getLastName(){
return lastName;
}
public int getAge(){
return age;
}

public void setFirstName(String firstName){
this.firstName = firstName;
}
public void setLastName(String lastName){
this.lastName = lastName;
}
public void setAge(int age) {
this.age = age;
}
}

      把自己需要的设置的变量写出来，生成get/set方法，JavaBean程序可以包含除get/set之外的其他方法。

        访问JavaBean：

            <jsp:useBean> 标签可以在JSP中声明一个JavaBean，然后使用。声明后，JavaBean对象就成了脚本变量，可以通过脚本元素或其他自定义标签来访问。<jsp:useBean>标签的语法格式如下：

<jsp:useBean id="bean的名字" class="bean 编译的类" scope="bean 作用域"></jsp:useBean?

JavaBean用法Demo：

<jsp:useBean id="id" class="bean 编译的类" scope="bean 作用域">
<jsp:setProperty name="bean 的 id" property="属性名"
value="value"/>
<jsp:getProperty name="bean 的 id" property="属性名"/>
...........
</jsp:useBean>

      2.关于在Calculator.java的calculator()方法中使用BigDecimal类型计算而不是用float或double类型计算。

        由于计算机只会0和1，float是精度计算，所以计算结果容易失真，如0.2+0.02=0.22000000000000001，所以经过考虑使用网上推荐的BigDecimal类型计算，关于BigDecimal类型和float/double类型的区别，参考以下地址：

https://www.cnblogs.com/chenssy/archive/2012/09/09/2677279.html



      3.关于计算器块里面的毛玻璃效果实现。

          使用css实现，参考地址：http://www.cnblogs.com/ghost-xyx/p/5677168.htm

            在div中使用以下的css样式可以实现基本的毛玻璃效果

calculator.css

        background: hsla(0,0%,100%,.3);
border-radius:20px ;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
z-index: 100;
overflow: hidden;
box-sizing: border-box;

4.关于发现错误自动跳转到error页面的方法。

首先创建一个报错界面的JSP文件，如我项目中的error.jsp


a7b1
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isErrorPage="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sorry!出错了!!</title>
</head>
<body>
Sorry!出错了!!<br>
<%= exception.getMessage() %>
</body>
</html>

注意代码中高亮的地方，error页面需要在开头写一个page指令：

<%@ page isErrorPage="true" %>

让TomCat翻译的时候识别到该网页是error网页，如果不加上面这一句代码，exception对象是不能使用的（exception对象详情请查看此链接：https://www.cnblogs.com/xrong/p/3168616.html）

然后在可能会抛出异常的页面的JSP文件开头写上以下语句（calculator.jsp使用了这个语句）：

<%@ page errorPage="/error.jsp" %>

引用error页面，当出现异常的时候就会自动跳转到error.jsp页面。

五、写代码过程中遇到的坑

1.运行jsp文件出现404 not found.

(测试jsp页面的时候出现万恶的404）
原因：
网址没有放在项目的WebContent文件夹，如我一开始不小心把jsp文件放在了web Content文件夹下的WEB-INF下（图中的calculator1.jsp）

（记得在创建文件的时候不要太粗心了）
解决方法：
把JSP文件放置在WebContent文件夹下。

2.在运行jsp网页中出现了HTTP Status 500 错误。

HTTP Status 500 – Internal Server Error

Type Exception Report

Message file:/calculator.jsp(25,3) jsp:getProperty for bean with name 'propertyBean'. Name was not previously introduced as per JSP.5.3

Description The server encountered an unexpected condition that prevented it from fulfilling the request.

Exception

org.apache.jasper.JasperException: file:/calculator.jsp(25,3) jsp:getProperty for bean with name 'propertyBean'. Name was not previously introduced as per JSP.5.3
org.apache.jasper.compiler.Generator$GenerateVisitor.visit(Generator.java:1249)
org.apache.jasper.compiler.Node$GetProperty.accept(Node.java:1131)
org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2392)
org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2444)
org.apache.jasper.compiler.Node$Visitor.visit(Node.java:2450)
org.apache.jasper.compiler.Node$Root.accept(Node.java:471)
org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2392)
org.apache.jasper.compiler.Generator.generate(Generator.java:3664)
org.apache.jasper.compiler.Compiler.generateJava(Compiler.java:254)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:374)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:351)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:335)
org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:595)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:368)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:386)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:330)
javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)

Note The full stack trace of the root cause is available in the server logs.

Apache Tomcat/8.5.29

（在设置完JavaBean后出现此错误）
原因：
由于在设置<jsp:getProperty>时把name属性打错成“propertyBean”。

参考地址：https://stackoverflow.com/questions/20280203/name-was-not-previously-introduced-as-per-jsp-5-3

解决方法：

应该把name属性设置为useBean的id。

<jsp:getProperty property="firstNum" name="propertyBean"/>

（修改前）

<jsp:getProperty property="firstNum" name="calculatorBean"/>

（修改后）

六、已知Bug

1.运算完一次后点击重置时不能清空计算结果显示的公式。（可以用JS解决这个问题）

2.输入框输入小数点然后运算，抛出异常没有原因（显示为null）。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaBean JSP 简易计算器

相关文章推荐

新的分享

章节导航