用JSP+JavaBean制作简易计算器

JSP 专栏收录该内容
4 篇文章 1 订阅

一、起因

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

<%@ 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)。

  • 16
    点赞
  • 1
    评论
  • 45
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值