java写一个简易计算器 javabean写一个简单计算器

转载

mob6454cc7966b9 2023-11-27 21:59:50

文章标签 java写一个简易计算器 JavaBean JSP 简易计算器 java 文章分类 Java 后端开发

一、起因

刚刚起步学习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）输入数字

java写一个简易计算器 javabean写一个简单计算器_java_02

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

java写一个简易计算器 javabean写一个简单计算器_java_03

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

java写一个简易计算器 javabean写一个简单计算器_java_04

三、代码

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>

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

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

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

使用css实现，参考地址：

在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对象详情请查看此链接：）

calculator.jsp使用了这个语句）：

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

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

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

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

java写一个简易计算器 javabean写一个简单计算器_JSP_05

(测试jsp页面的时候出现万恶的404）

原因：

网址没有放在项目的WebContent文件夹，如我一开始不小心把jsp文件放在了web Content文件夹下的WEB-INF下（图中的calculator1.jsp）

（记得在创建文件的时候不要太粗心了）

解决方法：

把JSP文件放置在WebContent文件夹下。

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

HTTP Status 500 – Internal Server Error

Type

Message

Description

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

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）。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：星环大数据售前架构师认证星环大数据是什么

下一篇：typescript 多个类型传参给一个类型 typescript 多重继承

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯