介绍
由于要实习了,因此把以前做过的复盘一下,并做个总结,下面是用JSP+Servlet以及JSP+Servlet+JavaBeans两种方式实现的web计算器,先看一下下效果,原理也比较简单,代码的话后面都会贴出来,整个项目的传送门为:可以点击我送你去传送门
代码实现-1
- index.jsp 主页的呈现
- CalculatorServlet.java 接收页面参数,并返回参数
- web.xml 进行servlet的配置
首先是index.jsp文件
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
web 计算器
<br>
<form action="servlet/CalculateServlet" method="get">
<table>
<tr>
<td>输入第一个数:</td>
<td><input type="text" name="first" value=${requestScope.first} ></td>
</tr>
<tr>
<td>计算类型:</td>
<td><input type="radio" name="type" value="1">+<input
type="radio" name="type" value="2">-<input type="radio"
name="type" value="3">* <input type="radio" name="type"
value="4">/</td>
</tr>
<tr>
<td>输入第二个数:</td>
<td><input type="text" name="second" /></td>
</tr>
<tr>
<td ><input type="submit" value="提交"></td>
</form>
<td >答案是:${requestScope.answer} </td>
</tr>
</table>
</body>
</html>
其次是CalculatorServlet.java
package com.yuhu;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CalculateServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public CalculateServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
double answer = 0;
//假设两个数都符合要求
double first = Double.parseDouble(request.getParameter("first"));
double second = Double.parseDouble(request.getParameter("second"));
int type = Integer.parseInt(request.getParameter("type"));
switch(type){
case 1:
answer = first + second;
break;
case 2:
answer = first - second;
break;
case 3:
answer = first * second;
break;
case 4:
answer = first / second;
break;
default:
break;
}
request.setAttribute("answer", answer);
request.getRequestDispatcher("../index.jsp").forward(request, response);
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
最后是web.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<display-name></display-name>
<!-- 配置servlet -->
<servlet>
<servlet-name>CalculateServlet</servlet-name>
<servlet-class>com.yuhu.CalculateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CalculateServlet</servlet-name>
<url-pattern>/servlet/CalculateServlet</url-pattern>
</servlet-mapping>
</web-app>
代码实现-2
在第二种形式中无需web.xml的配置文件只需要一个Calculator的bean类,具体如下:
- Calculator.java
package com.yuhu;
/**
* Bean of calculator
*/
public class Calculator {
private String first;
private String second;
private int type;
private String answer;
public String getFirst() {
return first;
}
public void setFirst(String first) {
this.first = first;
}
public String getSecond() {
return second;
}
public void setSecond(String second) {
this.second = second;
}
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
public double getAnswer() {
switch(type){
case 1:
this.answer = (Double.parseDouble(first) + Double.parseDouble(second)) + "";
break;
case 2:
this.answer = (Double.parseDouble(first) - Double.parseDouble(second)) + "";
break;
case 3:
this.answer = (Double.parseDouble(first) * Double.parseDouble(second)) + "";
break;
case 4:
this.answer = (Double.parseDouble(first) / Double.parseDouble(second)) + "";
break;
default:
return 0.0;
}
return Double.parseDouble(answer);
}
public void setAnswer(String answer) {
this.answer = answer;
}
}
- index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<jsp:useBean id="calculator" class="com.yuhu.Calculator" />
<jsp:setProperty property="first" name="calculator"/>
<jsp:setProperty property="second" name="calculator"/>
<jsp:setProperty property="type" name="calculator"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>web calculator</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
web 计算器
<br>
<!-- this is the first version <form action="servlet/CalculateServlet" method="get"> -->
<form action="" method="get">
<table>
<tr>
<td>输入第一个数:</td>
<td><input type="text" name="first"></td>
</tr>
<tr>
<td>计算类型:</td>
<td><input type="radio" name="type" value="1">+<input
type="radio" name="type" value="2">-<input type="radio"
name="type" value="3">* <input type="radio" name="type"
value="4">/</td>
</tr>
<tr>
<td>输入第二个数:</td>
<td><input type="text" name="second"></td>
</tr>
<tr>
<td ><input type="submit" value="提交"></td>
</form>
<!-- this is the first version ${requestScope.answer} -->
<td>答案是:<jsp:getProperty name="calculator" property="answer" /> </td>
</tr>
</table>
</body>
</html>