本質を取り、ドロス（フロントエンドとバックエンドの相互作用のための計算機）を取り除きます-servlet、html、JavaScript、Tomcat

フロントエンドインタラクティブ計算機

サーブレットの構成に関する前回の記事に続いて、サーブレットを適切に構成していない場合は、前回の記事を読むことができます。
もちろん、Tomcatも必要です。公式Webサイトにアクセスして自分でダウンロードできます。（Tomcatが行うことは、アクセスのためにローカルリソースをフロントエンドにアップロードすることです）。注：Tomcatのパスは既知であり、英語である必要があります。！！！
最初のステップ：現在のプロジェクトをTomcatにバインドします。
ここに画像の説明を挿入
次のステップはOKです。急いではいけません。最初に次の操作を実行してください。最後のポイントでOKです。絵を描くときに問題が発生します。！！！！

パッケージ化されたwarパッケージを選択し、[OK]をクリックして構成します。
ステップ2：htmlファイルを作成し、webappを右クリックして新しいhtmlファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的计算器</title>
</head>
<body>
<form method="post" action="counter">
    <div style="text-align:center">
        <h1>计算器</h1>
        <p><strong>数字:</strong><input type="number" id="n1" name="name1"></p>
        <p><strong>数字:</strong><input type="number" id="n2" name="name2"></p>
        <input type="submit" value="提交">
    </div>
</form>

</body>
</html>

その中で、postはパラメータの受け渡し方法であり、counterはサーブレットによって適用されるインターフェースのパス名です。
入力のボタンはもはやボタンではなく送信であることに注意してください。ボタンはフロントエンドの相互作用を完了できません。
ステップ3：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>counter</servlet-name>
    <servlet-class>CounterServlet</servlet-class>
  </servlet>
  <!--用来注册servlet的接口-->
  <servlet-mapping>
    <servlet-name>counter</servlet-name>
    <url-pattern>/counter</url-pattern>
  </servlet-mapping>

</web-app>

フロントエンドはルートディレクトリでカウンタを見つけ、次にサーブレット名をカウンタとして探し（好きなように取りますが、上記のサーブレット名との一貫性を保ちます）、最後にバックエンド実装クラスを見つけます。 CounterServlet。url-patternのカウンター（スラッシュを追加することを忘れないでください）は、上記のアクションのパラメーター名と同じである必要があります。
ステップ4：CounterServletクラスを作成します。

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 CounterServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        String num1=request.getParameter("name1");
        String num2=request.getParameter("name2");
        int end=Integer.parseInt(num1)+Integer.parseInt(num2);
        PrintWriter writer = response.getWriter();
        writer.println(String.format("<h1 style='color:red'>最终结果为:%d</h1>",end));
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doPost(request,response);
    }
}

response.setCharacterEncoding（ "utf-8"）：この手順は、中国語の文字化けを防ぐためのものであるため、返される応答のエンコード形式を設定する必要があり
ます。response.setContentType（ "text / html"）：表示テキストを設定します。これはhtmlフロントエンドページであるため、htmlです
。Stringnum1= request.getParameter（ "name1"）：バックエンドプログラムでは使用できないため、ここではid属性ではなくname属性を入力タグで使用することを忘れないでください。 idを介してフロントエンド情報を取得します。
String.format（）は、小数を保持するときに丸めが行われることを除いて、C言語のprintfに似ています。
すべてが完了したら、[実行]をクリックします。これは
ここに画像の説明を挿入
比較的簡単で、見栄えの良いスタイルが必要な場合は自分で設定できます。（これはフロントエンドページです）
[送信]をクリックすると、次のインターフェイスに変換されます：バックエンドによって返される計算結果。
ここに画像の説明を挿入
プログラムが実行後に自動的に次のインターフェイスにジャンプする場合：

恐れることはありません！http：// localhost：8082 / web /の後にhtmlファイル名とサフィックスのフルネームを追加するだけで、正常に実行できます。！！！
比較的低いのでご容赦ください。

本質を取り、ドロス（フロントエンドとバックエンドの相互作用のための計算機）を取り除きます-servlet、html、JavaScript、Tomcat

フロントエンドインタラクティブ計算機

おすすめ