基于Eclipse、Maven 和 Apache Tomcat的Java Servlet 和 JSP Hello World 教程

短命女 2023-09-30 08:53 18阅读 0赞

在本 Java 教程中，我们将帮助您了解使用 Eclipse IDE、Maven 作为构建系统、Tomcat 作为 Web 服务器从头开始开发 Java Web 应用程序（基于 Servlet 和 JSP）的过程。本教程对 JSP、Servlet、Eclipse、Maven 和 Tomcat 的初学者很有帮助。

本教程中使用了以下技术和软件：

*  JDK 8
 *  Servlet 3.1
 *  JSP 2.3
 *  Eclipse 4.6 (Neon)
 *  Apache Tomcat 8

开始吧。

### **1. 创建 Java 动态 Web 项目** ###

在 Eclipse IDE 中，单击菜单**File > New > Dynamic Web Project**为 Java Web 应用程序创建一个项目。将项目命名为**HelloWorldJavaEE** 并保留以下默认设置：

*  目标运行时：*Apache Tomcat v8.0*
 *  动态网页模块版本（Servlet 版本）：*3.1*
 *  配置：*Apache Tomcat v8.0 的默认配置*

如以下屏幕截图所示：

![f38ee91ee8a99e00a0636d46387ee50c.png][]

单击**下一步**两次以转到此屏幕：

![9ba79e3282f75d912fe4944b8857f65b.png][]

在这里，我们可以检查选项*生成 web.xml 部署描述符*以创建**web.xml**文件。但是由于 Servlet 3.0 可以用注解声明，我们可以选择不创建这个 XML 文件。单击**完成**。

Eclipse 创建的项目如下所示：

![ed242eee6473fb12a01acf43d8bcfaa1.png][]

这是一个典型的 Java EE 项目。接下来，我们将添加 Maven 支持。

### **2.在Maven的项目文件中添加Serlvet和JSP的依赖** ###

现在，我们需要添加 Maven 作为我们项目的构建管理器。为此，请右键单击项目并选择**配置 > 转换为 Maven**项目。出现*Create New POM*对话框，输入以下信息：

![745e092a454e1ed45932c8bf29ab1cd0.png][]

请注意，**组 ID**将用作我们 Java 代码的主包。现在您可以看到在项目中创建的**pom.xml**文件。以 XML 模式打开它，并将以下代码放在**<description>**和**<build>**元素之间：

<dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

您可以看到这是 Servlet API 3.1.0 和 JSP API 2.3.1 的两个依赖项。保存 **pom.xml**文件，Maven 将在几秒钟内下载依赖的 JAR 文件，您可以在项目的 **Libraries**部分看到：

![48002d9ae984f7d317359c3c21f43488.png][]

## **3. 创建 JSP 页面** ##

右键单击项目并选择**New > JSP File**。*在New JSP File*对话框中输入**index.jsp**作为文件名：

![675b17dada296d7966cca1c89004fa2b.png][]

单击**Finish**，您会看到 Eclipse 在**WebContent**目录下创建了**index.jsp**文件。使用以下代码更新它：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">1</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">2</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">3</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">4</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">5</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">6</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">7</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">8</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">9</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">10</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">11</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">12</span></span></span></span> 
    </div> 
    <div style="margin-left:0;text-align:right;"> 
     <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="color:#787878;">13</span></span></span></span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>pageEncoding="ISO-8859-1"%&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"http://www.w3.org/TR/html4/loose.dtd"&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;</code><code>html</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;</code><code>head</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=ISO-8859-1"</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;</code><code>title</code><code>&gt;Hello World Java EE&lt;/</code><code>title</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;/</code><code>head</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;</code><code>body</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code><code>&gt;Hello JSP and Servlet!&lt;/</code><code>h1</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;/</code><code>body</code><code>&gt;</code></span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="color:#333333;"><span style="background-color:#ffffff;"><span style="background-color:#FFFFFF;"><span style="background-color:#ffffff;"><code>&lt;/</code><code>html</code><code>&gt;</code></span></span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如您所见，此页面仅使用 HTML 代码来显示文本“Hello JSP and Servlet！”。

### **4. 测试 JSP 页面** ###

现在，让我们测试一下 JSP 页面，看看服务器是否正常工作。如果您尚未将 Tomcat 服务器添加到 Eclipse，请[按照本教程][Link 1]将 Apache Tomcat 添加到 IDE。

要将项目部署到 Tomcat 上，只需将项目从**Project Explorer**视图拖到**Servers**视图，这会产生以下屏幕截图：

![894678ad6cbebc307f729f984769528f.png][]

右键单击服务器并选择**Start**。Tomcat 将在几秒钟后处于 Started 状态，您会看到 Console 视图中的最后一行是这样的：

现在我们可以通过以下方式测试 JSP 页面：

\- 右键单击项目，选择**Run As > Run on Server** ，然后在*Run on Server*对话框中单击**Finish 。**这将在 IDE 中打开一个内部 Web 浏览器，如下所示：

![eb958ea436be05b75e4498727391176e.png][]

如果您看到页面显示“Hello JSP and Servlet！”，则表示 Web 应用程序已启动并成功运行。恭喜！

\- 另一种方法是打开外部浏览器，例如 Google Chrome 并输入以下 URL（如内部网络浏览器所示）：

***http://localhost:8080/HelloWorldJavaEE/***

### **5.更新JSP页面（添加表单）** ###

接下来，让我们更新 JSP 页面以使用 Java servlet。这个想法是添加一个 Web 表单并在提交时，该表单将由 servlet 处理。**在页面的<body>**标记之间添加以下代码：

此 HTML 代码将带有文本字段和提交按钮的表单添加到页面。表单的**action**属性指定处理此表单提交的 URL。在这种情况下，我们指定一个相对于应用程序的路径，它指向一个我们将在下一节中创建的 Java servlet。

保存文件并刷新浏览器，您将看到：

![73318bd2fa9f2c783dbc7ead8d1b3f0a.png][]

尝试在文本字段中输入内容并单击**Call Servlet**，我们会得到一个 404 错误页面，如下所示：

![a80a92bafa2e11ec3689f4a8b7e6634f.png][]

别担心。这是因为我们还没有创建任何 Java servlet 来处理这个请求。我们将在下一节中这样做。

## **6. 创建一个 Java Servlet** ##

在创建 servlet 之前，让我们通过右键单击项目创建一个名为**net.codejava.javaee****的 Java 包，选择New > Package**。*在New Java Package*对话框中输入该包名称。

现在单击新创建的包名并选择**New > Servlet**，然后在*Create Servlet*对话框中输入**HelloServlet**作为类名：

![3ee4e7f97a038bc99fb14a48e9af39be.png][]

单击**下一步**。在下一个屏幕中，编辑从*/HelloServlet*到*/helloServlet*的 URL 映射，如以下屏幕截图所示：

![e0405a8e75493fa978fa16c667e4cc56.png][]

**注意：**此 URL 映射必须与 JSP 页面中为表单的**action**属性指定的值匹配，以便 servlet 可以处理来自表单的请求。

在下一个屏幕中，取消选中选项***doGet***以便仅生成**doPost()**方法来处理表单：

![a9c513f1ecde59e301967001cd8ebc17.png][]

点击**Finish**，让Eclipse为**HelloServlet**类生成代码，如下图：

![f8318f746a55d816c8c950fc0cc1cfbf.png][]

放在类声明之前的**@WebServlet**注释指定这个类是一个Java servlet，它负责以**/helloServlet**的形式处理请求。

**doPost()**方法是我们放置代码以处理发送到此 servlet 的 HTTP POST 请求的地方。该方法接受两个参数， **HttpServletRequest**代表请求，**HttpServletResponse**代表响应。这些请求和响应对象由 Servlet 容器 (Tomcat) 创建和注入。

现在，将以下代码放入方法**doPost()**中：

此代码仅从表单中检索字段**yourName**的值并将字符串写入响应。

### **7. 测试 Servlet** ###

保存**HelloServlet**类并重新启动服务器。刷新主页，在表格中输入你的名字，例如：

![a69f4e8f37dff2b31287dc9ee7bb68d1.png][]

单击**Call Serlvet**按钮，您会看到以下响应：

![c0345fad67c9cdace931358a9a2dfbd4.png][]

恭喜！看到这个页面意味着 servlet 已经完成了请求并给出了响应。

到目前为止，我们已经向您介绍了开发一个基于 JSP 和 Servlet 技术的“Hello world”Java Web 应用程序的过程，该应用程序使用 Eclipse IDE 和 Maven 作为构建系统，Tomcat 作为服务器。我们希望您发现本教程对您有所帮助，并感谢您的阅读。

[f38ee91ee8a99e00a0636d46387ee50c.png]: https://img-blog.csdnimg.cn/img_convert/f38ee91ee8a99e00a0636d46387ee50c.png
[9ba79e3282f75d912fe4944b8857f65b.png]: https://img-blog.csdnimg.cn/img_convert/9ba79e3282f75d912fe4944b8857f65b.png
[ed242eee6473fb12a01acf43d8bcfaa1.png]: https://img-blog.csdnimg.cn/img_convert/ed242eee6473fb12a01acf43d8bcfaa1.png
[745e092a454e1ed45932c8bf29ab1cd0.png]: https://img-blog.csdnimg.cn/img_convert/745e092a454e1ed45932c8bf29ab1cd0.png
[48002d9ae984f7d317359c3c21f43488.png]: https://img-blog.csdnimg.cn/img_convert/48002d9ae984f7d317359c3c21f43488.png
[675b17dada296d7966cca1c89004fa2b.png]: https://img-blog.csdnimg.cn/img_convert/675b17dada296d7966cca1c89004fa2b.png
[Link 1]: https://www.codejava.net/servers/tomcat/how-to-add-tomcat-server-in-eclipse-ide
[894678ad6cbebc307f729f984769528f.png]: https://img-blog.csdnimg.cn/img_convert/894678ad6cbebc307f729f984769528f.png
[eb958ea436be05b75e4498727391176e.png]: https://img-blog.csdnimg.cn/img_convert/eb958ea436be05b75e4498727391176e.png
[73318bd2fa9f2c783dbc7ead8d1b3f0a.png]: https://img-blog.csdnimg.cn/img_convert/73318bd2fa9f2c783dbc7ead8d1b3f0a.png
[a80a92bafa2e11ec3689f4a8b7e6634f.png]: https://img-blog.csdnimg.cn/img_convert/a80a92bafa2e11ec3689f4a8b7e6634f.png
[3ee4e7f97a038bc99fb14a48e9af39be.png]: https://img-blog.csdnimg.cn/img_convert/3ee4e7f97a038bc99fb14a48e9af39be.png
[e0405a8e75493fa978fa16c667e4cc56.png]: https://img-blog.csdnimg.cn/img_convert/e0405a8e75493fa978fa16c667e4cc56.png
[a9c513f1ecde59e301967001cd8ebc17.png]: https://img-blog.csdnimg.cn/img_convert/a9c513f1ecde59e301967001cd8ebc17.png
[f8318f746a55d816c8c950fc0cc1cfbf.png]: https://img-blog.csdnimg.cn/img_convert/f8318f746a55d816c8c950fc0cc1cfbf.png
[a69f4e8f37dff2b31287dc9ee7bb68d1.png]: https://img-blog.csdnimg.cn/img_convert/a69f4e8f37dff2b31287dc9ee7bb68d1.png
[c0345fad67c9cdace931358a9a2dfbd4.png]: https://img-blog.csdnimg.cn/img_convert/c0345fad67c9cdace931358a9a2dfbd4.png