天天看點

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

1. 簡介

Eclipse/MyEclipse确實用起來諸多不爽,準備切換IntelliJ IDEA,本篇介紹如何配置IDEA并使用IDEA開發一個Web應用。

2. 軟體下載下傳與安裝

1,首先下載下傳安裝JDK并配置環境變量。

JDK安裝目錄D:\Java\jdk1.7.0_79

建立環境變量JAVA_HOME,其值為D:\Java\jdk1.7.0_79

環境變量PATH中添加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

建立環境變量(如果已有CLASSPATH則在其起始位置添加 .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;(最開始有個小數點)

2,下載下傳Tomcat并解壓到D:\Java\apache-tomcat-7.0.73

3,下載下傳并安裝IntelliJ IDEA 2016.3.4,這裡盡量安裝2016版本的,其他版本可能跟下面截圖中不大一樣哦。安裝過程比較簡單,一直下一步下一步就行,不再具體介紹。

3. 建立Project

1,首先必須做一個說明,在IDEA中有兩個非常重要的概念分别為Project和Module,注意Project是指的工作空間,而Module指的是工作控件下面的一個應用,比如一個Web應用就是一個Module。(IDEA中的Project相當于MyEclipse中的Workspace,而IDEA中的Module相當于MyEclipse中的Project)

2,建立一個目錄IntelliJProject,用作IDEA項目的一個工作空間儲存目錄。此處為:D:\Java\IntelliJProject

3,打開IDEA,界面如下,選擇Create New Project建立一個工作空間。

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作
4,在New Project界面,注意選擇Project SDK為之前下載下傳的版本,然後Next
IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作
5,不選中Create project from template,我們不用模版,自己建立一個純淨的項目。然後Next
IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作
6,Project location選中之前設定的目錄

D:\Java\IntelliJProject

,同時将Project name設為IntelliJProject(也可以跟目錄不同名,但是建議同名,比較好記憶)。然後Finish完成Project的建立。
IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作
7,至此Project建立完畢,項目結構如圖:
IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

4. 建立Module

1,右鍵點選項目名稱IntelliJProject,選擇New-Module,打開建立Module視窗,注意因為要開發web項目,是以選擇Web Application,同時建立一個web.xml,是以選中Create web.xml選項。點選Next。

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

2,Module name可設定為FirstModule,點選Finish。

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

3,此時項目結構如圖,在工作空間IntelliJProject下有一個FirstModule應用,且已有web.xml配置檔案和一個index.jsp網頁。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-3Res2WdG-1581740772113)(https://img-blog.csdn.net/20170527174439466?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd29zaGlzYW5nc2FuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

4,建立必要的classes和lib檔案夾,classes用來放置編譯後的類,lib用來放置導入的包,都是需要的檔案夾。建立方法:右擊WEB-INF,選擇New-Directory。

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

5. 項目目結構設定

1,雖然已經建立了classes和lib,但是此時項目并不知道這兩個檔案夾的作用,需要配置一番。

2,選擇IDEA菜單欄的File-Project Structure,然後點選Project Structure視窗左側菜單欄的Module,如圖:

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

3,在中間一欄選中FirstModule,然後選擇path頁籤,配置Output path和Test output path為classes目錄,然後點選Apply,如圖:

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

4,選擇Dependencies頁籤,點選**+**,選擇lib目錄,如圖:

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

5,在彈出的視窗選擇Jar Directory,然後點選Apply。如圖

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

6. 配置Tomcat伺服器

1,選擇菜單欄Run-Edit Configurations,在打開的視窗的左側點選**+**符号添加Tomcat。

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

2,将Name設定為Tomcat7,點選Configure,配置之前下載下傳的Tomcat如圖,然後點OK

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

3,去掉After Launch之前的勾,然後點選Apply即可。注意預設端口8080

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

7. 部署web應用并運作

1,修改index.jsp代碼為:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>第一個網頁</title>
  </head>
  <body>
  測試網頁
  </body>
</html>

      

2,在Run-Edit Configurations視窗選中剛剛建立的Tomcat7容器,然後選擇Deployment,點選右邊的**+**号,選擇Artifact如圖:

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

3,選擇之前的FirstModule,配置其Application context為**/FirstApp**如圖,然後點選OK

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

4,在最下方Application Servers視窗左側的啟動按鈕,啟動Tomcat

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

5,出現資訊資訊: Server startup in 149 ms,表示啟動完成。

6,在浏覽器位址欄輸入:http://localhost:8080/FristApp/index.jsp

注意FirstApp即為配置的Application context,頁面如下,成功了!

IntelliJ IDEA 開發Web應用圖文教程4. 建立Module5. 項目目結構設定6. 配置Tomcat伺服器7. 部署web應用并運作

繼續閱讀