实现完整的前后端交互的计算器

最新推荐文章于 2022-08-22 14:31:30 发布

false…

最新推荐文章于 2022-08-22 14:31:30 发布

阅读量1.1k

点赞数 1

文章标签： web java

本文链接：https://blog.csdn.net/weixin_50860928/article/details/115362446

版权

实现一个完整的前后端交互的计算器

实现前后端交互分为两部分：
一部分是前端页面的展示
一部分是后端的处理
在这里插入图片描述
大致如下这样

1. 创建一个html文件（clac.html)
实现前端页面

在这里插入图片描述

在创建的clac.html文件中写关于计算机前端页面的实现
注意提交要是submit 而不是button button只是普通的按钮如果要提交表单的话必须是submit

<!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">
        数字2:<input id="n2" name="number2" type="number">
        <input value=" 提交 " type="submit">

    </div>
</form>

</body>
</html>

2.创建一个后端的路由
注意：1.servlet 和servlet-mapping 里面的servlet-name 必须一样
2.servlet-class 后端类的起名必须遵循大驼峰的形式
servlet-name 可以全部是小写字母


          <!--用来实现计算器的接口-->
  <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>

3.创建一个后端类
注意：后端类的类名跟web.xml 里面的类名相同
request 获取参数用的是name 而不是 id
后端类的书写分为四步：

设置编码和返回的类型
获得前端传递的参数（数字1、数字2）
业务逻辑处理（比如：两个数相加相减等计算器的应用）
用format返回结果给前端
代码如下：

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 CalcServ 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");
        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.结果如下

在这里插入图片描述

false…

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
实现完整的前后端交互的计算器

实现一个完整的前后端交互的计算器实现前后端交互分为两部分：一部分是前端页面的展示一部分是后端的处理大致如下这样1. 创建一个html文件（clac.html)实现前端页面在创建的clac.html文件中写关于计算机前端页面的实现注意提交要是submit 而不是button button只是普通的按钮如果要提交表单的话必须是submit<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫