JavaRush /Java Blog /Random-JA /IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。写真付きでステップバ...
Стас Пасинков
レベル 26
Киев

IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。写真付きでステップバイステップで

Random-JA グループに公開済み
記事を理解するために必要な知識のレベル:あなたはすでに Java Core を多かれ少なかれ理解しており、JavaEE テクノロジと Web プログラミングについて学びたいと考えています。これは、記事に近いトピックをカバーする Java Collections クエストを現在学習している場合に最も意味があります。 IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 1私は現在 IntelliJ IDEA Enterprise Edition を使用しています (これは IDE の有料のアドバンスト バージョンで、通常はプロフェッショナルな開発で使用されます -編集者のメモ)。無料の Community Edition よりも Web プロジェクトでの作業がはるかに簡単です。そのため、Enterprise Edition では、文字通りマウスを 1 回クリックするだけで、プロジェクトがアセンブルされ、サーブレット コンテナに注がれてサーバーが起動し、実行中のプロジェクトを含むページもブラウザで開きます。このアイデアの無料版では、その多くは独立して、いわば「手作業」で行う必要があります。私は Apache Maven を使用してプロジェクトを構築し、そのライフサイクルを管理します。ここでは、その機能 (パッケージ/依存関係の管理) のほんの一部だけを使用しました。サーブレット コンテナ/アプリケーション サーバーとして Apache Tomcat バージョン 9.0.0.M4 を選択しました。すでに新しいバージョンがあることは知っていますが、私がインストールしたのはこれです。

始めましょう

まず、IntelliJ IDEA を開いて空の Maven プロジェクトを作成しましょう。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 2
ここでは左側で Maven を選択し、プロジェクトの JDK が上部に表示されていることを確認します。そこにない場合は、リストから必要なものを選択するか、[新規...] をクリックしてコンピュータから直接選択します。ウィンドウの中央には、アーキタイプのリストをロードするアニメーションがあります。これらは必要ないので、ダウンロードを待たずに、ウィンドウの下部にある [次へ] をクリックしてください。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 3
このウィンドウでは、 GroupId と ArtifactId を指定する必要があります。GroupId は、プロジェクトを作成する会社の一意の識別子を指します。会社のドメイン名を使用するのが一般的ですが、順序は逆です。ミラーという意味ではありませんが、たとえば、会社のドメイン名がmaven.apache.orgの場合、その GroupId はorg.apache.mavenになります。つまり、最初に第 1 レベルのドメインを記述し、それをドットで区切って、第 2 レベルのドメインの名前を記述します。これが一般的に受け入れられているアプローチです。会社の一員としてではなく、個人でプロジェクトを「切り出す」場合は、ここに個人のドメイン名を記入します (逆の順序でも構いません)。あなたがそれを持っているなら、もちろん:)。そうでなくても、動揺しないでください。実際、ここには何でも書くことができます。
ドメイン名が vasya.pupkin.org である会社の場合、GroupId は org.pupkin.vasya になります。名前に対するこのアプローチは、異なる会社からリリースされた同じ名前のプロジェクトを分離するために必要です。
この例では、架空のドメイン名fatfaggy.info.javarush.ruを使用します。したがって、GroupIdフィールドにru.javarush.info.fatfaggyと入力します。 ArtefactId は単にプロジェクトの名前です。文字といくつかの記号 (ハイフンなど) を使用して単語を区切ることができます。私たちの「アーティファクト」はここで書いたとおりに呼ばれます。この例では、my-super-projectと記述します。現時点ではバージョンフィールドには触れず、そのままにしておきます。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 4
さて、新しいプロジェクトを作成するときの標準のIDEAウィンドウ。伝統に従って、これを私のスーパー プロジェクトと呼びましょう。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 5
プロジェクトが作成されました!
pom.xml ファイルがすぐに目の前に開きました。これはMavenの設定を含むファイルです。Maven に何をどのように行うか、またはどこから何かを取得するかを「伝え」たい場合は、このすべてをこの pom.xml ファイルに記述します。これはプロジェクトのルートにあります。
Maven プロジェクトの作成時に入力したデータ ( groupIdartifactIdversion )が正確に含まれていることがわかります(後者には触れていません)。

私たちのプロジェクト構造

この Maven プロジェクトには特定の構造があります。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 6
ご覧のとおり、根本には次のようなものがあります。
  • .ideaディレクトリ。現在のプロジェクトのアイデア設定が含まれます。
  • ソースを作成するsrcディレクトリ。
  • my-super-project.imlファイル、IDEA によって作成されたプロジェクト ファイル。
  • pom.xmlファイルは、上で説明したものと同じ Maven プロジェクト ファイルであり、現在開いています。どこかで pom.xml または「pom」と言及した場合、それはこの特定のファイルを意味します。
srcフォルダーには 2 つのサブフォルダーが含まれています。
  • main - コード用。
  • test - コードのテスト用。
maintest の両方にjavaフォルダーがあります。これらは同じフォルダーであり、それぞれmainのフォルダーのみがソース コード用であり、testのフォルダーがテスト コード用であると考えてください。今のところリソースフォルダーはまったく必要ないので、使用しません。しかし、彼を横にさせてください。

Web プロジェクトへの変換

Maven プロジェクトを Web プロジェクトに変換するときが来ました。これを行うには、このツリー内のプロジェクト名を右クリックし、[フレームワーク サポートの追加...]を選択します。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 7
ウィンドウが開き、プロジェクトにあらゆる種類のさまざまなフレームワークのサポートを追加できます。ただし、必要なのはWeb アプリケーション1 つだけです。私たちは彼を選びます。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 8
[Web アプリケーション] の横にチェックマークがあることを確認し、ウィンドウの主要部分にweb.xmlファイルをすぐに作成するように指定していることが示されています(ボックスが存在しない場合はチェックすることをお勧めします)。この後、プロジェクトの構造がWebフォルダーで補完されたことがわかります。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 9
これは/ にある Web プロジェクトのルートです。つまり、ブラウザに localhost アドレスを入力すると (もちろんブラウザを起動するとき)、まさにここ、つまり Web プロジェクトのルートにアクセスされます。localhost/addUserと入力すると、 WebフォルダーはaddUserというリソースを探します。
重要なことは、プロジェクトを Tomcat にアップロードするときに、 Webフォルダーがプロジェクトのルートであることを理解することです。これで特定のフォルダー構造ができましたが、これからアップロードする完成したプロジェクトでは少し異なり、Webフォルダーがルートになります。
Webには、 WEB-INFという必須フォルダーがあり、前の手順で作成するように依頼したweb.xmlファイルがそこにあります。開けてみましょう。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 10
ご覧のとおり、まだ興味深いものは何もなく、「帽子」があるだけです。ちなみに、作成を依頼していなかったら、手動で作成する必要があったかもしれません。つまり、この「ヘッダー」全体を手で入力するか、極端な場合には、インターネットで既製のバージョンを探す必要がありました。 。web.xml は何のためにあるのでしょうか? マッピング用。ここで、どの URL リクエストをどのサーブレットに送信するかを Tomcat に指示します。しかし、それはすべて後で、今は空のままにしておきます。Webフォルダー内には、index.jspファイルもあります。開けてみましょう。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 11
これは、いわばデフォルトで実行されるファイルです。つまり、プロジェクトを立ち上げると、まさにこれが目に入ることになります。本質的に、jspは通常の HTML ファイルですが、その中で Java コードを実行できる点が異なります。

静的コンテンツと動的コンテンツについて少し

静的コンテンツは、時間が経っても変化しないコンテンツです。htmlファイルに記述した内容はそのまま表示されます。hello world と書いた場合、この碑文はページを開くとすぐに、5 分後、明日、1 週間後、1 年後に表示されます。彼女は変わりません。しかし、ページに現在の日付を表示したい場合はどうすればよいでしょうか? 単純に「2017 年 10 月 27 日」と書くと、明日、1 週間後、1 年後も同じ日付になります。しかし、私はこの日付が依然として意味のあるものであることを望みます。ここで、ページ内で直接コードを実行できる機能が役に立ちます。日付オブジェクトを取得し、必要な形式に変換してページに表示できます。そうすれば、毎日、ページを開くたびに、日付が常に関連するようになります。静的コンテンツのみが必要な場合は、通常の Web サーバーと HTML ファイルで十分です。Java、Maven、Tomcat は必要ありません。ただし、動的コンテンツを使用したい場合は、ここですべてが役に立ちます。しかしここでは、 index.jspに戻りましょう。標準のヘッダーの代わりに独自のヘッダー (たとえば、「My super web-app!」) を示し、本文には、たとえば「I'm生きています!」と書きます。プロジェクトを開始する準備がほぼ整いました。しかし、残念ながら、プログラムを起動するための通常の緑色の三角形はアクティブになっていません。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 12
その左側にあるボタン (画面上では赤い矢印で示されています) をクリックし、[構成の編集...] を選択 しましょう。ウィンドウが開き、緑色のプラス記号をクリックして何らかの構成を追加するように求められます。それをクリックすると、ウィンドウの左上隅にあります。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 13
[Tomcat サーバー]項目と[ローカル] サブ項目 を選択します。 ウィンドウが開き、さまざまなパラメータが表示されますが、ほとんどすべてのパラメータがデフォルトのままで問題ありません。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 14
標準のUnnamed (最上部) の代わりに、どういうわけか構成に適切な名前を付けることができます。また、アイデアがシステム内で Tomcat を正常に見つけたことを確認する必要があります (以前に既にダウンロードしてインストールしましたよね?)。見つからない場合は (その可能性は低いですが)、下矢印をクリックしてインストール場所を選択するか、複数ある場合は別のバージョンを選択します。私はそれを持っていて、すでにインストールされているので、すべてがスクリーンショットのように見えます。ウィンドウの一番下には、サーバーへのデプロイメントを目的としたアーティファクトが 1 つも存在しないという警告が表示されます。そして、この碑文の右側には、この欠陥を修正することを提案するボタンがあります。それをクリックすると、アイデア自体がすべてを見つけ、不足しているものをすべて自分で作成し、すべての設定を自分で行ったことがわかります。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 15
「サーバー」タブから「デプロイメント」タブに移動したこと がわかります。 「サーバー起動時のデプロイ」セクションには、デプロイする必要のあるアーティファクトがすでにあり、その下には、このアーティファクトがデプロイメント前にビルドされることが示されています。 申し込みます、わかりました。 まず、ウィンドウの下部に、アーティファクトが配置されるローカル Tomcat サーバーのセクションが表示されていることがわかります。ウィンドウの右側にある対応するボタンをクリックすると、このセクションを折りたたむことができます。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 16
また、起動用の緑色の三角形がすでにアクティブになっていることもわかります。すべてを確認したい場合は、プロジェクト設定のボタン (起動ボタンの右側、赤い矢印でマーク) をクリックし、[アーティファクト]セクションに移動して、アーティファクトが実際に作成されたことを確認します。[修正]ボタンを押すまでは存在しませんでしたが、現在はすべて問題ありません。そして、この構成は私たちに非常によく合っています。一言で言えば、my-super-project:warmy-super-project:warexplodedの違いは、 my-super-project:war がwarファイル(単なるアーカイブ) を 1 つだけ作成し、オプションが 1 つだけであることです。爆発は単に「展開された」戦争です。また、小さな変更をサーバーに迅速に展開できるため、このオプションの方が個人的には便利です。実際、アーティファクトは私たちのプロジェクトであり、コンパイル済みであるだけで、Tomcat に直接アップロードできるようにフォルダー構造が変更されています。次のようになります。
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 17
さて、これでプロジェクトを開始する準備がすべて整いました。 誰もが欲しがる緑色のスタートボタンを押して、結果を楽しみましょう! :)
IntelliJ Idea Enterprise で単純な Web プロジェクトを作成します。 ステップバイステップ、写真付き - 18
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION