LoginSignup
0
0

More than 1 year has passed since last update.

@sueasen

eclipse4.8 で maven で wabapp(servlet, jsp) の雛形作成

Last updated at Posted at 2022-09-06

eclipse4.8 で maven の webapp(servlet, jsp) の雛形を作るとエラーがいくつかあったりしたので備忘録でメモ
使った eclipse は pleiades-4.8.0-java-win-64bit-jre_20180923
プロジェクト作成時に標準のディレクトリ構成がいくつかなかった...
github 入れて捨てたら空ディレクトリだめなの忘れてて追加したやつ全部、消えてしまった．．． .gitkeep でとりあえず逃げよう．．．
一旦、作ったやつを github java-webapp-clump に入れてます、Bootstrap で見た目だけそれっぽく．．．
プロジェクト作成からはめんどくさい方は サンプルプロジェクト実行まで を参考にしてください

プロジェクト作成からJSPブラウザ表示まで

maven プロジェクト作成

  1. 右クリック - [新規] - [プロジェクト]
    image.png
  2. [Maven] - [Maven プロジェクト] - [次へ]
    image.png
  3. デフォルトのまま [次へ]
    image.png
  4. [フィルター] に webapp 入力 - [アーティファクトId] maven-archetype-webapp 選択 - [次へ]
    image.png
  5. [グループId], [アーティファクトId] に 任意の値 入力 - [完了]
    image.png

ディレクトリ追加(maven 標準に合わせて最低限)

  1. src/main/java を追加
  2. src/test/java を追加
  3. src/test/resources を追加
    image.png

参考：maven 標準ディレクトリ構成

ディレクトリ 役割
src/main/java 作成するアプリケーション/ライブラリのソースコード
src/main/java 作成するアプリケーション/ライブラリのソースコード
src/main/resources 作成するアプリケーション/ライブラリのリソース
src/main/filters リソースに適用するフィルタ
src/main/assembly アセンブリ記述子、配布用ファイル (zip や tar.gz など) の作成に関する情報
src/config 設定ファイル
src/main/webapp Web アプリケーションに必要なソース
src/test/java テスト用のソースコード
src/test/resources テスト用のリソース
src/test/filters テスト用のリソースに適用するフィルタ
src/site サイトの作成に必要なファイル

pom 更新

  1. エンコード、Javaのバージョン設定
  2. Servlet API を追加
  3. JSTL タグライブラリを追加
  4. [実行] - [Maven clean] で更新
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <groupId>webappjavabase</groupId>
  <artifactId>webappjavabase</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>webappjavabase Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
    <maven.compiler.source>${java.version}</maven.compiler.source>
    <maven.compiler.target>${java.version}</maven.compiler.target>
  </properties>

  <dependencies>
    <!-- servlet api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>
    <!-- jsp tag library jstl -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>org.apache.taglibs</groupId>
      <artifactId>taglibs-standard-impl</artifactId>
      <version>1.2.5</version>
      <scope>runtime</scope>
    </dependency>
  </dependencies>

  <build>
    <finalName>webappjavabase</finalName>
  </build>
</project>

起動確認（サーバ実行 Tomcat8）

  1. プロジェクト選択して右クリック - [実行] - [サーバで実行]
    image.png
  2. [Tomcat8] 選択 - [完了]
  3. "Hello World!"が表示されればOK（src/main/webapp/index.jsp が表示)
    ※適当なブラウザからもURLで確認できる http://localhost:8080/projectname
    image.png

Servlet 作成して JSP 表示

  1. Servlet を作成するパッケージ作成 ※例では src/main/java/controller
  2. 作成したパッケージ直下に HttpServlet を継承したファイル作成 ※例では SampleServlet
    • @WebServlet でリクエストURLのパスを設定 ※ 例では /sample
    • doGet の中で JSP 指定してフォワード
  3. プロジェクトをサーバ実行して上のURLで表示できればOK ※ 例では http://localhost:8080/projectname/sample
例 SampleServlet.java
package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * {@link SampleServlet}
 */
@WebServlet("/sample") // ここがリクエストURLの一部になる ex) http:localhost:8080/projectname/sample
public class SampleServlet extends HttpServlet {

	/**
	 * {@inheritDoc}
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
        // 指定したファイルに受け取ったリクエストを転送してレスポンスを返す
		String view = "/index.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(view);
		dispatcher.forward(request, response);
	}

	/**
	 * {@inheritDoc}
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

サンプルプロジェクト実行まで

Bootstrap5いれてみためだけそれっぽくしてます

GitHub から zip ダウンロード

  1. GitHub の java-webapp-clump を開く
  2. [Code] - [Download ZIP] で zip ダウンロード
    image.png

Eclipse にプロジェクトをインポート

  1. Eclipse ひらく
  2. [ファイル] - [インポート] を押下
    image.png
  3. [一般] - [既存プロジェクトをワークスペースへ] を選択して [次へ] を押下
    image.png
  4. [アーカイブ・ファイルの選択] を選択して GitHub からダウンロードした java-webapp-clump-main.zip を指定して [完了] を押下
    image.png
  5. ビルドをまってエラーがなければ一旦、OK（警告は中途半端な状態にしてるので出てしまいます．．．）

サーバ実行(Tomcat8)

  1. プロジェクト java-webapp-clump を選択して右クリック - [実行] - [サーバで実行] を押下
    image.png
  2. Java8 の [Tomcat8.5サーバ] を選択して [完了] を押下 (2回目からは [ローカルホストのTomcat8(Java8)] を選べばOK)
    image.png
  3. 起動したら http://localhost:8080/java-wabapp-clump/ にアクセスで以下のページが開けばOK
    ※ eclipse で表示されるページは気にしないでOK...Eclipseの設定変えて外部ブラウザを開くようにした方が良いかも．．．
    ※ 詳細は eclipseで起動するWebブラウザを変更 を参照
    ※ 外部ブラウザへの変更方法：ヘッダメニュー[ウィンドウ] - [設定]クリック - [一般] - [Webブラウザー]クリック - [外部Webブラウザ―を使用] を選択
    image.png

トラブルシューティング

複数端末からサンプル落として実行したら通信状況？？とかではまったケースがいくつかあったので解決までの対処方法の備忘録

  • ビルドエラー出てないけどTomcat起動がうまくいかない

    • 原因：Maven依存関係(プロジェクトから参照してるライブライetc..., pom.xml参照) の取得がうまくできていない
    • 対処：
      1. Mavenローカルリポジトリの直下を全部削除（エクスプローラを使用、削除できない時は eclipse 一旦、落とす）
        • MavenローカルリポジトリのWindowsデフォルトパス： %HOMEPATH%\.m2\repository
        • Mavenローカルリポジトリのeclipseからの確認方法
          • ヘッダメニュー[ウィンドウ] - [設定] をクリック
          • [Maven] - [ユーザ設定] をクリックで表示される [ローカルリポジトリ―] の値
      2. eclipse で プロジェクト右クリック - [Maven] - [プロジェクトの更新] を実行

  • ビルドエラーが出ている or ビルド失敗（Maven依存関係の取得失敗）

    • 原因, 対処：「ビルドエラー出てないけどTomcat起動がうまくいかない」と同じ

  • ビルドエラーが出ている or ビルド失敗（GitHubからのコード取得失敗）

    • 原因：GitHubからの zip ダウンロード時に一部ファイルが欠落して取得がうまくできていない
    • 対処：
      1. プロジェクトを削除して 「GitHubからzipダウンロード」からやり直す
        • プロジェクトの削除時の注意、削除ダイアログの [ディスク上からプロジェクト・コンテンツを削除] を必ずチェック
          image.png
        • プロジェクト削除時に上のチェックを忘れた方はエクスプローラを使用してワークスペースから削除

  • 実行してTOPページ開くがメニューで他ページ行くと 404 NotFound でページ遷移できない

    • 原因：プロジェクトのビルド失敗でクラスファイルが作られてない
    • 対処：
      1. eclipse のヘッダメニュー [プロジェクト] - [クリーン] をクリック

Eclipse と GitHub つなげる

eclipse と Github つなげるときの参考に大きいので別ページ．．．

Java Webアプリざっくり構成

3層アーキテクチャ（プレゼンテーション層（UI）、ビジネスロジック層（サービス（機能））、データアクセス層（データ処理））に分けた構成やMVCモデルをもとにしてる
今回のJava Webアプリの各リソースの関連、役割ははこんな感じ
サンプルプロジェクトにはビジネスロジック層は入口だけ．．．

各リソースの関連図・配置場所

image.png

各リソースの役割 （サンプルにない箇所も多い．．．）

リソース 役割 備考 サンプル有無
JSP(HTML) UI部分。入出力をおこなう ビジネスロジックは実装しない ○
Servlet(Controller, Action) 画面遷移、業務ロジック(サービス)の呼出 ビジネスロジックは実装しない ○
Dto(VO) 入出力項目、データの受け渡しで使われる箱 属性のみを持つ ○
Service 業務処理の入口、トランザクションを管理、ServiceがServiceを持ったり共通する処理はビジネスロジックのクラスとして独立させたり Entity に処理を持たせることが多い interface と実装を分離する ○
Dao データ参照、登録、更新、排他制御をおこなう interface と実装を分離する ×
Entity データモデル、属性の保持とモデルが行う処理をもつ データのみ持つ基底クラスと処理を持つ拡張クラスに分ける ×

3層アーキテクチャ

層 概要
プレゼンテーション層 入出力の部分、ブラウザなどを使ってユーザとの入力・出力を行う。広義でとらえるとシステム外とのに入出力を管理する役割がある。UI/UXを決めるところ、別の言葉だとフロントエンド
ビジネスロジック層(アプリケーション層) 入力に対しての処理、提供するサービス（システム）の処理部分で入力を受けて結果（出力）を返す、別の言葉だとバックエンド（データアクセス層含む）
データアクセス層(データ層) 処理したデータを管理、ここでは登録・更新・削除などデータアクセスする部分を分けて記載しているがデータベースなどを一つの層としてデータ層とすることもある、データベースは別の用語だとDWH(データウェアハウス)などもある

MVCモデル

名称 概要
Model システムの処理部分（ビジネスロジック・データアクセス）。Controller から使われる、View/Controller に依存しないように作ると疎結合になる
View 入力・出力(表示)の部分。UI/UX の部分。Controller を使う、見た目部分のみ改善できるようになる、ただし Model の改修に影響を受けやすい
Controller Model と View をつなぐ部分。Viewから使われて Model を使う、View からユーザ入力をもらい Model を呼び出し結果を View に返す、Model・View の改修に影響を受けやすいが Controller のみ改善で処理フローの改修が可能な時がある

※補足:コメント
この構成は一昔前までは主流だったが最近は プレゼンテーション層の Controller をクライアント(フロントエンド)に持たせる感じの MVVMモデルが流行ってきてる
その流れにあるのがフロントエンドのFWにある React, Vue などを使ったシステム
バックエンドは業務ロジック呼び出しのみ行う Controller があり API の受け口として機能する
またAPIを小さい機能として独立させていきマイクロサービスとしてシステム開発することが増えてきてる

Appendix（参照ページ, サンプル場所 etc...）

参照してるページだったりサンプルの場所です

サンプル

※サンプル使った構築手順は サンプルプロジェクト実行まで を参考に

GitHub連携

処理の流れ・いろいろな処理

eclipse設定

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0