前后端交互计算器

最新推荐文章于 2023-01-31 21:15:07 发布

Putarmor

最新推荐文章于 2023-01-31 21:15:07 发布

阅读量961

点赞数 1

分类专栏： java web 文章标签： servlet

本文链接：https://blog.csdn.net/weixin_44874269/article/details/115489690

版权

java 同时被 2 个专栏收录

126 篇文章 5 订阅

订阅专栏

web

26 篇文章 0 订阅

订阅专栏

问题：实现一个前后端交互的计算器，用到的技术有哪些呢?
html css(非必须） javascript servlet tomcat

开始前先唠两毛钱的嗑，一般来说我们的项目需要部署在tomcat服务器上运行，启动tomcat的方式有两种，今天我们通过IDEA启动tomcat直接部署项目，可以说是非常的方便了。

实现前后端交互计算器过程：

1.在IDEA中配置tomcat

首先在IDEA界面上方找到Add Configuration，然后跳转到如下界面，具体配置如下
在这里插入图片描述
Server配置结束后，选择Deployment进行配置

2.在webapp目录下新建html文件，在这里我将其命名为calc1

<!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>
        //切记，下面type是submit，不再是button,只有submit才能实现交互
        <input value=" 提 交 " type="submit">   
    </div>
</form>
</body>
</html>

3.配置pom.xml文件
将下面的servler依赖添加到pom.xml的denpendencies块中

<dependencies>
    <!-- servlet依赖 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

4.配置web.xml文件
将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>calculator</servlet-name>
    <servlet-class>Calculator</servlet-class>
  </servlet>
  <!-- 注册servlet接口 -->
  <servlet-mapping>
    <servlet-name>calculator</servlet-name>
    <url-pattern>/calc</url-pattern>
  </servlet-mapping>

web.xml可以说是配置的核心，主要注意的几个点;
①servlet-mapping中的servlet-name和servlet中的servlet-name必须保持一致，命名可任意
②servlet-mapping中的url-pattern要和html文件中的action对应，参数前面的/不能少
5.创建Servlet后端类（Calculator）

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 Calculator extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(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 style='color:blue'>计算的结果为：%d</h1>",total));
    }
}

6.运行结果展示
http://localhost:8080/calculatorServlet_war/calc
在这里插入图片描述

今日回顾，记得三连！

Putarmor

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
前后端交互计算器

问题：实现一个前后端交互的计算器，用到的技术有哪些呢?html&emsp; css(非必须）&emsp; javascript&emsp; servlet&emsp; tomcat开始前先唠两毛钱的嗑，一般来说我们的项目需要部署在tomcat服务器上运行，启动tomcat的方式有两种，今天我们通过IDEA启动tomcat直接部署项目，可以说是非常的方便了。实现前后端交互计算器过程：1.在IDEA中配置tomcat首先在IDEA界面上方找到Add Configur
复制链接

扫一扫