JavaRush /Java Blog /Random-JA /サーブレットと JSP を使用した簡単な Web アプリケーションの作成 (パート 2)
fatfaggy
レベル 26
Киев

サーブレットと JSP を使用した簡単な Web アプリケーションの作成 (パート 2)

Random-JA グループに公開済み
引き続き、サーブレット、jsp、Maven、Tomcat を使用して Web アプリケーションを作成するプロセスについて説明します。必要に応じて、記事の冒頭
私たちはエンティティを作成します。
エンティティ パッケージに User クラスを作成しましょう。その中に 2 つのプライベート文字列変数、名前とパスワードを作成します。コンストラクター (デフォルトと両方の値を受け入れるコンストラクター)、ゲッター/セッターを作成し、念のため toString() メソッドと、equals() メソッドと hashCode() メソッドをオーバーライドしましょう。 public class User { private String name; private String password; public User() { } public User(String name, String password) { this.name = name; this.password = password; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } @Override public String toString() { return "User{" + "name='" + name + '\'' + ", password='" + password + '\'' + '}'; } @Override public boolean equals(Object o) { if (this == o) return true; if (o == null || getClass() != o.getClass()) return false; User user = (User) o; if (name != null ? !name.equals(user.name) : user.name != null) return false; return password != null ? password.equals(user.password) : user.password == null; } @Override public int hashCode() { int result = name != null ? name.hashCode() : 0; result = 31 * result + (password != null ? password.hashCode() : 0); return result; } } これで、ユーザーのリストの作成を開始できます。ユーザーを追加する場所と、ユーザーを表示する場所から取得します。しかし問題がある。私たちがサーブレット オブジェクトを作成するのではなく、Tomcat がサーブレット オブジェクトを作成します。それらでオーバーライドするメソッドもすでに定義されているため、パラメーターを追加することはできません。では、両方のサーブレットに表示される共通のリストを作成するにはどうすればよいでしょうか? 各サーブレットで独自のリスト オブジェクトを作成するだけであれば、ユーザーを 1 つのリストに追加することになりますが、ListServlet サーブレットを使用してユーザーのリストを表示する場合はまったく異なります。両方のサーブレットに共通のオブジェクトが必要であることがわかりました。一般的に言えば、プログラム内のすべてのクラスに共通のオブジェクトが必要です。プログラム全体の唯一のオブジェクトです。デザインパターンについて聞いたことがあると思います。そしておそらく、これがプログラムで シングルトンテンプレートを使用する初めての実際のニーズである人もいるでしょう。創造力を発揮して、二重チェックと同期を使用してクールなシングルトンを作成することもできます (はい、Tomcat はサーブレットを別のスレッドで実行するため、マルチスレッド アプリケーションがあります)。ただし、この場合は早期初期化のオプションを使用します。かなり適しています。
モデルの作成。
次に、モデル パッケージ内にクラスを作成し (そしてその中にシングルトン テンプレートを実装し)、それを非常にカラフルなモデルと呼びます。その中にプライベート ユーザー リスト オブジェクトを作成し、2 つのメソッドを作成しましょう。1 つはユーザーを追加できるようにするもので、もう 1 つは単に文字列 (ユーザー名) のリストを返すものです。ユーザー オブジェクトは名前とパスワードで構成されているため、ユーザーのパスワードを「公開」したくないため、名前のリストのみを返します。 public class Model { private static Model instance = new Model(); private List model; public static Model getInstance() { return instance; } private Model() { model = new ArrayList<>(); } public void add(User user) { model.add(user); } public List list() { return model.stream() .map(User::getName) .collect(Collectors.toList()); } }
MVC について少し。
シングルトンについて聞いたことがあるということは、おそらく別の設計パターンである MVC (モデル ビュー コントローラー、ロシア語のモデル ビュー コントローラー、または英語のモデル ビュー コントローラー) について聞いたことがあることを意味します。その本質は、ビジネス ロジックをプレゼンテーションから分離することです。つまり、 何を行うかを決定するコードと、 を 表示する方法を決定するコードを分離します。ビュー (ビューまたは単なるビュー) は、一部のデータが表示される形式を担当します。この場合、ビューは JSP ページです。そのため、ビューという名前のフォルダーにそれらを配置しました。モデルは、プログラムが動作する実際のデータです。この場合、これらはユーザー (ユーザーのリスト) です。そうですね、コントローラーはそれらの間の接続リンクです。モデルからデータを取得してビューに転送するか、Tomcat からデータを受け取り、それを処理してモデルに転送します。ビジネス ロジック (つまり、 何を行うか) は、モデルやビューではなく、それらの中で記述される必要があります。したがって、誰もが自分のことを行います。
  • モデルはデータを保存します
  • ビューはデータを美しく表現します
  • コントローラーはデータを処理します
これにより、それらはすべて非常にシンプルで保守しやすくなります。1 つのクラス内のすべてのコードの巨大なダンプではありません。MVC は Web プログラミングに適しているだけでなく、この分野では (常にではないにしても) 今でも非常に一般的です。この例では、サーブレットがコントローラーとして機能します。はい、これはこのパターンの非常に表面的で大まかな説明です。しかし、この記事はデザイン パターンについてではなく、単純な Web アプリケーションの作成方法について説明しています :) もっと詳しく知りたい人はいません - Google はすべてを知っています。:) 私たちの見解に戻りましょう。
ユーザーを追加するためのフォームを作成します。
add.jsp ファイルにフォームを追加してみましょう。このフォームは 2 つのテキスト入力 (1 つは通常の入力、もう 1 つはパスワード タイプ) とサーバーにデータを送信するためのボタンで構成されます。 ここで、フォームには値 post を持つメソッド属性があります。これは、このフォームからのデータが POST リクエストの形式でサーバーに送信されることを意味します。action 属性が指定されていないため、このリクエストはこのページにアクセスしたのと同じアドレス (/add) に送信されます。したがって、このアドレスにバインドされているサーブレットは、GET リクエストを受信すると、ユーザーを追加するためのフォームを含むこの JSP を返します。POST リクエストを受信すると、このフォームはそこにデータを送信します (データは次から取得します)。 doPost() メソッドのリクエスト オブジェクトを処理し、保存するためにモデルに転送します)。ここで、入力には name パラメーターがあることに注意してください (名前のあるフィールドの場合は値 name があり、パスワードのあるフィールドの場合は値パスがあります)。これはかなり重要な点です。このデータ (入力される名前とパスワード) をリクエスト (既にサーブレット内にある) から取得するために、これらの名前とパスを正確に使用します。しかし、それについては後で詳しく説明します。データを送信するためのボタン自体も、通常のように入力ではなく、ボタンの形式で作成されます。このオプションがどの程度普遍的なのかはわかりませんが、Chrome では機能します:)
サーブレットを使用した POST リクエストの処理。
AddServlet サーブレットに戻りましょう。サーブレットが GET リクエストを「キャッチ」できるようにするには、HttpServlet クラスの doGet() メソッドをオーバーライドする必要があることはすでにわかっています。サーブレットに POST リクエストもキャッチするように教えるために、 doPost() メソッドもオーバーライドします。Tomcat から同様の要求オブジェクトと応答オブジェクトを受け取ります。これを使用して作業します。まず、リクエストから名前を抽出し、フォームが送信したパラメーターを渡します (フォーム内で別の名前を付けた場合は、それらの名前を記述します)。次に、受信したデータを使用してユーザー オブジェクトを作成します。次に、モデル オブジェクトを取得し、作成したユーザーをモデルに追加します。 @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String name = req.getParameter("name"); String password = req.getParameter("pass"); User user = new User(name, password); Model model = Model.getInstance(); model.add(user); }
データをビューに転送します。
次に、ListServlet サーブレットに移りましょう。doGet() メソッドはすでに実装されており、単に制御を list.jsp ビューに転送します。これをまだ行っていない場合は、AddServlet サーブレットからの同じメソッドと同様に実行してください。ここで、モデルからユーザー名のリストを取得してビューに渡すと、ユーザー名がそこで受け取られて適切に表示されます。これを行うには、Tomcat から受け取ったリクエスト オブジェクトを再度使用します。このオブジェクトに属性を追加して名前を付け、実際にはビューに転送したいオブジェクト自体を追加することができます。実行プロセスをサーブレットからビューに転送するときに、サーブレット自体が受信したのと同じリクエスト オブジェクトとレスポンス オブジェクトを渡します。その後、名前のリストをリクエスト オブジェクトに追加することで、このリクエストから次のことが可能になります。ビュー内のオブジェクトでユーザー名のリストを作成し、取得します。ListServlet クラスの作成は完了したので、クラス全体のコードを次に示します。 package app.servlets; import app.model.Model; import javax.servlet.RequestDispatcher; 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.util.List; public class ListServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Model model = Model.getInstance(); List names = model.list(); req.setAttribute("userNames", names); RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp"); requestDispatcher.forward(req, resp); } }
jsp ファイル内の Java コードを実行します。
次に、list.jsp ファイルに移りましょう。このファイルは、ListServlet がここで実行プロセスを渡す場合にのみ実行されます。さらに、そのサーブレットでは、モデルからユーザー名のリストをすでに準備しており、それをリクエスト オブジェクトで渡しています。名前のリストが与えられると、それに対して for ループを実行し、それぞれの名前を出力できます。すでに述べたように、jsp ファイルは Java コードを実行できます (原則として、これが静的 HTML ページとの違いです)。何らかのコードを実行するには、必要な場所に構造を配置するだけで十分です。 <% // java code %> そのような構造の内部では、いくつかの変数にアクセスできます: request - サーブレットから渡されたリクエスト オブジェクト。単に呼び出された場所です。 req response - サーブレットは応答オブジェクトと呼ばれます。 resp out - JspWriter タイプのオブジェクト (通常の Writer から継承)。これを使用すると、HTML ページ自体に直接何かを「書き込む」ことができます。Out.println("Hello world!") は System.out.println("Hello world!") に非常に似ていますが、混同しないでください。out.println() は HTML ページに「書き込み」、System.out.println - システム出力に「書き込み」ます。jsp コードを含むセクション内で System.out.println() メソッドを呼び出すと、ご希望のようにページ上ではなく Tomcat コンソールに結果が表示されます :) jsp 内で他の利用可能なオブジェクトを探すことができます ここ。request オブジェクトを使用すると、サーブレットから渡された名前のリストを取得でき (対応する属性をこのオブジェクトに付加しました)、out オブジェクトを使用すると、これらの名前を表示できます。ここでは単純に HTML リストの形式でこれを実行しましょう。 ユーザーがいる場合にのみリストを表示し、それ以外の場合はまだユーザーがいないという警告を表示したい場合は、このセクションを少し書き直すことができます 。サーブレットからビューにデータを転送する方法を知っている - ユーザーの追加が成功したことに関する通知が表示されるように、AddServlet を少し改善できます。これを行うには、doPost() メソッドで、新しいユーザーをモデルに追加した後、このユーザーの名前を req オブジェクトの属性に追加し、制御を add.jsp ビューに戻すことができます。その中には、Java コードを含むセクションがすでに作成されており、そのような属性がリクエストに含まれているかどうかを確認し、含まれている場合はユーザーが正常に追加されたことを示すメッセージを表示できます。これらの変更後、AddServlet サーブレットの完全なコードは次のようになります。 ここでは、 doPost() メソッドの最後で、モデルに追加されたユーザーの名前を含む属性を設定し、 doGet( ) メソッドに、現在のリクエストとレスポンスを渡します。また、 doGet() メソッドはすでに制御をビューに渡しており、追加されたユーザーの名前が属性として付加されたリクエスト オブジェクトを送信します。そのような属性が存在する場合にそのような通知を表示するように、add.jsp 自体を修正する必要があります。最終的な add.jsp
    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { for (String s : names) { out.println("
  • " + s + "
  • "); } } %>
<% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println(" "); for (String s : names) { out.println("
  • " + s + "
  • "); } out.println("
    "); } else out.println("

    There are no users yet!

    "); %>
    package app.servlets; import app.entities.User; import app.model.Model; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class AddServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp"); requestDispatcher.forward(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String name = req.getParameter("name"); String password = req.getParameter("pass"); User user = new User(name, password); Model model = Model.getInstance(); model.add(user); req.setAttribute("userName", name); doGet(req, resp); } } <%@ page contentType="text/html;charset=UTF-8" language="java" %> Add new user

    Super app!

    <% if (request.getAttribute("userName") != null) { out.println("

    User '" + request.getAttribute("userName") + "' added!

    "); } %>

    Add user

    ページの本文はヘッダーのある div で構成され、その後にコンテンツの div コンテナーがあり、ユーザー名を持つ属性が存在するかどうかを確認し、ユーザーを追加するためのフォームを含む div が最後にあります。メインページに戻るボタンのあるフッター。div が多すぎるように見えるかもしれませんが、後でスタイルを追加するときにそれらを使用します :) さて、最終バージョンは list.jsp です。このようにして、 ユーザーを保存および追加できる完全に機能する Web アプリケーションが完成しました。彼らの名前のリストが表示されます。残っているのはそれを装飾することだけです...:) <%@ page import="java.util.List" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> Users

    Super app!

    Users

    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println(" "); for (String s : names) { out.println("
  • " + s + "
  • "); } out.println("
    "); } else out.println("

    There are no users yet!

    "); %>
    スタイルを追加します。W3.CSS フレームワークを使用します。
    現時点では、私たちのアプリケーションは動作していますが、完全にクレイジーです :) 背景、テキストとボタンの色の追加、リストのスタイル設定、配置の実行、インデントの追加など、一般に多くのことを行う必要があります。スタイルを手動で記述する場合、多くの時間と神経が必要になることがあります。したがって、CSS フレームワーク W3.CSSを使用することをお勧めします。スタイルを備えた既製のクラスがすでに用意されているので、あとは適用したい CSS クラスを適切な場所に配置するだけです。これらをページに追加するには、まずスタイルを含むファイルを含める必要があります。1. ページを確認し、ヘッド セクションにスタイルを含むファイルへの直接リンクを挿入します。 このオプションは、インターネットに常時接続している場合に適しています。その後、ローカル サーバーでページを開くと、スタイルがインターネットから取得されます。2. すべてのスタイルをローカルに置き、インターネット接続に依存しないようにしたい場合は、スタイルを含むファイルを ダウンロードし、Web フォルダー (例: web/styles/w3.css) 内のどこかに配置します。すべてのページ (index.html、add.jsp、list.jsp) を確認し、head セクション内にスタイルを含むこのファイルへのリンクを入力します。 その後、タグを確認して、好みのスタイルでタグ付けするだけです。 。これについては詳しく説明しませんが、スタイル クラスをアレンジした 3 つのファイルの既製バージョンをすぐに提供します。Index.html add.jsp list.jsp 以上です :) まだ質問がある場合、またはコメントがある場合、または逆に、何かがうまくいかない場合は、コメントを残してください。さて、その結果のスクリーンショットをいくつか添付します。 そして最後に。このプロジェクトで練習したい場合は、次のことを試してみてください。 Super app!

    Super app!

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> Add new user

    Super app!

    <% if (request.getAttribute("userName") != null) { out.println("
    \n" + " ×\n" + "
    User '" + request.getAttribute("userName") + "' added!
    \n" + "
    "); } %>

    Add user

    <%@ page import="java.util.List" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> Users list

    Super app!

    Users

    <% List names = (List ) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println("
      "); for (String s : names) { out.println("
    • " + s + "
    • "); } out.println("
    "); } else out.println("
    \n" + " ×\n" + "
    There are no users yet!
    \n" + "
    "); %>
    アプリケーションのホームページ ユーザー追加ウィンドウ ユーザーのリスト
    • ユーザーを削除するためのサーブレットと JSP を作成し、既存のユーザーを変更/編集するためにさらにいくつかを作成します。本物の CrUD Web アプリケーションを取得します:) サーブレット上で))
    • リストを置換 (リスト ) サーバーの再起動後に追加されたユーザーが消えないようにデータベースを操作します:)
    幸運を!
    コメント
    TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
    GO TO FULL VERSION