Eclipse IDE for Enterprise Java and Web Developers + Tomcat 服务器 + Maven 项目管理工具。

目录

1. 第一步：准备工作
   • 安装 Java Development Kit (JDK)
   • 下载 Eclipse IDE
   • 下载 Apache Tomcat 服务器
2. 第二步：配置 Eclipse 环境
   • 启动 Eclipse 并设置工作空间
   • 配置 Tomcat 服务器
3. 第三步：创建第一个动态 Web 项目
   • 新建 Maven Web 项目
   • 项目结构解析
4. 第四步：编写和运行您的第一个 Web 应用
   • 编写一个简单的 Servlet
   • 在 web.xml 中配置 Servlet
   • 部署并运行项目
   • 在浏览器中访问
5. 第五步：进阶与总结
   • 使用 JSP 和 HTML
   • 调试技巧
   • 下一步学习方向

第一步：准备工作

在开始之前,请确保您的电脑上已经安装了以下软件。

安装 Java Development Kit (JDK)

Web 应用程序（特别是基于 Java 的）运行在 Java 虚拟机上，JDK 是必需的。

• 下载地址：Oracle JDK 官网 或 OpenJDK 官网 (推荐 OpenJDK，免费开源)。
• 安装：根据您的操作系统（Windows, macOS, Linux）下载对应的安装包,然后像安装普通软件一样进行安装即可。
• 验证安装：打开命令行工具（Windows 的 cmd 或 PowerShell，macOS/Linux 的 Terminal），输入以下命令：

  java -version

  如果显示了版本号,说明安装成功。

下载 Eclipse IDE

我们使用专门用于 Web 开发的 Eclipse 版本,它已经内置了必要的插件。

• 下载地址：Eclipse 官网下载页面
• 选择版本：找到 "Eclipse IDE for Enterprise Java and Web Developers" 下载，这个版本包含了 Web 开发、数据库、服务器工具等,非常适合初学者。
• 解压：Eclipse 是一个绿色软件，下载后直接解压即可使用,无需安装。

下载 Apache Tomcat 服务器

Tomcat 是一个开源的 Web 应用服务器，用于运行我们编写的 Java Web 程序。

• 下载地址：Tomcat 官网
• 选择版本：下载 "Core" 下的 zip 压缩包（apache-tomcat-9.0.x-windows-x64.zip），Tomcat 同样是绿色软件,解压即可。
• 注意：请确保下载的 Tomcat 版本与您计划使用的 JDK 版本兼容（Tomcat 9+ 通常与 JDK 8+ 兼容）。

第二步：配置 Eclipse 环境

启动 Eclipse 并设置工作空间

• 进入 Eclipse 解压后的目录，双击 eclipse.exe (Windows) 或 Eclipse.app (macOS) 启动。
• 首次启动会提示您选择“工作空间”（Workspace），这是存放您所有项目的地方，选择一个您方便管理的文件夹，然后点击 "Launch"。
• 如果以后想修改工作空间，可以通过 File -> Switch Workspace 来更改。

配置 Tomcat 服务器

这一步是关键，它让 Eclipse 知道您的 Tomcat 安装在哪里。

• 在 Eclipse 菜单栏中，点击 Window -> Preferences (Windows) 或 Eclipse -> Preferences (macOS)。
• 在弹出的窗口中，导航到 Server -> Runtime Environments。
• 点击右侧的 Add... 按钮。
• 在弹出的窗口中，选择您下载的 Tomcat 版本（Apache Tomcat v9.0），然后点击 Next。
• 在 Tomcat installation directory 字段中，点击 Browse...，选择您之前解压的 Tomcat 根目录。
• JRE 选项通常会自动检测到您系统中的 JDK，如果未正确识别,请手动选择。
• 点击 Finish 完成配置。
• 返回 Preferences 窗口，点击 Apply and Close。

您的 Eclipse 已经准备好与 Tomcat 协同工作了。

第三步：创建第一个动态 Web 项目

我们将使用 Maven 来创建项目，因为它能帮我们自动管理项目依赖（Servlet API）,让项目结构更清晰。

新建 Maven Web 项目

• 在 Eclipse 菜单栏中，点击 File -> New -> Other...。
• 在弹出的窗口中，展开 Maven 文件夹，选择 Maven Project，然后点击 Next。
• 勾选 Create a simple project (skip archetype selection)，然后点击 Next，这个选项可以让我们快速创建一个基础项目,而无需选择复杂的模板。
• 填写项目信息：
  • Group Id: 项目的组织 ID，通常是一个反向域名，com.example。
  • Artifact Id: 项目的名称，hello-web。
  • Version: 版本号，初学者可以保持 0.1-SNAPSHOT。
  • Packaging: 这是关键！ 请选择 war (Web Application Archive)。
• 点击 Finish，Eclipse 会为您创建项目，并自动下载 Maven 依赖。

项目结构解析

创建成功后，您会在左侧的 Package Explorer 中看到项目结构,请重点关注以下几个目录：

• src/main/java: 存放 Java 源代码文件（如 Servlet）。
• src/main/resources: 存放配置文件（如 db.properties）。
• src/main/webapp: Web 应用的根目录，所有前端相关文件都在这里。
  • index.jsp: 默认的首页文件。
  • WEB-INF: 这是一个特殊目录，里面的内容对客户端是不可见的。
    • web.xml: Web 应用部署描述符，用于配置 Servlet、过滤器等,传统项目必须要有这个文件。
    • lib: 存放项目依赖的 JAR 包（比如我们自己添加的 JDBC 驱动）。

第四步：编写和运行您的第一个 Web 应用

我们将创建一个简单的 Servlet，当访问浏览器时，它会返回 "Hello, Eclipse Web World!"。

编写一个简单的 Servlet

• 在 src/main/java 目录上右键，New -> Package，创建一个包，com.example.hello。

• 在新创建的包上右键，New -> Servlet。

• 填写 Servlet 信息：

  • Java Package: com.example.hello
  • Class name: HelloServlet

• 点击 Next，然后直接点击 Finish。

• Eclipse 会自动生成 HelloServlet.java 文件，并预填充一些代码，修改 doGet 方法如下：

  package com.example.hello;
  import java.io.IOException;
  import java.io.PrintWriter;
  import javax.servlet.ServletException;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  /**
   * Servlet implementation class HelloServlet
   */
  // @WebServlet("/HelloServlet") // 我们先不使用注解，而是用 web.xml 配置
  public class HelloServlet extends HttpServlet {
      private static final long serialVersionUID = 1L;
      /**
       * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
       */
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          // 设置响应内容类型为 HTML
          response.setContentType("text/html;charset=UTF-8");
          // 获取输出流，向客户端写入响应
          PrintWriter out = response.getWriter();
          out.println("<html>");
          out.println("<head><title>Hello Servlet</title></head>");
          out.println("<body>");
          out.println("<h1>Hello, Eclipse Web World!</h1>");
          out.println("</body>");
          out.println("</html>");
      }
      // 通常我们也会实现 doPost 方法，以处理 POST 请求
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          doGet(request, response);
      }
  }

在 web.xml 中配置 Servlet

为了让服务器知道如何处理访问 /hello 的请求，我们需要在 web.xml 中进行配置。

• 打开 src/main/webapp/WEB-INF/web.xml 文件。

• 在 <web-app> 标签内,添加以下内容：

  <servlet>
      <!-- Servlet 的内部名称，可以任意取 -->
      <servlet-name>helloServlet</servlet-name>
      <!-- Servlet 的完整类名 -->
      <servlet-class>com.example.hello.HelloServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <!-- 将哪个 servlet-name 映射到哪个 URL -->
      <servlet-name>helloServlet</servlet-name>
      <!-- 访问此 URL 时，会触发上面的 Servlet -->
      <url-pattern>/hello</url-pattern>
  </servlet-mapping>

部署并运行项目

• 在 Package Explorer 中，找到您的项目 hello-web。
• 右键点击项目，选择 Run As -> Run on Server。
• 如果这是您第一次运行，Eclipse 会提示您选择服务器，选择之前配置好的 Apache Tomcat v9.0，然后点击 Finish。
• Eclipse 会自动将您的项目打包成 .war 文件，部署到 Tomcat 中，并启动 Tomcat 服务器。

在浏览器中访问

• Tomcat 启动后，Eclipse 会自动在内置的浏览器中打开一个页面。
• 默认情况下，它会访问项目的根路径 http://localhost:8080/hello-web/,但我们的首页可能还没有内容。
• 手动在浏览器地址栏输入：http://localhost:8080/hello-web/hello
  • http://localhost:8080: 是 Tomcat 的默认地址和端口。
  • /hello-web: 是您的项目名称（在 web.xml 中可以通过 <context-param> 修改，默认就是 Artifact Id）。
  • /hello: 是我们在 web.xml 中配置的 <url-pattern>。
• 如果一切顺利，您将看到一个显示 "Hello, Eclipse Web World!" 的网页。

第五步：进阶与总结

使用 JSP 和 HTML

webapp 目录就是您的静态资源目录。

• HTML: 在 webapp 下创建 index.html,它就是网站的静态首页。
• JSP (JavaServer Pages): 在 webapp 下创建 index.jsp，JSP 是一种更动态的网页技术，可以在 HTML 中嵌入 Java 代码。
  • 在 webapp 上右键，New -> JSP File，命名为 index.jsp。
  • 写入一个简单的 JSP 代码：

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Welcome to My Website</title>
    </head>
    <body>
        <h1>Welcome to my first Eclipse Web App!</h1>
        <p>Click <a href="hello">here</a> to say hello to the servlet.</p>
    </body>
    </html>

  • 访问 http://localhost:8080/hello-web/ 就会显示这个 index.jsp 页面。

调试技巧

• 设置断点：在 Java 代码的行号左侧双击，会出现一个蓝色圆点,这就是断点。
• 启动调试模式：右键项目，选择 Debug As -> Debug on Server。
• 调试视图：程序会在断点处暂停，您可以使用调试工具栏上的按钮（单步跳入、单步跳过、恢复等）来控制程序执行,并查看变量的值。

下一步学习方向

恭喜您！您已经成功搭建了 Eclipse Web 开发环境并运行了第一个应用,接下来可以学习：

• Servlet 生命周期 (init, service, destroy)
• HttpServletRequest 和 HttpServletResponse 的详细用法
• JSTL (JSP Standard Tag Library) 和 EL (Expression Language) 来简化 JSP 开发
• 数据库连接：使用 JDBC 连接 MySQL 等数据库
• 前端框架：学习 HTML5, CSS3, JavaScript, 以及 Vue.js 或 React
• 后端框架：学习 Spring Boot，它能让 Web 开发变得更加简单和高效。

这份教程为您提供了一个坚实的基础，祝您在 Web 开发的道路上学习愉快！