如何在 IDEA 中創(chuàng)建并部署 JavaWeb 程序
前言
在之前 Java 的學(xué)習(xí)中，我們可能更多地是和控制臺程序打交道，也就是我們?nèi)粘Ｕf的黑框框程序。現(xiàn)在既然完成了 Java SE 部分的基礎(chǔ)知識，是時候來學(xué)習(xí) JavaWeb 部分。而隨著 IDEA 的強(qiáng)勢崛起和不斷更新，使用 Eclipse 的同學(xué)可能會有些不習(xí)慣 IDEA。這一點(diǎn)確實(shí)是，IDEA 不同版本之間的操作和設(shè)置可能都有微小的變動，就算你之前一直使用的 IDEA，也可能會隨著 IDEA 的更新找不到某些隱藏在犄角旮旯的操作。
今天我們就來看看，如何在 IDEA 最新版中從零創(chuàng)建一個 Java Web 項(xiàng)目，然后將其部署到 Tomcat 中，實(shí)現(xiàn)一個最簡單的 JavaWeb 小程序。
前排提升，寫作本博客時，博主使用的環(huán)境如下：
IDEA 2021.3.2（Ultimate Edition） Windows 11 Tomcat 9.0.52 JDK 11.0.11
接下來就主要從創(chuàng)建項(xiàng)目、配置 Tomcat 以及驗(yàn)證訪問三個部分來看看，如何在 IDEA 中創(chuàng)建、部署、運(yùn)行一個 JavaWeb 項(xiàng)目。
創(chuàng)建項(xiàng)目
新建一個 Java 項(xiàng)目
具體操作如下，依次進(jìn)入 File -> New -> Project，然后選擇左側(cè)的 Java 選項(xiàng)后默認(rèn)點(diǎn)擊 Next 即可。
選擇是否從模板創(chuàng)建
如果不勾選，此時創(chuàng)建出來的項(xiàng)目就是一個空項(xiàng)目。如果勾選上，就會創(chuàng)建一個最簡單的模板程序。這里默認(rèn)不勾選即可，直接點(diǎn)擊 Next 進(jìn)入下一步。
設(shè)置項(xiàng)目名
這里需要自己設(shè)置自己項(xiàng)目名以及項(xiàng)目所存放位置，Project name 為項(xiàng)目名，Project location 為項(xiàng)目存放地址。關(guān)于 More Settings 部分則不用管，會隨著我們設(shè)置好項(xiàng)目名和項(xiàng)目存放地址后自動變化。設(shè)置好之后，直接點(diǎn)擊 Finish 即可。
添加 Web 支持
項(xiàng)目創(chuàng)建完成之后，我們發(fā)現(xiàn)和之前的 Java SE 項(xiàng)目并沒有什么不同，而要將項(xiàng)目變成一個 Java Web 項(xiàng)目，就需要添加 Web 支持。具體操作為：在項(xiàng)目上單擊鼠標(biāo)右鍵，然后選擇 Add Framework Support 選項(xiàng)卡。
然后會出現(xiàn)如下的選項(xiàng)供我們選擇，這里勾選 Web Application 即可，最后點(diǎn)擊 OK 完成。
項(xiàng)目目錄
完成上面的步驟之后，一個空白的 Java Web 項(xiàng)目就創(chuàng)建好了。創(chuàng)建好之后的項(xiàng)目目錄如下，這里會在 web 目錄下自動生成一個 index.jsp 文件，現(xiàn)在大家都基本上拋棄了 jsp，所以我們一般都是選擇將其刪除。
D:\個人文件\代碼\IDEA\JAVAWEB-IDEA-DEMO
├─src
└─web
????└─WEB-INF
配置 Tomcat
點(diǎn)擊工具欄的 Add Configuration，彈出Run/Debug Configurations窗口
點(diǎn)擊左上角 +號，選擇Tomcat Server下的Local，注意不要選成了TomEE Server下的Local。
配置相關(guān)屬性
這里主要配置 Name，也就是我們 Tomcat 服務(wù)器的名稱，可以保持默認(rèn)不變，也可以設(shè)置為自己喜歡的名字。
Application Serveer，也就是我們本地 Tomcat 安裝的路徑。
如果勾選 After launch，那么就會在項(xiàng)目運(yùn)行起來后自動在瀏覽器中打開項(xiàng)目主頁，這里的瀏覽器可以根據(jù)自己平常用的進(jìn)行選擇。
URL，即運(yùn)行后默認(rèn)打開的網(wǎng)址。
最后，一般還需要點(diǎn)擊右下角的 Fix，IDEA 就會自動配置好項(xiàng)目的虛擬路徑 Application context。
點(diǎn)擊上面的 Fix步驟后，會自動跳轉(zhuǎn)到Deployment選項(xiàng)卡下，同時Server下的 URL 會變成以下形式：
http://localhost:8080/javaweb_idea_demo_war_exploded/
這里如果要想訪問項(xiàng)目主頁就很麻煩，為了方便直接通過 http://localhost:8080 就能進(jìn)入我們的項(xiàng)目，我們需要做如下配置。
首先是 Deploy選項(xiàng)卡下的Application Context修改成/。
然后將 Server選項(xiàng)卡下的URL修改為：
http://localhost:8080/
注意以下設(shè)置。為了實(shí)現(xiàn)熱部署，我們通常將 On Update action選擇為Redeploy，同時將On frame deactivation選擇為Update classes and resources。這樣一來，通過部署后一旦出現(xiàn)代碼改動，IDEA 就會自動將我們的項(xiàng)目重新部署，而不用再去重新啟動服務(wù)器，實(shí)現(xiàn)實(shí)時更新。此外，JRE設(shè)置這里默認(rèn)的是使用項(xiàng)目的 JRE 版本，如果要單獨(dú)設(shè)置，則可以在這里進(jìn)行改動。
驗(yàn)證訪問
之前我們說過，在我們新建項(xiàng)目并添加 Web 框架支持后，默認(rèn)會生成一個 index.jsp，我們需要將其刪除。
而為了驗(yàn)證我們程序是否配置成功，我們需要將其運(yùn)行起來進(jìn)行驗(yàn)證。這里我們選擇創(chuàng)建了一個 index.html，讓項(xiàng)目啟動后去訪問該頁面，如果出現(xiàn)預(yù)期內(nèi)容，則說明項(xiàng)目部署成功，否則則說明部署失敗。
其中 index.html 的內(nèi)容如下：
html>
<html?lang="en">
????<head>
????????<meta?charset="UTF-8">
????????<meta?name="viewport"
??????????????content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0">
????????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????????<title>主頁title>
????head>
????<body>
????????<p>你好，我是村雨遙p>
????body>
html>
然后啟動我們的 IDEA 項(xiàng)目，控制臺中就會打印出如下信息：
同時，瀏覽器將會自動彈窗訪問我們的 index.html。如果瀏覽器中正確出現(xiàn)如下圖中的信息，則說明我們的項(xiàng)目創(chuàng)建和部署就成功了。
注意
一般來講，完成上述的步驟之后，我們的項(xiàng)目就算創(chuàng)建、部署、運(yùn)行成功了。不過其中還是有幾點(diǎn)需要注意的地方，這里分別說明一下。
編譯輸出目錄
默認(rèn)情況下，項(xiàng)目編譯輸出的結(jié)果是在項(xiàng)目的 out 目錄下的，如果我們要改成自定義的路徑，就需要自己進(jìn)行設(shè)置。
我們一般自定義是選擇在 WEB-INF 目錄下創(chuàng)建一個 classes 目錄，然后依次進(jìn)入 File -> Project Structure ，選擇項(xiàng)目設(shè)置中的 Modules 選項(xiàng)卡，在右側(cè)的 Paths 選項(xiàng)卡下選擇 Use module compile out path，并將 Output path 設(shè)置為我們創(chuàng)建的 classes 目錄即可。
項(xiàng)目訪問端口
默認(rèn)情況下，IDEA 給每個新建的項(xiàng)目分配的接口都是 8080，如果我們想要自定義，則需要在配置 Tomcat 時注意，設(shè)置位置如下。
總結(jié)
OK，今天的學(xué)習(xí)就到這里了！如果您在學(xué)習(xí)實(shí)踐過程中遇到任何困難，歡迎加入我的技術(shù)交流群[1]，和大家一起交流討論，更好的學(xué)習(xí)與進(jìn)步！更多精彩內(nèi)容可以點(diǎn)擊直達(dá)[2]，您的收藏、轉(zhuǎn)發(fā)與點(diǎn)贊就是對我最大的支持！
參考資料
技術(shù)交流群: https://raw.githubusercontent.com/cunyu1943/ebooks/main/img/%E5%BE%AE%E4%BF%A1%E7%BE%A4.png
[2]點(diǎn)擊直達(dá): https://cunyu1943.github.io