在IDEA中创建Servlet项目，实现运行一个前后端交互的计算器，超详细步骤

最新推荐文章于 2024-03-31 15:05:44 发布

dangdang爱章鱼

最新推荐文章于 2024-03-31 15:05:44 发布

阅读量1.7k

点赞数 1

文章标签： intellij-idea java ide

本文链接：https://blog.csdn.net/weixin_49100631/article/details/126465213

版权

在IDEA中使用Maven项目模板创建一个Servlet项目，步骤如下

1、在webapp包下新建一个html文件，用于编写前端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

2、打开WEB-INF包下的web.xml文件，创建一个路由，实现后端类接口连接；

<?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>
    <servlet-name>hello</servlet-name>
    <servlet-class>HelloServlet</servlet-class>
  </servlet>
  <!--用来注册servlet的接口-->
  <servlet-mapping>
    <servlet-name>hello</servlet-name>
    <url-pattern>/hello</url-pattern>
  </servlet-mapping>
  <!--计算器接口-->
  <servlet>
    <servlet-name>calcname</servlet-name>
    <servlet-class>CalcServlet</servlet-class>
  </servlet>
  <!--用来注册servlet的接口-->
  <servlet-mapping>
    <servlet-name>calcname</servlet-name>
    <url-pattern>/calc</url-pattern>
  </servlet-mapping>

</web-app>

3、进行后端类的编写

import com.sun.prism.PresentableState;
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;

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.获取前端传递的参数，用name值获取参数
        String num1 = request.getParameter("number1");
        String num2 = request.getParameter("number2");
        //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 {
        this.doPost(request, response);
    }
}

4、运行

在打开的网页里面加上前段文件名称calc.html，然后输入数字点击提交经过后端的运算后会输出结果再在网页显示出来；