一：创建 Maven 版的 Web 工程

1、说明

使用命令:

1	mvn archetype:generate

生成 Web 工程时，需要使用一个专门的archetype。这个专门生成 Web 工程骨架的 archetype 可以参照官网看到它的用法：

参数 archetypeGroupId、archetypeArtifactId、archetypeVersion 用来指定现在使用的 maven-archetype-webapp 的坐标。

2、操作

注意：如果在上一个工程的目录下执行 mvn archetype:generate 命令，那么 Maven 会报错：不能在一个非 pom 的工程下再创建其他工程。所以不要再刚才创建的工程里再创建新的工程，请另外创建一个同级目录。

然后运行生成工程的命令：

1	mvn archetype:generate -DarchetypeGroupId=org.apache.maven.archetypes -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4

下面的操作按照提示执行：

Define value for property ‘groupId’: com.atguigu.maven
Define value for property ‘artifactId’: pro02-maven-web
Define value for property ‘version’ 1.0-SNAPSHOT: :【直接回车，使用默认值】
Define value for property ‘package’ com.atguigu.maven: :【直接回车，使用默认值】
Confirm properties configuration:
groupId: com.atguigu.maven
artifactId: pro02-maven-web
version: 1.0-SNAPSHOT
package: com.atguigu.maven
Y: :【直接回车，表示确认】

3、生成的 pom.xml

在生成的目录中找到 pom.xml，确认打包的方式是 war 包形式

<groupId>com.atguigu.maven</groupId>
<artifactId>pro02-maven-web</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>

4、生成的 Web 工程的目录结构

webapp 目录下有 index.jsp

WEB-INF 目录下有 web.xml

5、创建 Servlet

① 在 main 目录下创建 java 目录

② 在 java 目录下创建 Servlet 类所在的包的目录

③ 在包下创建 Servlet 类

package com.atguigu.maven;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;

// Calculator这个类就是通过compile范围引入当前工程的
import com.atguigu.maven.Calculator;

// org.junit.Test这个类是通过test范围引入当前工程的
// import org.junit.Test;

// HelloServlet是main目录下的程序，它可以使用compile范围导入的依赖
// HelloServlet是main目录下的程序，它不能使用test范围导入的依赖
public class HelloServlet extends HttpServlet{

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.getWriter().write("hello maven web");

    }

}

④ 在 web.xml 中注册 Servlet

<servlet>
  <servlet-name>helloServlet</servlet-name>
  <servlet-class>com.atguigu.maven.HelloServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>helloServlet</servlet-name>
  <url-pattern>/helloServlet</url-pattern>
</servlet-mapping>

6、在 index.jsp 页面编写超链接

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <body>
    <h2>Hello World!</h2>
    <a href="${pageContext.request.contextPath}/helloServlet">访问Servlet</a>
    <a href="helloServlet">Access Servlet</a>
  </body>
</html>

JSP 全称是 Java Server Page，和 Thymeleaf 一样，是服务器端页面渲染技术。这里我们不必关心 JSP 语法细节，编写一个简单的超链接 HTML 标签即可。

7、编译

执行 mvn compile 命令出错：

程序包 javax.servlet.http 不存在
程序包 javax.servlet 不存在
找不到符号
符号: 类 HttpServlet
……

上面的错误信息说明：我们的 Web 工程用到了 HttpServlet 这个类，而 HttpServlet 这个类属于 servlet-api.jar 这个 jar 包。此时我们说，Web 工程需要依赖 servlet-api.jar 包。

8、配置对 servlet-api.jar 包的依赖

对于不知道详细信息的依赖可以到mvnrepository网站查询。使用关键词搜索，然后在搜索结果列表中选择适合的使用。

比如，我们找到的 servlet-api 的依赖信息：

<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>4.0.1</version>
    <scope>provided</scope>
</dependency>

这样就可以把上面的信息加入 pom.xml 的<dependencies>标签中。重新执行mvn compile命令。

9、将 Web 工程打包为 war 包

运行 mvn package 命令，生成 war 包的位置在工程名（artifactId）的 target 目录下，如下图所示：

10、将 war 包部署到 Tomcat 上运行

Tomcat 下载官网

将 war 包复制到 Tomcat/webapps 目录下

在 bin 目录下启动 Tomcat：

尝试通过浏览器尝试访问：

http://localhost:8080/pro02-maven-web/index.jsp

11、运行效果

访问 Sercket：

访问 Access Servlet：

分析：

pageContext 被解析为 $%7BpageContext.request.contextPath%7D

archetype-webapp 生成的 web 工程，默认创建的 web 版本为 2.3，导致在 jsp 中获取使用 pageContext 获取项目路径时被错误解析

解决方法：

将版本更改为 2.3 以上版本，或复制下面代码到 web.xml 文件中，改为 4.0 版本

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <welcome-file-list>
      <welcome-file>login.jsp</welcome-file>
    </welcome-file-list>
</web-app>