VSCode中開(kāi)發(fā)JavaWeb項(xiàng)目的詳細(xì)過(guò)程（Maven+Tomcat+熱部署）

第VSCode中開(kāi)發(fā)JavaWeb項(xiàng)目的詳細(xì)過(guò)程（Maven+Tomcat+熱部署）目錄1.安裝插件2.配置全局的Java與Maven3.開(kāi)始創(chuàng)建Maven項(xiàng)目4.配置該項(xiàng)目的settings.json5.補(bǔ)全項(xiàng)目結(jié)構(gòu)代碼與依賴(lài)導(dǎo)入6.編譯項(xiàng)目7.配置Tomcat服務(wù)器并部署

1.安裝插件

首先需要安裝所用到的插件，分別用來(lái)支持Java、熱部署和Tomcat服務(wù)器的插件

在插件市場(chǎng)中搜索Java，第一個(gè)就是ExtensionPackforJava，內(nèi)置了6個(gè)依賴(lài)插件，直接一鍵安裝即可。然后是熱部署插件，市場(chǎng)搜索Deploy安裝即可。最后是Tomcat服務(wù)器插件，因?yàn)橹暗腡omcatforJava被棄用了，官方推薦使用CommunityServerConnectors來(lái)進(jìn)行代替，同樣是搜索安裝即可。就是下圖的這三個(gè)插件。

2.配置全局的Java與Maven

快捷鍵shift+ctrl+p打開(kāi)搜索框，然后輸入settings.json，會(huì)出現(xiàn)下圖的情況

點(diǎn)擊第一個(gè)打開(kāi)設(shè)置的選項(xiàng)，就會(huì)跳轉(zhuǎn)到主settings.json文件中，這個(gè)文件是存在于C盤(pán)中的。下面是我的配置文件信息，根據(jù)需要對(duì)相關(guān)路徑進(jìn)行修改即可。

{

"editor.fontSize":16,

"liveServer.settings.donotVerifyTags":true,

"liveServer.settings.donotShowInfoMsg":true,

"explorer.confirmDelete":false,

"explorer.confirmDragAndDrop":false,

"security.workspace.trust.untrustedFiles":"open",

"liveServer.settings.CustomBrowser":"chrome",

"javascript.updateImportsOnFileMove.enabled":"always",

"emmet.triggerExpansionOnTab":true,

"redhat.telemetry.enabled":true,

//Maven的相關(guān)配置信息

"java.configuration.maven.globalSettings":"D:\\maven\\apache-maven-3.6.3\\conf\\settings.xml",

"java.maven.downloadSources":true,

"java.configuration.maven.userSettings":"",

"maven.executable.path":"D:\\maven\\apache-maven-3.6.3\\bin\\mvn.cmd",

"maven.settingsFile":"D:\\maven\\apache-maven-3.6.3\\conf\\settings.xml",

"maven.executable.options":"-DarchetypeCatalog=internal",

//Java相關(guān)配置信息

"java.configuration.runtimes":[

"name":"JavaSE-1.8",

"path":"C:\\ProgramFiles\\Java\\jdk1.8.0_181",

"default":true

"rsp-ui.enableStartServerOnActivation":[

"id":"redhat.vscode-community-server-connector",

"name":"CommunityServerConnector",

"startOnActivation":true

"java.jdt.ls.java.home":"c:\\ProgramFiles\\Java\\jdk1.8.0_181",

}

3.開(kāi)始創(chuàng)建Maven項(xiàng)目

點(diǎn)擊創(chuàng)建Java項(xiàng)目，選擇其中的Maven工具，由于是創(chuàng)建的JavaWeb項(xiàng)目，所以直接選擇webapp即可。接下來(lái)版本選默認(rèn)第一個(gè)的1.4即可，然后輸入自定義groupId和artifactId。確定之后會(huì)選擇項(xiàng)目的存放路徑，然后Maven就開(kāi)始構(gòu)建項(xiàng)目了。

注意到此需要按一下回車(chē)來(lái)繼續(xù)，并不是構(gòu)建卡死了

之后還有一個(gè)確認(rèn)，輸入y或者回車(chē)都可以來(lái)繼續(xù)

最后出現(xiàn)BuildSuccess即表示項(xiàng)目構(gòu)建成功，點(diǎn)擊右下方的open即可打開(kāi)工程

4.配置該項(xiàng)目的settings.json

項(xiàng)目打開(kāi)后，先對(duì)該項(xiàng)目的settings.json文件進(jìn)行配置，這個(gè)屬于該項(xiàng)目私人的配置文件，不同于上面全局的settings.json，它存在于本項(xiàng)目的.vscode文件夾中，一開(kāi)始是看不見(jiàn)的。還是shift+ctrl+p快捷鍵打開(kāi)搜索，輸入settings.json，打開(kāi)工作區(qū)設(shè)置的那個(gè)。

向其中添加配置信息，我的配置如下所示，多多少少與全局的settings.json中的配置有點(diǎn)重復(fù)冗余，如果覺(jué)得礙眼可以將重復(fù)配置的信息刪除掉。

{

"java.jdt.ls.java.home":"C:\\ProgramFiles\\Java\\jdk1.8.0_181",

"java.configuration.runtimes":[

"name":"JavaSE-1.8",

"path":"C:\\ProgramFiles\\Java\\jdk1.8.0_181",

"default":true

//maven、gradle的配置文件變更后自動(dòng)更新

"java.configuration.updateBuildConfiguration":"automatic",

//java源文件路徑

"ject.sourcePaths":[

"src/main/java",

"src/test/java",

//關(guān)閉自動(dòng)編譯

"java.autobuild.enabled":false,

//關(guān)閉debug前強(qiáng)制編譯

"java.debug.settings.forceBuildBeforeLaunch":false,

//在項(xiàng)目根目錄下生成.classpath等配置文件

"java.import.generatesMetadataFilesAtProjectRoot":true,

//!--配置maven,換成maven安裝目錄下的相關(guān)配置--

"maven.executable.path":"D:\\maven\\apache-maven-3.6.3\\bin\\mvn.cmd",

"java.configuration.maven.userSettings":"D:\\maven\\apache-maven-3.6.3\\conf\\settings.xml",

"maven.terminal.customEnv":[

"environmentVariable":"JAVA_HOME",

//!--jdk安裝根目錄--

"value":"C:\\ProgramFiles\\Java\\jdk1.8.0_181"

//使用Deploy插件來(lái)進(jìn)行熱部署時(shí)所需要的配置信息

"deploy":{

"packages":[

"name":"前端",

"description":"webapp里面的所有文件",

"files":[

"src/main/webapp/*",

"src/main/webapp/*/*",

"src/main/webapp/*.*",

"src/main/webapp/*/*.*",

"src/main/webapp/*/*/*.*",

"src/main/webapp/*/*/*/*.*",

"src/main/webapp/*/*/*/*/*.*",

"src/main/webapp/*/*/*/*/*",

"src/main/webapp/*/*/*/*/*/*.*",

"exclude":[

"src/main/webapp/test/*"

"deployOnSave":true,

"useTargetList":true,

"button":{

"text":"熱部署",

"tooltip":"點(diǎn)擊這里將前端部署到hotsite",

"targets":["HOTSITE"]

"targets":[

"type":"local",

"name":"HOTSITE",

"description":"Alocalfolder",

"dir":"target/SDDZYY/",

"mappings":[

"source":"src/main/webapp",

"isRegEx":false,

"target":"/"

}

注意：下面的Deploy配置信息是使用Deploy插件必須要有的。其中的files是一個(gè)層級(jí)目錄，目前必須這樣一層一層的寫(xiě)來(lái)進(jìn)行掃描。然后targets配置中的dir指明編譯后前端文件的路徑，這邊指定到target中去，因?yàn)楹竺婧蠖宋募幾g后也是存放到target中去，這樣的話(huà)就可以整合成一個(gè)完整的項(xiàng)目了，再將其部署到tomcat中即可，就是為什么需要指定存放到target的原因。

5.補(bǔ)全項(xiàng)目結(jié)構(gòu)代碼與依賴(lài)導(dǎo)入

打開(kāi)項(xiàng)目之后，文件目錄并不完整，缺失了很多，maven的老毛病了，自己手動(dòng)補(bǔ)全文件夾，工程目錄如下

然后將需要遷移的項(xiàng)目代碼進(jìn)行填充進(jìn)去，后端Java代碼放入到j(luò)ava文件夾中，前端頁(yè)面代碼放到webapp文件夾中，注意web.xml別忘了替換掉。

導(dǎo)入代碼后會(huì)發(fā)現(xiàn)Java代碼爆紅了，是因?yàn)闆](méi)有導(dǎo)入依賴(lài)所致，下面進(jìn)行依賴(lài)導(dǎo)入。

由于是Maven項(xiàng)目，所以直接使用自帶的pom.xml進(jìn)行導(dǎo)入了，對(duì)于中央倉(cāng)庫(kù)上有的依賴(lài)包，直接點(diǎn)擊Maven上的+號(hào)進(jìn)行搜索添加對(duì)應(yīng)的依賴(lài)即可?；蛘咧苯涌截愐蕾?lài)的gav坐標(biāo)到pom中也可以。

如果需要導(dǎo)入本地的第三方j(luò)ar包，就只能一個(gè)個(gè)手動(dòng)導(dǎo)入了，全部添加到pom.xml中去。下面做一個(gè)依賴(lài)的結(jié)構(gòu)示范。就是這樣的格式一個(gè)個(gè)的導(dǎo)入即可。

dependency

groupIdfastjson-1.2.47/groupId

artifactIdfastjson-1.2.47/artifactId

version1.2.47/version

scopesystem/scope

systemPath${basedir}/src/main/webapp/WEB-INF/lib/fastjson-1.2.47.jar/systemPath

/dependency

對(duì)了，還需要配置maven編譯class文件的路徑信息，也是在pom.xml中配置，在build標(biāo)簽下新增這幾行。

sourceDirectorysrc/main/java/sourceDirectory

resources

resource

directorysrc/main/resources/directory

/resource

/resources

outputDirectory${basedir}/target/SDDZYY/WEB-INF/classes/outputDirectory

6.編譯項(xiàng)目

下面開(kāi)始編譯項(xiàng)目，包括前端文件與后端文件

點(diǎn)擊Maven選項(xiàng)卡中的compile來(lái)將后端文件編譯成class文件，保存到target下的指定文件夾中去了。

在工具的最底端，有一個(gè)熱部署的按鈕，只需要第一次的時(shí)候點(diǎn)擊就可以了，以后更改項(xiàng)目文件的時(shí)候直接ctrl+s保存就會(huì)進(jìn)行熱部署，就不再需要按了。點(diǎn)擊之后，會(huì)掃描之前settings.json中配置的文件路徑，將其中的文件進(jìn)行拷貝到target下的項(xiàng)目文件中，每次ctrl+s都會(huì)觸發(fā)更新操作的。

然后查看項(xiàng)目的target下的對(duì)應(yīng)項(xiàng)目文件夾，后端文件被編譯到了WEB-INF文件夾下面了。如下所示。

7.配置Tomcat服務(wù)器并部署

OK，整體的工程已經(jīng)部署完畢了，下面要將工程部署到Tomcat服務(wù)器上去了。安裝CommunityServerConnectors插件之后會(huì)在控制欄多了一個(gè)SERVERS的選項(xiàng)卡，打開(kāi)并添加服務(wù)器。

點(diǎn)擊創(chuàng)建新的Server

然后會(huì)詢(xún)問(wèn)你是否下載服務(wù)器，如果本機(jī)沒(méi)有Tomcat的話(huà)就點(diǎn)擊yes，然后選擇對(duì)應(yīng)版本下載就好了。由于我的機(jī)子上有Tomcat，直接點(diǎn)擊No，userserverondisk了。

然后這邊會(huì)讓你選擇你本地的Tomcat安裝路徑，選擇到該路徑就可以了。

然后會(huì)