实现一个完整的前后端交互的计算器
- 在webapp目录下创建html文件
- 编写里面内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="calc">
<div style="text-align: center;">
<h1>计算器</h1>
数字1：<input id="n1" name="number1" type="number"> <p></p>
数字2：<input id="n2" name="number2" type="number"> <p></p>
<input value="提交" type="submit">
</div>
</form>
</body>
</html>
- 编写计算机接口
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<!-- 计算器接口-->
<servlet>
<servlet-name>calcname</servlet-name>
<servlet-class>CalcServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>calcname</servlet-name>
<url-pattern>/calc</url-pattern>
</servlet-mapping>
</web-app>
- 编写后端相应代码
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created with IntelliJ IDEA.
* Description:后端处理
* User: starry
* Date: 2021 -04 -01
* Time: 11:44
*/
public class CalcServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 设置编码和返回的类型
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
//2. 获取前端传递的参数
String num1 = request.getParameter("number1"); //id是给js用的
String num2 = request.getParameter("number2"); //name才是给form表单用的
//3. 业务逻辑处理
int total = Integer.parseInt(num1) + Integer.parseInt(num2);
//4. 返回结果给前端
PrintWriter writer = response.getWriter();
writer.println(String.format("<h1>计算结果为：%d</h1>",total));
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//这样请求get方法也可以相应
this.doPost(request, response);
}
}
-
重启tomcat服务器
-
访问计算器前端页面
-
随遍输入数字，点击提交后，显示如下，则你的计算器小项目就完成啦
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
