フロントエンドとバックエンドの相互作用のためのシンプルな計算機-html、css、サーブレット、Tomcat

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

これを行う前に、まずサーブレットプロジェクトを作成する必要があります。ブログではすでにサーブレットプロジェクトが紹介されているので、直接始めましょう。

最初の一歩

ここでhtmlファイルを作成し、webappディレクトリに作成するように注意してください

コードは以下のように表示されます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的计算器</title>
</head>
<body>
<form method="get" 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 type="submit" value="提交">
    </div>
</form>
</body>
</html>

予防：

ここでは、htmlファイル全体がフォームフォームです。
送信キーのタイプは「ボタン」ではなく「送信」になり、ボタンをバックエンドに接続できなくなりました

第二段階

.javaファイルを作成し、バックエンドコードを記述します。
作成プロセスは前に示しましたが、ここに直接コードがあります。

直接5ステップのスネーク操作

doGetメソッドとdoPostメソッドをオーバーライドし、投稿で直接getを呼び出します
エンコード形式を設定する
戻り値の型を設定します
フロントエンドデータを受信する
結果をフロントエンドに返します

予防

エンコード形式を設定する場合：大文字と小文字は区別されません。UTF-8とutf-8の両方が可能です。
戻り値の型を設定する場合、text / html、text / css、application / javascript、image / pngの4つのタイプがあります。
出力ストリームを取得する前に、エンコード形式と戻り値の型を設定します（getWriter（））
フロントエンドデータを受信するときは、IDではなく名前が使用されます

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 {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        //1.设置编码格式
        resp.setCharacterEncoding("utf-8");
        //2.设置返回类型
        resp.setContentType("text/html");
        //3.接收前端数据
        int num1=Integer.parseInt(req.getParameter("number1"));
        int num2=Integer.parseInt(req.getParameter("number2"));
        int total=num1+num2;
        //4.给前端返回结果
        PrintWriter printWriter=resp.getWriter();
        printWriter.println(String.format("<h1>计算结果为:%d</h1>",total));
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        this.doGet(req,resp);
    }
}

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>long</servlet-name>
    <!-- 和写的java文件名必须一致(全包名)-->
    <servlet-class>calculator</servlet-class>
  </servlet>
  <!--  用来注册sverlet的接口-->
  <servlet-mapping>
    <!-- 和上面的name必须一致-->
    <servlet-name>long</servlet-name>
    <!--在Tomcat上部署时访问的url (最好全小写)-->
    <url-pattern>/calc</url-pattern>
  </servlet-mapping>

</web-app>

4番目のステップ

アイデアでTomcatを構成する

ここに画像の説明を挿入

最初の戦争パッケージを選択し、[OK]をクリックします

[OK ]をクリックすると、すべての操作が完了
ここに画像の説明を挿入
した

後、構成でこのような構成が成功しました。[実行]をクリックし
てしばらく待つと、次のインターフェイスがブラウザーをポップアップし

、URLに名前とサフィックスのhtmlファイルを追加してアクセスします
ここに画像の説明を挿入
提出クリックした後、別のページにジャンプします

フロントエンドの相互作用が正常に行われているように、

これはページ全体の送信であり、ページ送信機能の一部は将来更新されます！！！

フロントエンドとバックエンドの相互作用のためのシンプルな計算機-html、css、サーブレット、Tomcat

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

おすすめ