快捷導(dǎo)航

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

更新時(shí)間：2022年09月30日 10:00:49 作者：陌路skr

這篇文章主要介紹了VSCode中開(kāi)發(fā)JavaWeb項(xiàng)目（Maven+Tomcat+熱部署）,本文分步驟通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下

1.安裝插件

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

在插件市場(chǎng)中搜索Java，第一個(gè)就是Extension Pack for Java，內(nèi)置了6個(gè)依賴插件，直接一鍵安裝即可。然后是熱部署插件，市場(chǎng)搜索Deploy安裝即可。最后是Tomcat服務(wù)器插件，因?yàn)橹暗腡omcat for Java被棄用了，官方推薦使用Community Server Connectors來(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:\\Program Files\\Java\\jdk1.8.0_181",
          "default": true
        }
      ],
      "rsp-ui.enableStartServerOnActivation": [
        {
          "id": "redhat.vscode-community-server-connector",
          "name": "Community Server Connector",
          "startOnActivation": true
        }
      ],
      "java.jdt.ls.java.home": "c:\\Program Files\\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)目了。

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

之后還有一個(gè)確認(rèn)，輸入y或者回車都可以來(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:\\Program Files\\Java\\jdk1.8.0_181",
    "java.configuration.runtimes": [
        {
            "name": "JavaSE-1.8",
            "path": "C:\\Program Files\\Java\\jdk1.8.0_181",
            "default": true
          }
      ],
    //maven、gradle的配置文件變更后自動(dòng)更新
    "java.configuration.updateBuildConfiguration": "automatic",
    //java源文件路徑
    "java.project.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:\\Program Files\\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": "A local folder",
                "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中去，這樣的話就可以整合成一個(gè)完整的項(xiàng)目了，再將其部署到tomcat中即可，就是為什么需要指定存放到target的原因。

5.補(bǔ)全項(xiàng)目結(jié)構(gòu)代碼與依賴導(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)入依賴所致，下面進(jìn)行依賴導(dǎo)入。

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

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

<dependency>
        <groupId>fastjson-1.2.47</groupId>
        <artifactId>fastjson-1.2.47</artifactId>
        <version>1.2.47</version>
        <scope>system</scope>
        <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/fastjson-1.2.47.jar</systemPath>
      </dependency>

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

<sourceDirectory>src/main/java</sourceDirectory>
    <resources>
      <resource>
        <directory>src/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ù)器上去了。安裝Community Server Connectors插件之后會(huì)在控制欄多了一個(gè)SERVERS的選項(xiàng)卡，打開(kāi)并添加服務(wù)器。

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

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

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

然后會(huì)出現(xiàn)Tomcat的配置項(xiàng)，有需要可以改個(gè)名字啥的，然后無(wú)腦Finish即可。

然后下面就會(huì)出現(xiàn)一個(gè)Tomcat了，下面進(jìn)行項(xiàng)目部署。

點(diǎn)擊Add Deployment選項(xiàng)

選擇File或者是Exploded，F(xiàn)ile就是文件，一般是用來(lái)選擇war包的，還有一個(gè)是選擇文件夾的，這邊我們用到了熱部署，會(huì)實(shí)時(shí)更新target，所以選擇Exploded，指定到上面編譯后的項(xiàng)目文件夾，即我的工程下的target/SDDZYY文件夾。

然后會(huì)讓你選擇是否配置參數(shù)，這邊直接選擇No即可。

然后就會(huì)發(fā)現(xiàn)對(duì)應(yīng)Tomcat下面多了個(gè)項(xiàng)目，這就是咱部署的項(xiàng)目。

接下來(lái)先啟動(dòng)Tomcat，然后點(diǎn)擊Publish Server(Full)進(jìn)行項(xiàng)目發(fā)布

接下里就可以訪問(wèn)項(xiàng)目了，可以自己手動(dòng)輸入localhost:8080/項(xiàng)目地址，還有一種簡(jiǎn)單的辦法。點(diǎn)擊Server Actions選項(xiàng)卡。

選擇Show in browser選項(xiàng)

會(huì)自動(dòng)出現(xiàn)兩個(gè)地址，點(diǎn)擊第二個(gè)就可以自動(dòng)打開(kāi)瀏覽器并訪問(wèn)該地址。

因?yàn)槭褂昧薉vploy插件，當(dāng)你修改項(xiàng)目后，不管是前端頁(yè)面文件還是后端的Java文件，只要修改了，然后ctrl+s保存下，Deploy就會(huì)工作，更新target對(duì)應(yīng)的項(xiàng)目文件。然后瀏覽器刷新一下就可以展示出最新的結(jié)果，無(wú)需重啟服務(wù)器。

到此這篇關(guān)于VSCode中開(kāi)發(fā)JavaWeb項(xiàng)目（Maven+Tomcat+熱部署）的文章就介紹到這了,更多相關(guān)VSCode開(kāi)發(fā)JavaWeb項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: