用JSP+JavaBean制作简易计算器

一、起因

        刚刚起步学习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" %>








	

		
简易计算器
		

			

				
				
				<%
					calculatorBean.calculator();
				%>
				计算结果：
				
				
				
				=
				
			
			
		
		

			

				

					
第一个数:
					

				
				
 
				

					

						
							+
							-
							*
							/
						
					
				
				
 
				

					
第二个数
					

				
				
 
				

					

					

				
			
			
		
	

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" %>







Sorry!出错了!!

	<%= exception.getMessage() %>

四、代码介绍

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

        JavaBean用法Demo：

   
   
   ...........

        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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isErrorPage="true" %>







Sorry!出错了!!

	<%= exception.getMessage() %>

注意代码中高亮的地方，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后出现此错误）

原因：

    由于在设置时把name属性打错成“propertyBean”。

        

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

解决方法：

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

（修改前）

（修改后）

六、已知Bug

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

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