創(chuàng)建項(xiàng)目

創(chuàng)建Java Web項(xiàng)目

ctrl+shift+p打開(kāi)搜索Maven原型， 并選擇從maven原型創(chuàng)建新項(xiàng)目

或者按如下方式：選擇從Maven原型創(chuàng)建Web項(xiàng)目

從maven-archetype-webapp原型創(chuàng)建項(xiàng)目

接著選擇原型版本、輸入包名、項(xiàng)目名、選擇項(xiàng)目存放位置

注意：到此需要按一下回車(chē)來(lái)繼續(xù)

輸入Y或者回車(chē)確認(rèn)

補(bǔ)全項(xiàng)目結(jié)構(gòu)

通過(guò)Maven原型創(chuàng)建的的項(xiàng)目目錄結(jié)構(gòu)是不完整的

手動(dòng)補(bǔ)全，新工程目錄如下

修改pom.xml

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

配置Tomcat Server

安裝Tomcat for Java插件，但是其已經(jīng)過(guò)時(shí)了

但是其推薦使用Community Server Connector插件

安裝Community Server Connectors插件之后會(huì)在控制欄多了一個(gè)SERVERS的選項(xiàng)卡

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

可能出現(xiàn)異常：

Unable to create the server: Extension backend error - there are no rsp providers currently running to choose from. they may still be initializing.

原因：

項(xiàng)目使用的JDK版本過(guò)低，讓項(xiàng)目使用更高的JDK版本即可解決

解決：

修改當(dāng)前項(xiàng)目的.vscode文件夾中的settings.json文件，添加JDK11配置，不使用全局settings.json中配置的JDK8

  // Java配置  
  "java.jdt.ls.java.home": "D:/Development/Java/jdk11",
  "java.dependencies.enabled": true,
 
  // 是否自動(dòng)更新Java構(gòu)建配置
  "java.configuration.updateBuildConfiguration": "automatic",
  
  // 自動(dòng)啟動(dòng)Community Server Connector擴(kuò)展
  "rsp-ui.enableStartServerOnActivation": [
    {
      "id": "redhat.vscode-community-server-connector",
      "name": "Community Server Connector",
      "startOnActivation": true
    }
  ],

會(huì)詢(xún)問(wèn)是否下載服務(wù)器，這里選擇No，user server on disk，使用本地安裝的Tomcat

選擇本地的Tomcat安裝路徑

然后出現(xiàn)Tomcat的配置項(xiàng)，根據(jù)需要修改，默認(rèn)即可

點(diǎn)擊Finish后，Tomcat服務(wù)器就添加配置好了

項(xiàng)目部署

執(zhí)行項(xiàng)目打包命令后，target目錄將出現(xiàn)一個(gè)demo.war與一個(gè)demo項(xiàng)目名的目錄

選擇Tomcat，點(diǎn)擊Add Deployment選項(xiàng)，進(jìn)行項(xiàng)目部署

選擇部署類(lèi)型

選擇File: 就是選擇文件，一般用來(lái)選擇war包

選擇Exploded: 就是選擇文件夾，如果使用熱部署，選擇編譯后的項(xiàng)目文件夾，會(huì)進(jìn)行實(shí)時(shí)更新

部署編譯目錄

選擇打包生成的編譯目錄

會(huì)詢(xún)問(wèn)選擇是否配置參數(shù)，這里選擇No

于是Tomcat目錄下就多了個(gè)項(xiàng)目

啟動(dòng)Tocmat

點(diǎn)擊Publish Server(Full)進(jìn)行項(xiàng)目發(fā)布

部署war包

執(zhí)行選擇打包生成的demo.war文件

于是Tomcat目錄下就多了個(gè)項(xiàng)目

啟動(dòng)Tocmat

訪問(wèn)http://localhost:8080/demo/

修改index.jsp

需要重新執(zhí)行maven的package打包，再次訪問(wèn)即可達(dá)到熱部署效果，但是這種方式效率不高，尤其是項(xiàng)目大時(shí)，編譯打包緩慢，此時(shí)就需要使用熱部署

熱部署

Deploy：Deploy是一款熱部署插件。

熱部署配置

編輯或者創(chuàng)建當(dāng)前項(xiàng)目的.vscode文件夾中的settings.json文件

在項(xiàng)目的settings.json中添加熱部署配置信息

{
 //Deploy插件熱部署所需配置信息
    "deploy": {
     "packages": [
         {
             "name": "web app",
             "description": "配置webapp中的文件路徑",
             "files": [
              "src/main/webapp/*",
              "src/main/webapp/*/*",
              "src/main/webapp/**",
             ], 
             "exclude": [
                 "src/main/webapp/test/*"
             ],
             "deployOnSave": true,
             "useTargetList": true,
             "button": {
              "text": "熱部署",
              "tooltip": "點(diǎn)擊部署",
              "targets": [ "HOTSITE" ]
          },

         }
     ],
     "targets": [
         {
             "type": "local",
             "name": "HOTSITE",
             "description": "配置指向編譯目錄",
             "dir": "target/TEST/",// 指向編譯后的文件路徑
             "mappings": [
                 {
                     "source": "src/main/webapp",
                     "isRegEx": false,
                     "target": "/"
                 }
             ]
         }
     ]
	},
 }

編譯配置

點(diǎn)擊Maven菜單中的compile按鈕，將后端文件編譯成class文件，保存到target下的classes文件夾中

為了配合熱部署，打卡項(xiàng)目pom.xml文件，修改maven的默認(rèn)編譯位置，讓后端代碼編譯到某一個(gè)目錄，如：target/TEST/

 <build>
    <sourceDirectory>src/main/java</sourceDirectory>
        <resources>
          <resource>
            <directory>src/main/resources</directory>
          </resource>
        </resources>
    <outputDirectory>${basedir}/target/TEST/WEB-INF/classes</outputDirectory>
  </build>

部署

選擇需要熱部署的目錄，會(huì)實(shí)時(shí)更新該目錄數(shù)據(jù)，也就是選擇編譯后的項(xiàng)目文件夾，即工程下的target/TEST目錄

Tomcat目錄下就多出一個(gè)個(gè)項(xiàng)目

啟動(dòng)Tomcat，點(diǎn)擊Publish Server(Full)進(jìn)行項(xiàng)目發(fā)布

訪問(wèn)瀏覽器：

啟動(dòng)熱部署

點(diǎn)擊熱部署按鈕啟動(dòng)熱部署，修改index.jsp文件測(cè)試是否生效

修改index.jsp文件后訪問(wèn)瀏覽器：

總結(jié) 

到此這篇關(guān)于Visual Studio Code配置Tomcat運(yùn)行Java Web項(xiàng)目詳細(xì)步驟的文章就介紹到這了,更多相關(guān)VS Code配置Tomcat運(yùn)行Java Web內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論