和之前构建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学习