Eclipse JSP/Servlet 開發環境建置完整教學

使用 Eclipse IDE for Enterprise Java Developers 搭配 Apache Tomcat 建置 JSP/Servlet 開發環境，涵蓋安裝、配置、專案建立、除錯與常見問題。

前置需求

• JDK 17+ (建議 LTS 版本)：Eclipse Temurin 或 Oracle JDK
• Eclipse IDE for Enterprise Java Developers：官方下載 (含 JST、WTP、Maven 整合)
• Apache Tomcat 10.1+ (Servlet 6.0 / JSP 3.1 / Jakarta EE 10)：下載 (Core zip)

步驟 1：安裝與配置 JDK

1. 執行 JDK 安裝程式，記住安裝路徑 (如 C:\Java\jdk-17)
2. 設定環境變數：
   • JAVA_HOME = JDK 安裝路徑
   • Path 追加 %JAVA_HOME%\bin
3. 驗證：命令列 java -version、javac -version

步驟 2：安裝 Eclipse

1. 解壓縮 eclipse-jee-*.zip 至無中文、無空格路徑 (如 D:\eclipse)
2. 啟動 eclipse.exe，選擇 Workspace (如 D:\workspace)
3. 配置 JDK：Window → Preferences → Java → Installed JREs → Add → Standard VM → Directory: JAVA_HOME
4. 設定編碼：General → Workspace → Text file encoding: UTF-8、General → Content Types → Java/HTML/JSP → UTF-8

步驟 3：安裝與配置 Tomcat

1. 解壓縮 apache-tomcat-10.1.x.zip 至 D:\tomcat
2. Eclipse 整合 Tomcat：
   • Window → Preferences → Server → Runtime Environments → Add
   • 選擇 Apache Tomcat v10.1 → Next
   • Tomcat installation directory: D:\tomcat
   • JRE: 選擇已配置的 JDK 17
   • Finish
3. 建立 Server 實例：
   • Servers 視圖 → 右鍵 New → Server
   • 選擇 Tomcat v10.1 Server → Next
   • 選擇剛建立的 Runtime → Finish
4. 配置 Server：
   • 雙擊 Server → Server Locations 選 Use Tomcat installation (方便外部存取 webapps)
   • Ports：HTTP/1.1 = 8080 (預設)
   • Modules：稍後自動新增專案

步驟 4：建立 Dynamic Web Project

1. File → New → Dynamic Web Project
2. Project name: JspDemo
3. Target runtime: Apache Tomcat v10.1
4. Dynamic web module version: 6.0 (Servlet 6.0)
5. Configuration: Default Configuration for Tomcat v10.1
6. Next → Next → Generate web.xml deployment descriptor 勾選 → Finish

專案結構

JspDemo/
├─ src/main/java/          Java 類別 (Servlet, Bean, Filter)
├─ src/main/webapp/        Web 根目錄
│  ├─ WEB-INF/
│  │  ├─ web.xml           部署描述 (可選，Servlet 3.0+ 多用註解)
│  │  └─ lib/              專用 JAR (Maven 管理時通常空)
│  ├─ index.jsp            首頁
│  ├─ css/, js/, images/   靜態資源
│  └─ META-INF/
└─ pom.xml                 Maven 專案 (建議啟用)

步驟 5：啟用 Maven (推薦)

1. 專案右鍵 Configure → Convert to Maven Project
2. pom.xml 基礎依賴：

<project xmlns="https://maven.apache.org/POM/4.0.0" ...>
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.example</groupId>
  <artifactId>JspDemo</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <properties>
    <maven.compiler.source>17</maven.compiler.source>
    <maven.compiler.target>17</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <failOnMissingWebXml>false</failOnMissingWebXml>
  </properties>
  
  <dependencies>
    <!-- Jakarta Servlet / JSP / EL API (provided by Tomcat) -->
    <dependency>
      <groupId>jakarta.platform</groupId>
      <artifactId>jakarta.jakartaee-api</artifactId>
      <version>10.0.0</version>
      <scope>provided</scope>
    </dependency>
    <!-- JSTL 標籤庫 -->
    <dependency>
      <groupId>org.glassfish.web</groupId>
      <artifactId>jstl</artifactId>
      <version>2.0.0</version>
    </dependency>
    <!-- JSON 處理 -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.15.2</version>
    </dependency>
    <!-- 測試 -->
    <dependency>
      <groupId>org.junit.jupiter</groupId>
      <artifactId>junit-jupiter</artifactId>
      <version>5.10.0</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
  
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.3.2</version>
      </plugin>
    </plugins>
  </build>
</project>

步驟 6：建立第一個 JSP 與 Servlet

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>JSP Demo</title></head>
<body>
  <h1>Hello JSP!</h1>
  <p>時間：<%= new java.util.Date() %></p>
  <p>EL 輸出：${pageContext.request.remoteAddr}</p>
  <hr>
  <form action="hello" method="post">
    姓名：<input name="name"> <button type="submit">送出</button>
  </form>
</body>
</html>

HelloServlet.java

package com.example;

import jakarta.servlet.*;
import jakarta.servlet.annotation.*;
import jakarta.servlet.http.*;
import java.io.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException {
    req.setCharacterEncoding("UTF-8");
    String name = req.getParameter("name");
    req.setAttribute("name", name);
    req.getRequestDispatcher("/result.jsp").forward(req, resp);
  }
}

result.jsp

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html><body>
  <h2>Servlet 轉發結果</h2>
  <p>收到姓名：${requestScope.name}</p>
  <a href="index.jsp">返回</a>
</body></html>

步驟 7：部署與執行

1. 專案右鍵 Run As → Run on Server → 選擇 Tomcat → Finish
2. Eclipse 啟動 Tomcat，Console 顯示啟動日誌
3. 內建瀏覽器或外部瀏覽器開啟 https://localhost:8080/JspDemo/
4. 測試表單送出，觀察 Servlet 轉發結果

步驟 8：除錯技巧

• 中斷點：Java 程式碼左側雙擊設定，Debug As → Debug on Server
• 熱部署：修改 JSP/HTML/JS/CSS 儲存自動重載；修改 Java 類別需重啟或使用 DCEVM / HotswapAgent
• Console 日誌：System.out.println()、log4j2/slf4j 輸出
• 瀏覽器開發者工具：Network 面板檢查請求/回應、Headers、Cookies

常見問題與解決

進階建議

1. 使用 Spring Boot：spring-boot-starter-web 內嵌 Tomcat，零配置、生產級預設
2. 前後端分離：後端只寫 REST API (@RestController)，前端用 Vue/React/Vite
3. 容器化部署：Dockerfile 打包 maven:3.9-eclipse-temurin-17 建置 → tomcat:10.1-jre17 運行
4. 程式碼品質：Checkstyle、SpotBugs、SonarLint Eclipse 外掛