CodeGym /Java Blog /Toto sisi /在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。一步一步,有圖
John Squirrels
等級 41
San Francisco

在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。一步一步,有圖

在 Toto sisi 群組發布
理解本文所需的知識:您已經或多或少地了解了Java Core,並希望了解JavaEE 技術Web 編程。對您來說,目前正在研究 Java Collections 任務是最有意義的,它處理的主題與本文很接近。
在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 1
目前,我使用的是IntelliJ IDEA 企業版編者註:這是 IDE 的付費擴展版,通常用於專業開發)。在其中處理 Web 項目比在免費的社區版中容易得多。在Enterprise Edition中,只需單擊鼠標即可構建項目,將其放入 servlet 容器中,啟動服務器,甚至在瀏覽器中打開該項目的網頁。在 IDEA 的免費版本中,您必須自己完成大部分工作,即“手動”。我使用Apache Maven構建項目並管理其生命週期。我在這個項目中只使用了它的一小部分能力(包/依賴管理)。作為 servlet 容器/應用程序服務器,我選擇了 Apache Tomcat 版本 9.0.12。

讓我們開始吧

首先,打開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. 也就是說,我們先寫頂級域名,加一個點,然後是二級域名,依此類推。這是普遍接受的方法。如果您是自己“研究”該項目(而不是作為公司的一部分),那麼您可以將您的個人域名放在這裡(也以相反的順序!)。當然,如果你有的話。:) 如果沒有,請不要擔心。你實際上可以在這裡寫任何東西
對於域名為 john.doe.org 的公司,GroupId 將為 org.doe.john。需要此命名約定來分隔不同公司生產的同名項目。
在此示例中,我將使用一個虛構的域:fatlady.info.codegym.cc。因此,我在GroupId字段中輸入cc.codergym.info.fatladyArtifactId只是我們項目的名稱。您可以使用字母和某些符號(例如連字符)來分隔單詞。我們的“工件”將完全按照我們在這裡寫的命名。在這個例子中,我將使用my-super-project。暫時不要觸及版本字段——保持原樣即可。 這是創建新項目時的標準IDEA 窗口。按照傳統,我們稱它為my-super-project項目已創建!在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 4在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 5
Pom.xml 立即打開。這是一個包含 Maven 設置的文件。如果我們想告訴 Maven 做什麼或在哪裡找到某些東西,我們將在這個 pom.xml 文件中描述所有這些。它位於項目的根目錄中。
我們看到它現在包含我們在創建Maven 項目時輸入的確切數據:groupIdartifactId版本(我們沒有觸及最後一個)。

我們項目的結構

這個Maven 項目有一個特定的結構。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 6如您所見,根具有:
  • 一個.idea目錄,其中包含當前項目的 IDEA 設置;
  • 一個src目錄,我們在其中創建源代碼;
  • my-super-project.iml文件,是IDEA創建的工程文件;
  • pom.xml文件(我之前提到的 Maven 項目文件),現在已打開。如果我在某處提到 pom.xml,這就是我正在談論的文件。
src文件夾內,有兩個子文件夾:
  • main — 用於我們的代碼;
  • 測試——用於測試我們的代碼。
maintest中,有一個java文件夾。您可以將它們視為同一個文件夾,除了main中的那個用於源代碼,而test中的那個用於測試代碼。目前,我們沒有用到資源文件夾。我們不會使用它。但是就把它放在那裡。

將其轉換為 Web 項目

現在是我們將Maven 項目轉換為 Web 項目的時候了。為此,請右鍵單擊此樹中的項目名稱並選擇添加框架支持…… 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 7將打開一個窗口,我們可以在其中為我們的項目添加對各種框架的支持。但我們只需要一個:Web Application。Ans 那是我們選擇的那個。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 8確保選中Web Application複選框,並且主窗口指示我們希望自動創建一個web.xml文件(如果尚未選中,我建議選中該複選框)。然後我們看到web文件夾已添加到我們的項目結構中。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 9這是我們的 web 項目的根地址/. 換句話說,如果我們在瀏覽器中輸入“ localhost ”(當然是在項目運行時),那麼它會在 Web 項目的根目錄下查找。如果我們輸入localhost/addUser ,那麼它將在web文件夾中查找名為addUser的資源。
主要你要明白的是,當我們把web文件夾放到Tomcat中時,它就是我們項目的根目錄。我們現在有特定的文件夾結構,但在我們要創建的完成項目中,它會略有不同。具體來說,web 文件夾將是根目錄。
web中,有一個名為WEB-INF的必需文件夾,其中包含web.xml文件,即我們在上一步中要求程序創建的文件夾。讓我們打開它。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 10你可以看到它裡面沒有任何有趣的東西,只有一個標題。順便說一下,如果您沒有請求創建文件,那麼您將不得不手動創建它,即手動輸入所有標題。或者,至少,在 Internet 上搜索現成的版本。我們需要web.xml做什麼?用於映射。在這裡,我們將為Tomcat闡明將哪些 URL 請求傳遞給哪些 servlet。但我們稍後再談。現在,將其留空。web文件還有一個index.jsp 文件. 打開它。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 11這是默認情況下將執行的文件,可以這麼說。換句話說,這正是我們開始項目時所看到的。基本上,jsp是一個普通的HTML 文件,只是您可以在其中執行 Java 代碼。

關於靜態和動態內容的一點點

靜態內容是不隨時間變化的內容。我們在HTML 文件中寫入的所有內容都按照寫入時的原樣顯示。如果我們寫“ hello world ”,這個文本將在我們打開頁面時立即顯示,5 分鐘後,明天,一周後,一年後。它不會改變。但是如果我們想在頁面上顯示當前日期呢?如果我們只寫“ 2017 年 10 月 27 日”,那麼明天我們會看到相同的日期,一周後,一年後。但我們希望日期是最新的。這就是在頁面上執行代碼的能力很有幫助的地方。我們可以得到一個date 對象,將其轉換成需要的格式,顯示在頁面上。這樣,每天打開頁面時,日期將始終是當前日期。如果我們只需要靜態內容,那麼我們只需要一個常規的 web 服務器和HTML 文件。我們不需要 Java、Maven 或 Tomcat。但如果我們想使用動態內容,那麼我們需要所有這些工具。但現在,讓我們回到我們的index.jsp 讓我們指明標準標題以外的內容,例如,“我的超級網絡應用程序! ”然後,在正文中,讓我們寫下“我還活著! ”我們幾乎準備好開始我們的項目了!不幸的是,通常用於啟動程序的綠色三角形未激活。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 12單擊它左側的按鈕(在屏幕上用紅色箭頭指示)並選擇編輯配置...這將打開一個窗口,我們將在其中單擊綠色加號以添加一些配置。單擊它(在窗口的左上角)。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 13選擇Tomcat 服務器>本地。將打開一個包含許多選項的窗口,但默認設置幾乎適合我們的所有內容。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 14我們可以給我們的配置一個漂亮的名字,而不是標準的未命名(在最頂部)。我們還需要驗證 IDEA 是否已在我們的系統上成功找到 Tomcat(您已經下載並安裝對的?)。如果未找到(不太可能),則按向下箭頭並選擇安裝位置。或者,如果您安裝了多個版本,則選擇不同的版本。我只有一個,它已經安裝好了。這就是它在我的屏幕上看起來的樣子的原因。在窗口的最底部,我們看到一個警告,提醒我們到目前為止還沒有任何工件被指示部署到服務器。此警告的右側是一個按鈕,建議我們修復此問題。我們點擊它,可以看到 IDEA 能夠自己找到所有東西,自己創建所有缺少的東西,並自己配置所有設置。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 15我們可以看到它把我們從Server選項卡移到了Deployment選項卡,在Deploy at the server startup下面部分,我們現在有一個要部署的工件。單擊應用和確定。 我們首先看到,在窗口底部,出現了一個部分,其中包含我們的本地 Tomcat 服務器,我們的工件將放置在該部分中。通過單擊窗口右側的相應按鈕來折疊此部分。 在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 16現在我們看到綠色啟動三角形處於活動狀態。對於那些喜歡仔細檢查所有內容的人,您可以單擊項目設置按鈕(在啟動按鈕的右側,用紅色箭頭指示),轉到“工件”部分,並確保工件確實已創建。它不存在,直到我們按下修復按鈕,但現在一切正常。這種配置非常適合我們。簡而言之,my-super-project:warmy-super-project:war exploded的區別在於my-super-project:war只包含一個war文件(只是一個存檔)和exploded版本簡直就是“開箱即用”的戰爭。就個人而言,這是我覺得更方便的選項,因為它可以讓您快速調試服務器上的小改動。從本質上講,工件是我們的項目,剛剛編譯——文件夾結構已更改為允許 Tomcat 直接訪問它。它看起來像這樣:
在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 17
現在一切準備就緒,可以啟動我們的項目了。按下珍貴的綠色啟動按鈕,享受結果吧!:)
在 IntelliJ IDEA Enterprise 中創建最簡單的 Web 項目。 一步一步,帶圖片 - 18
留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION