（javaweb）用三种方式制作网页版简易计算器（JSP,JSP+javaBean,JSP+javaBean+Servlet）

xiaoniu667

已于 2022-01-26 00:34:09 修改

阅读量7.6k

点赞数 16

文章标签： java 开发语言后端

于 2021-12-29 12:48:00 首次发布

本文链接：https://blog.csdn.net/xiaoniu667/article/details/122212868

版权

第一种：在jsp中用语句块<%%>写java代码，最后用表达式<%=%>展示出来。这种方式耦合性太高了，不利于维护。

calculator.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>计算器</title>
</head>
<body style="text-align:center;">
<%
	String firstNum=request.getParameter("firstNum");
	String secondNum=request.getParameter("secondNum");
	String str=request.getParameter("operator"); 
	if(firstNum==null||secondNum==null)
		{firstNum="0";secondNum="0";
		str="+";
		}
	float first=Float.parseFloat(firstNum);	
	float second=Float.parseFloat(secondNum);
	
	
	char operator=str.charAt(0);	
	String result="";

	
	switch (operator) {
	case '+':{
		result=(first+second)+"";			
		break;
	}
	case '-':{
		result=(first-second)+"";	
		break;
	}
	case '*':{
		result=(first*second)+"";	
		break;
	}			
	case '/':{
		if(second==0){
			out.println("被除数不能为0；");//throw new RuntimeException("被除数不能为0；");
		}
		else
		result=(first/second)+"";	
		break;
	}
	default:
		throw new RuntimeException("运算符有误！");
	}
%>
	<br/>*********************************<br/>
		计算结果是：
		<%=first %><%=operator %><%=second %>
		=
		<%=result %>
			
	<br/>*********************************
	<br>
	<br/>
	<form action="/calculator.jsp" method="post">
	<center>
	<table  width="60%" border="1" >
		<tr>
			<td colspan="2">简单计算器(JSP)</td>
			
		</tr>
		<tr>
			<td>第一个参数</td>
			<td>
				<input type="text" name="firstNum">
			</td>
		</tr>
		<tr>
			<td>操作符</td>
			<td>
				<select name="operator">
					<option value="+">+</option>
					<option value="-">-</option>
					<option value="*">*</option>
					<option value="/">/</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>第二个参数</td>
			<td>
				<input type="text" name="secondNum">
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="计算">
			</td>
			
		</tr>
		
	</table>
	</center>
</form>
</body>
</html>

第二种方式：jsp+javajean 这种方式会进一步降低耦合性。

实体类：CalBeans:

package com.ag;


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

	public CalBeans() {
		super();
	}

	public CalBeans(String firstNum, char operator, String secondNum) {
		super();
		this.firstNum = firstNum;
		this.operator = operator;
		this.secondNum = secondNum;
		
	}

	public String getFirstNum() {
		return firstNum;
	}

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

	public char getOperator() {
		return operator;
	}

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

	public String getSecondNum() {
		return secondNum;
	}

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

	public String getResult() {
		return result;
	}

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

	//
	public void calculate() {
		float first = Float.parseFloat(this.firstNum);
		float second = Float.parseFloat(this.secondNum);
		switch (this.operator) {
		case '+':
			this.result = (first + second) + "";
			break;
		case '-':
			this.result = (first - second) + "";
			break;
		case '*':
			this.result = (first * second) + "";
			break;
		case '/':
			if (second == 0) {
				throw new RuntimeException("被除数不能为0！");
			} else {
				this.result = (first / second) + "";
				break;
			}
			default:
				throw new RuntimeException("运算符有误！");
		}
	}
}

Cal.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>Insert title here</title>
</head>
<body style="text-align:center;">
<jsp:useBean id="calBean" class="com.ag.CalBeans"></jsp:useBean>
<jsp:setProperty property="*" name="calBean"/>

<%
	try{
	calBean.calculate();
	}catch(Exception e)	{
		out.write(e.getMessage());
	}
%>
<br/>*********************************<br/>
		计算结果是：
		<jsp:getProperty property="firstNum" name="calBean"/>
		<jsp:getProperty property="operator" name="calBean"/>
		<jsp:getProperty property="secondNum" name="calBean"/>
		=
		<jsp:getProperty property="result" name="calBean"/>
		

			
	<br/>*********************************
	<br>
	<br/>
	<form action="/Cal.jsp" method="post">
	<center>
	<table  width="60%" border="1" >
		<tr>
			<td colspan="2">简单计算器(JSP+JavaBeans)</td>
			
		</tr>
		<tr>
			<td>第一个参数</td>
			<td>
				<input type="text" name="firstNum">
			</td>
		</tr>
		<tr>
			<td>操作符</td>
			<td>
				<select name="operator">
					<option value="+">+</option>
					<option value="-">-</option>
					<option value="*">*</option>
					<option value="/">/</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>第二个参数</td>
			<td>
				<input type="text" name="secondNum">
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="计算">
			</td>
			
		</tr>
		
	</table>
	</center>
</form>
</body>
</html>

第三种：jsp+javaBean+Servlet

即MVC模式，MVC模式（Model-view-controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。这种方式jsp只是用于前端的页面的展示，后端实现计算的功能，很好地分离了前后端。

CalBeans和第二种是相同的：
代码如下：

package com.ag;


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

	public CalBeans() {
		super();
	}

	public CalBeans(String firstNum, char operator, String secondNum) {
		super();
		this.firstNum = firstNum;
		this.operator = operator;
		this.secondNum = secondNum;
		
	}

	public String getFirstNum() {
		return firstNum;
	}

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

	public char getOperator() {
		return operator;
	}

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

	public String getSecondNum() {
		return secondNum;
	}

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

	public String getResult() {
		return result;
	}

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

	//
	public void calculate() {
		float first = Float.parseFloat(this.firstNum);
		float second = Float.parseFloat(this.secondNum);
		switch (this.operator) {
		case '+':
			this.result = (first + second) + "";
			break;
		case '-':
			this.result = (first - second) + "";
			break;
		case '*':
			this.result = (first * second) + "";
			break;
		case '/':
			if (second == 0) {
				throw new RuntimeException("被除数不能为0！");
			} else {
				this.result = (first / second) + "";
				break;
			}
			default:
				throw new RuntimeException("运算符有误！");
		}
	}
}

前端展示：cal1.jsp：

用el表达式展示：

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!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>Insert title here</title>
</head>
<body style="text-align:center;">
<br/>*********************************<br/>
计算结果是： ${calBeans_firstNum} ${calBeans_b} ${calBeans_secondNum}${calBeans_a} ${calBean_result}
<br/>*********************************
<br>
<br/>
<form action="/calServlet" method="get">
    <center>
        <table  width="60%" border="1" >
            <tr>
                <td colspan="2">简单计算器(JSP+JavaBeans)</td>

            </tr>
            <tr>
                <td>第一个参数</td>
                <td>
                    <input type="text" name="firstNum">
                </td>
            </tr>
            <tr>
                <td>操作符</td>
                <td>
                    <select name="operator">
                        <option value="+">+</option>
                        <option value="-">-</option>
                        <option value="*">*</option>
                        <option value="/">/</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>第二个参数</td>
                <td>
                    <input type="text" name="secondNum">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="计算">
                </td>

            </tr>

        </table>
    </center>
</form>
</body>
</html>

calServlet的编写：

package web;

import com.ag.CalBeans;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/calServlet")
public class calServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //接受数据
        String firstNum = request.getParameter("firstNum");
        String operator = request.getParameter("operator");
        String secondNum = request.getParameter("secondNum");
        char b=operator.charAt(0);
        //封装对象
        CalBeans calBeans = new CalBeans();
        calBeans.setFirstNum(firstNum);
        calBeans.setOperator(b);
        calBeans.setSecondNum(secondNum);
        //调用方法
         calBeans.calculate();
        String result = calBeans.getResult();
       /* System.out.println(result);*/
        request.setCharacterEncoding("utf-8");
        //把数据存到request域中
          request.setAttribute("calBeans_firstNum",firstNum);
          request.setAttribute("calBeans_b",b);
          request.setAttribute("calBeans_secondNum",secondNum);
          request.setAttribute("calBeans_a","=");
          request.setAttribute("calBean_result",result);
        //转发
        request.getRequestDispatcher("/cal1.jsp").forward(request,response);


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

最后附上结果图：

需要源码的朋友，可以点击这个https://gitee.com/zhu-yiwen-667/Calculator，是一个maven项目，导入之后，可能会下载一些插件和jar包，里面已经配好了Tomcat7的插件，（现在tomcat插件最高只有7的版本），可以直接配置使用，我配置的80端口，如果需要修改可以在pom.xml中修改，如果觉得慢，提前在pom.xml中加入如下代码：

<repositories>
        <repository>
            <id>nexus-aliyun</id>
            <name>nexus-aliyun</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

配置图：idea上面偏右一点

最后，如有问题或者不懂的地方，希望大家评论指出和提问。

xiaoniu667

关注

16
点赞
踩
96

收藏

觉得还不错? 一键收藏
2
评论
（javaweb）用三种方式制作网页版简易计算器（JSP,JSP+javaBean,JSP+javaBean+Servlet）

第一种：在jsp中用语句块<%%>写java代码，最后用表达式<%=%>展示出来。这种方式耦合性太高了，不利于维护。calculator.jsp：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
复制链接

扫一扫