和之前構建maven項目基本一樣，只需注意選擇模版的時候選擇webapp：

Paste_Image.png

構建完畢后，如圖：

Paste_Image.png

發現有小紅叉，不要緊，是因為沒有Servlet Api的緣故。進入百寶箱搜索“servlet”，出現：

Paste_Image.png

進入詳情，選擇使用數最多的3.0.1，進入復制它的坐標：

Paste_Image.png

在pom.xml里增加這個依賴，并添加servlet的<scope>為provided和修改junit的版本為4.10.

<dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.10</version>
            <scope>test</scope>
        </dependency>
        
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <!-- 只在測試和編譯時運行 -->
            <scope>provided</scope>
        </dependency>

    </dependencies>

這時，發現左側的目錄結構缺失很多。我們要一一補全。

Paste_Image.png

為了方便創建文件夾，我們需要把Eclipse的Navigator試圖調出來：

Paste_Image.png

然后按照Maven的目錄結構創建就好了~

Paste_Image.png

下一步，確認classes文件的輸出路徑。項目右鍵【Build Path】依次點擊，直到如圖，查看路徑如圖為正確，否則修改到這個路徑上。

Paste_Image.png

然后要將項目轉化稱Web項目，項目上右鍵，點擊【Properties】，找到【Peoject Facets】勾上【Dynamic Web Module】，點擊Ok。

Paste_Image.png

再次項目右鍵，點擊【Properties】，找到【Deployment Assembly】，刪掉test的目錄。因為發布的時候，我們是不需要測試的東西的。直接刪掉就可以了。

Paste_Image.png

到這里呢，最簡陋簡單的WebDemo完成了。下面需要將其打成war包，放到web容器中，就可以在瀏覽器中訪問了。這里使用jetty作為web容器，現在需要將它加入到<build>標簽中。

Paste_Image.png

<build>
        <finalName>mavenwebdemo</finalName>
        <plugins>
            <plugin>
                <groupId>org.mortbay.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>8.1.16.v20140903</version>
            </plugin>
        </plugins>
    </build>

保存，然后如圖：

Paste_Image.png

點擊run后，控制臺會顯示下載很多jar包，直到最后會出現：

Paste_Image.png

此時，打開瀏覽器輸入localhost:8080，出現：

Paste_Image.png

我們還可以指定讓jetty在package階段運行。

            <plugin>
                <groupId>org.mortbay.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>8.1.16.v20140903</version>
                <executions>
                    <execution>
                        <phase>package</phase>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

Paste_Image.png

結果和jetty:run是一樣的。

以上是jetty作為web容器。下面我們讓tomcat作為容器。

打開tomcat官網：http://tomcat.apache.org/

Paste_Image.png

Paste_Image.png

Paste_Image.png

上圖是tomcat6和tomcat7的plugin依賴。我選用tomcat7的。先注釋掉jetty。

<plugins>
            <!--  <plugin>
                <groupId>org.mortbay.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>8.1.16.v20140903</version>
                <executions>
                    <execution>
                        <phase>package</phase>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>-->

            <!-- tomcat7 -->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <executions>
                    <execution>
                        <phase>package</phase>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

        </plugins>

再次執行命令：clean package

Paste_Image.png

瀏覽器如下：

Paste_Image.png

到這里，我的Maven學習就結束了。循序漸進，使我受益匪淺，相信在工作中也能更加優雅地運用Maven，我也會時常溫故而知新，感謝慕課網的老師，喜歡視頻學習的小伙伴可以戳：Maven學習