Eclipse Web 开发完整入门教程
本教程将引导你完成以下步骤：
（图片来源网络，侵删）
- 准备工作：安装所需软件。
- 配置 Eclipse：配置 Web 服务器。
- 创建 Web 项目：创建一个动态 Web 项目。
- 编写代码：编写一个简单的 Servlet。
- 部署与运行：将项目部署到服务器并访问。
- 调试：介绍如何使用 Eclipse 的调试功能。
第一步：准备工作
在开始之前,请确保你已经安装了以下软件：
-
JDK (Java Development Kit)：Java 开发工具包，你需要它来编译和运行 Java 代码。
- 下载地址：Oracle JDK 官网 或 OpenJDK 官网
- 建议版本：JDK 8, 11, 17 或 21，LTS (长期支持) 版本更稳定。
- 安装后：请确保
JAVA_HOME环境变量已正确设置。
-
Eclipse IDE：集成开发环境，我们选择支持 Web 开发的版本。
- 下载地址：Eclipse 官网
- 推荐下载："Eclipse IDE for Enterprise Java and Web Developers" (企业 Java 和 Web 开发者版)，这个版本已经内置了 Web 开发所需的各种插件，如 Eclipse for Web Developers (WTP)。
-
Web 服务器 (Web Server)：用于部署和运行你的 Web 应用，最常用的是 Apache Tomcat。
（图片来源网络，侵删）- 下载地址：Tomcat 官网
- 建议版本：Tomcat 9 或 10。
- 注意：请下载 Core 下的 zip 压缩包，
apache-tomcat-9.0.x.zip。
第二步：配置 Eclipse 和 Tomcat
这一步是让 Eclipse 能够管理和启动 Tomcat 服务器。
-
解压 Tomcat
- 将下载的
apache-tomcat-9.0.x.zip文件解压到一个固定的、不含中文和空格的路径下，D:\dev\apache-tomcat-9.0.x。
- 将下载的
-
配置 Eclipse 中的 Tomcat
- 打开 Eclipse IDE。
- 点击顶部菜单栏的 Window -> Preferences... (在 macOS 上是 Eclipse -> Preferences...)。
- 在弹出的窗口中，导航到 Server -> Runtime Environments。
- 点击右侧的 Add... 按钮。
- 在弹出的窗口中，选择你下载的 Tomcat 版本（Apache Tomcat v9.0），然后点击 Next。
- 在 Tomcat installation directory 字段中，点击 Browse...，然后选择你刚刚解压的 Tomcat 根目录（
D:\dev\apache-tomcat-9.0.x）。 - JRE 字段会自动检测到你已配置的 JDK，如果没有,请手动选择。
- 点击 Finish。
- 你会看到新添加的 Tomcat 版本出现在列表中，点击 Apply and Close。
第三步：创建你的第一个 Web 项目
我们可以在 Eclipse 中创建一个动态 Web 项目了。
（图片来源网络，侵删）
- 在 Eclipse 菜单栏中，点击 File -> New -> Dynamic Web Project。
- 在弹出的窗口中：
- Project name: 输入你的项目名称，
HelloWeb。 - Target runtime: 这是最重要的一步，点击右侧的 New Runtime...，选择你刚刚配置的 Tomcat 版本，点击 Finish，然后回到项目创建窗口，这个下拉框里就会显示出你配置的 Tomcat。
- Configuration: 可以选择一个配置模板，Java EE 8 Web Profile,但这不是必须的。
- 确保 Generate web.xml deployment descriptor 选项被勾选，这个文件是 Web 应用的部署描述符。
- Project name: 输入你的项目名称，
- 点击 Finish。
Eclipse 会为你创建一个标准的 Web 项目结构,其中包含：
src/main/java: 存放 Java 源代码。src/main/webapp: 存放 Web 资源，如 HTML、JSP、CSS、JavaScript 等。WebContent: 在较旧版本的 Eclipse 中可能使用这个，功能与src/main/webapp相同。build: 存放编译后的.class文件。WebContent/WEB-INF/web.xml: Web 应用的部署描述符。
第四步：编写一个简单的 Servlet
Servlet 是运行在服务器端的 Java 程序,用于处理客户端的请求并生成响应。
-
创建 Servlet 类
- 在 Package Explorer 视图中，右键点击
src/main/java文件夹。 - 选择 New -> Servlet。
- 在 New Servlet 窗口中：
- Java Package: 输入一个包名，
com.example.hello。 - Class name: 输入类名，
HelloServlet。
- Java Package: 输入一个包名，
- 点击 Next。
- 在下一页，你可以配置 URL 映射，将 URL Patterns 修改为
/hello，这意味着当用户访问http://yourhost:yourport/HelloWeb/hello时，这个 Servlet 就会被调用。 - 点击 Finish。
- 在 Package Explorer 视图中，右键点击
-
编写 Servlet 代码
- Eclipse 会自动生成
HelloServlet.java文件，并包含doGet和doPost方法。 - 在
doGet方法中，添加以下代码来向浏览器输出 "Hello, Eclipse Web World!"：
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("/hello") // 这个注解可以替代 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(); // 写入 HTML 内容 out.println("<!DOCTYPE html>"); out.println("<html>"); out.println("<head>"); out.println("<meta charset='UTF-8'>"); out.println("<title>Hello Servlet</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>你好，Eclipse Web 世界！</h1>"); out.println("<p>这是我的第一个 Servlet 程序。</p>"); out.println("</body>"); out.println("</html>"); // 关闭输出流 out.close(); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // GET 和 POST 请求会调用相同的处理逻辑 doGet(request, response); } } - Eclipse 会自动生成
第五步：部署与运行
我们将项目部署到 Tomcat 服务器并运行它。
-
打开服务器视图
- 在 Eclipse 窗口的右下角，找到并点击 Servers 标签页，打开 Servers 视图。
- 如果没有看到，可以通过点击 Window -> Show View -> Servers 来打开。
-
添加项目到服务器
- 在 Servers 视图中，你会看到一个名为 "Tomcat v9.0 Server at localhost" 的服务器。
- 右键点击这个服务器，选择 Add and Remove...。
- 在弹出的窗口中，从左侧的 "Available" 列表中选中你的项目
HelloWeb，点击 Add -> 将其移动到右侧的 "Configured" 列表中。 - 点击 Finish。
-
启动服务器
- 在 Servers 视图中，右键点击你的 Tomcat 服务器。
- 选择 Start。
- Eclipse 会启动 Tomcat 服务器，你可以在 Console 视图中看到启动日志，当看到 "Server startup in XXX ms" 时,表示服务器已成功启动。
-
在浏览器中访问
- 服务器启动后，右键点击 Servers 视图中的服务器，选择 Browse。
- 或者，直接在浏览器地址栏输入以下 URL：
http://localhost:8080/HelloWeb/hello - 你应该能在浏览器中看到你编写的 HTML 页面了！
第六步：使用 Eclipse 进行调试
调试是开发过程中非常重要的一环。
-
设置断点
- 在
HelloServlet.java文件中，找到out.println("<h1>你好，Eclipse Web 世界！</h1>");这一行。 - 在该行代码的左侧空白处双击，会出现一个蓝色的圆点，这就是一个断点。
- 在
-
启动调试模式
- 确保你的 Tomcat 服务器处于停止状态。
- 右键点击 Servers 视图中的服务器，这次选择 Debug。
- Eclipse 会切换到 Debug 透视图，并启动服务器,服务器处于调试模式。
-
触发断点
- 像之前一样，在浏览器中访问
http://localhost:8080/HelloWeb/hello。 - 当你的请求触发到
HelloServlet的doGet方法并执行到断点处时，Eclipse 会暂停执行。
- 像之前一样，在浏览器中访问
-
调试视图
- 在 Debug 透视图中，你可以看到：
- Debug 视图：显示当前的调用栈，你可以看到
HelloServlet.doGet()方法在栈顶。 - Variables 视图：显示当前作用域内的所有变量及其值。
- Breakpoints 视图：显示所有已设置的断点。
- Debug 视图：显示当前的调用栈，你可以看到
- 你可以使用工具栏上的按钮来控制程序执行：
- Resume (F8)：恢复程序执行,直到遇到下一个断点。
- Step Over (F6)：单步跳过当前行。
- Step Into (F5)：如果当前行是一个方法调用,则进入该方法内部。
- Step Return (F7)：执行完当前方法,并返回到调用处。
- 在 Debug 透视图中，你可以看到：
总结与后续学习
恭喜！你已经成功地使用 Eclipse 创建、配置、部署并运行了你的第一个 Web 应用。
后续可以学习的方向：
- JSP (JavaServer Pages)：学习如何使用 JSP 来创建动态页面，将 Java 代码和 HTML 分离。
- JSTL (JSP Standard Tag Library)：学习使用 JSTL 标签库来简化 JSP 页面的开发。
- MVC 设计模式：学习 Model-View-Controller 架构，这是现代 Web 应用的标准设计模式。
- 前端框架：学习如何将 Vue.js 或 React 等前端框架与后端 Java 服务结合。
- 数据库连接：学习使用 JDBC 连接数据库,实现数据的增删改查。
- Spring Boot：学习更现代、更高效的 Java Web 开发框架,它能极大地简化配置和开发流程。
这份教程为你打下了坚实的基础，祝你在 Web 开发的道路上越走越远！
