IntelliJ IDEA 開發(fā)Web應(yīng)用圖文教程

發(fā)表時(shí)間：2017-5-27

發(fā)布人：葵宇科技

瀏覽次數(shù)：65

兄弟們，今日頭條搜索三線城市程序員老陳關(guān)注我，我將持續(xù)不斷推出視頻教程。

一，簡介

Eclipse/MyEclipse確實(shí)用起來諸多不爽，準(zhǔn)備切換IntelliJ IDEA，本篇介紹如何配置IDEA并使用IDEA開發(fā)一個(gè)Web應(yīng)用。

二，軟件下載與安裝

1，首先下載安裝JDK并配置環(huán)境變量。

JDK安裝目錄D:\Java\jdk1.7.0_79
新建環(huán)境變量JAVA_HOME，其值為D:\Java\jdk1.7.0_79
環(huán)境變量PATH中添加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
新建環(huán)境變量（如果已有CLASSPATH則在其起始位置添加 .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;（最開始有個(gè)小數(shù)點(diǎn)）

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

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

三，創(chuàng)建Project

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

2，新建一個(gè)目錄IntelliJProject，用作IDEA項(xiàng)目的一個(gè)工作空間保存目錄。此處為：D:\Java\IntelliJProject

3，打開IDEA，界面如下，選擇Create New Project創(chuàng)建一個(gè)工作空間。
這里寫圖片描述

4，在New Project界面，注意選擇Project SDK為之前下載的版本，然后Next
這里寫圖片描述

5，不選中Create project from template，我們不用模版，自己創(chuàng)建一個(gè)純凈的項(xiàng)目。然后Next
這里寫圖片描述

6，Project location選中之前設(shè)定的目錄D:\Java\IntelliJProject，同時(shí)將Project name設(shè)為IntelliJProject（也可以跟目錄不同名，但是建議同名，比較好記憶）。然后Finish完成Project的創(chuàng)建。
這里寫圖片描述

7，至此Project創(chuàng)建完畢，項(xiàng)目結(jié)構(gòu)如圖：
這里寫圖片描述

四，創(chuàng)建Module

1，右鍵點(diǎn)擊項(xiàng)目名稱IntelliJProject，選擇New-Module，打開新建Module窗口，注意因?yàn)橐_發(fā)web項(xiàng)目，所以選擇Web Application，同時(shí)創(chuàng)建一個(gè)web.xml，所以選中Create web.xml選項(xiàng)。點(diǎn)擊Next。
這里寫圖片描述

2，Module name可設(shè)置為FirstModule，點(diǎn)擊Finish。
這里寫圖片描述

3，此時(shí)項(xiàng)目結(jié)構(gòu)如圖，在工作空間IntelliJProject下有一個(gè)FirstModule應(yīng)用，且已有web.xml配置文件和一個(gè)index.jsp網(wǎng)頁。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-3Res2WdG-1581740772113)(https://img-blog.csdn.net/20170527174439466?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd29zaGlzYW5nc2FuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

4，創(chuàng)建必要的classes和lib文件夾，classes用來放置編譯后的類，lib用來放置導(dǎo)入的包，都是需要的文件夾。創(chuàng)建方法：右擊WEB-INF，選擇New-Directory。
這里寫圖片描述

五，項(xiàng)目結(jié)構(gòu)設(shè)置

1，雖然已經(jīng)創(chuàng)建了classes和lib，但是此時(shí)項(xiàng)目并不知道這兩個(gè)文件夾的作用，需要配置一番。

2，選擇IDEA菜單欄的File-Project Structure，然后點(diǎn)擊Project Structure窗口左側(cè)菜單欄的Module，如圖:
這里寫圖片描述

3，在中間一欄選中FirstModule，然后選擇path選項(xiàng)卡，配置Output path和Test output path為classes目錄，然后點(diǎn)擊Apply，如圖：
這里寫圖片描述

4，選擇Dependencies選項(xiàng)卡，點(diǎn)擊**+**，選擇lib目錄，如圖：
這里寫圖片描述

5，在彈出的窗口選擇Jar Directory，然后點(diǎn)擊Apply。如圖
這里寫圖片描述

六，配置Tomcat服務(wù)器

1，選擇菜單欄Run-Edit Configurations，在打開的窗口的左側(cè)點(diǎn)擊**+**符號(hào)添加Tomcat。
這里寫圖片描述

2，將Name設(shè)置為Tomcat7，點(diǎn)擊Configure，配置之前下載的Tomcat如圖，然后點(diǎn)OK
這里寫圖片描述

3，去掉After Launch之前的勾，然后點(diǎn)擊Apply即可。注意默認(rèn)端口8080
這里寫圖片描述

七，部署web應(yīng)用并運(yùn)行

1，修改index.jsp代碼為：

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

2，在Run-Edit Configurations窗口選中剛剛建立的Tomcat7容器，然后選擇Deployment，點(diǎn)擊右邊的**+**號(hào)，選擇Artifact如圖：
這里寫圖片描述