Eclipse JSP教程如何快速上手开发？-建站教程-锦华智联科技

Eclipse JSP 开发完整教程

本教程将涵盖以下核心内容：

（图片来源网络，侵删）

环境准备: 安装和配置所需的软件。
创建 Web 项目: 在 Eclipse 中搭建项目骨架。
编写第一个 JSP 页面: 输出 "Hello, World!"。
理解 JSP 核心元素: 脚本、指令、动作。
Servlet 与 JSP 的结合: 使用 Servlet 处理业务逻辑，JSP 负责展示。
使用 JavaBean (Model): 实现数据封装，优化代码结构。
项目实战: 创建一个简单的用户信息列表展示页面。
部署与运行: 将项目部署到 Tomcat 服务器并访问。

第一步：环境准备

在开始之前,请确保你已经安装了以下软件：

JDK (Java Development Kit): JSP 是 Java 技术的一部分，所以必须安装 JDK，推荐使用 JDK 8 或更高版本。
- 下载地址：Oracle JDK 官网或 OpenJDK 官网
Eclipse IDE for Enterprise Java and Web Developers: 这是专门用于 Web 开发的 Eclipse 版本，它内置了对 Tomcat、JSP、Servlet 等技术的支持。
- 下载地址：Eclipse 官网，请选择 "Eclipse IDE for Enterprise Java and Web Developers" 版本。
Apache Tomcat: 一个轻量级且广泛使用的 Web 应用服务器，用于运行你的 JSP 应用。
（图片来源网络，侵删）
- 下载地址：Tomcat 官网，下载 "Core" 下的 "zip" 压缩包即可（apache-tomcat-9.0.x.zip），推荐 Tomcat 9.x 版本。

安装步骤:

JDK: 运行安装程序，按照提示完成安装，记住安装路径，C:\Program Files\Java\jdk-11。
Eclipse: 解压下载的 eclipse-jee-...-win32-x86_64.zip 文件到你想要的目录，D:\eclipse。
Tomcat: 解压 apache-tomcat-9.0.x.zip 文件到一个目录，D:\apache-tomcat-9.0.x。

第二步：在 Eclipse 中配置 Tomcat

为了让 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:\apache-tomcat-9.0.x）。
点击 Finish，你应该能看到新添加的 Tomcat 环境。
点击 Apply and Close。

第三步：创建一个 Dynamic Web 项目

我们可以在 Eclipse 中创建我们的第一个 JSP 项目了。

点击菜单栏的 File -> New -> Dynamic Web Project。
Project name: 输入项目名称，JspDemo。
Target runtime: 在下拉菜单中，选择你刚刚配置好的 Tomcat 服务器版本。
Configuration: 可以选择 Java EE 8 Web 或 Java EE 7 Web，这决定了项目默认的 Servlet 和 JSP 版本。
点击 Finish。

Eclipse 会为你创建一个标准的项目结构，其中最重要的是：

（图片来源网络，侵删）

src: 存放 Java 源代码（如 Servlet）。
WebContent: 存放所有 Web 相关的文件，如 JSP、HTML、CSS、JavaScript 以及 WEB-INF 目录。
WebContent/WEB-INF: 存放 web.xml 文件（Web 应用的部署描述符）和 lib 目录（存放项目依赖的 JAR 包）。

第四步：编写并运行第一个 JSP 页面

让我们创建一个简单的 JSP 页面来验证环境是否配置成功。

在 Project Explorer 视图中，右键点击 WebContent 文件夹。
选择 New -> JSP File。
File name: 输入 index.jsp。
点击 Finish。

Eclipse 会为你创建一个 index.jsp 文件，并打开一个编辑器，你可以看到一些默认的 HTML 代码。

在 <body> 标签中，添加 JSP 的核心脚本元素之一：JSP Scriptlet。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">My First JSP Page</title>
</head>
<body>
    <h1>Hello, JSP World!</h1>
    <%-- 这是一个 JSP 注释，不会在客户端显示 --%>
    <%-- 这是一个 JSP Scriptlet，用于在服务器端执行 Java 代码 --%>
    <%
        String message = "当前时间是: " + new java.util.Date();
        out.println("<p>" + message + "</p>");
    %>
</body>
</html>

代码解释:

<%@ page ... %>: 这是一个 JSP 指令，用于定义整个页面的属性，如语言、内容类型、字符编码等。
<% ... %>: 这是一个 JSP Scriptlet，可以在其中编写任意 Java 代码，这些代码在服务器端执行，生成的 HTML 会发送给客户端。
out: 这是 JSP 的一个内置对象，用于向客户端输出内容。

运行项目:

在 Project Explorer 中，右键点击你的项目 JspDemo。
选择 Run As -> Run on Server。
如果提示选择服务器,选择你配置好的 Tomcat，然后点击 Finish。
Eclipse 会启动 Tomcat 服务器，并在内置的浏览器中打开你的应用，你应该能看到 "Hello, JSP World!" 和当前服务器时间。

第五步：JSP 核心元素详解

JSP 的强大之处在于它将 Java 代码嵌入到 HTML 中，主要有三种核心元素：

JSP 指令

用于向 JSP 容器（如 Tomcat）提供全局信息，语法：<%@ directive attribute="value" %>

page: 定义页面相关属性，如 contentType, pageEncoding, import (导入 Java 类)。
- 示例: <%@ page import="java.util.List" %>
include: 在翻译阶段（将 JSP 转换为 Servlet 时）包含一个文件，内容会合并成一个文件。
- 示例: <%@ include file="header.html" %>
taglib: 引入标签库，如 JSTL (JSP Standard Tag Library)。
- 示例: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> (之后会用到)

JSP 脚本元素

用于在 JSP 页面中嵌入 Java 代码。

Scriptlet (<% ... %>): 包含可以执行的 Java 代码片段。
Expression (<%= ... %>): 用于输出一个表达式的值到页面。不能使用分号结尾。
- 示例: <%= "Hello from Expression" %> 或 <%= user.getName() %>
Declaration (<%! ... %>): 用于声明变量或方法，这些会成为 Servlet 类的成员。
- 示例: <%! private int count = 0; %>

JSP 动作

用于在运行时控制 Servlet 的行为，语法：<jsp:actionName attribute="value" />

jsp:include: 在请求处理阶段包含一个文件，会生成两个独立的 Servlet，然后合并输出，比 include 指令更灵活。
jsp:forward: 将请求转发到另一个资源（JSP, Servlet）。
jsp:useBean, jsp:setProperty, jsp:getProperty: 用于操作 JavaBean。

第六步：Servlet 与 JSP 的结合 (MVC 思想初探)

一个良好的 Web 应用程序会将业务逻辑和表现逻辑分离，这就是 MVC (Model-View-Controller) 模式的雏形。

Controller (控制器): 接收用户请求，处理业务逻辑，然后决定将请求转发给哪个 View。
View (视图): 负责数据的展示，通常是 JSP 页面。
Model (模型): 封装数据和业务逻辑，通常是 JavaBean。

实践：创建一个显示欢迎信息的 Servlet 和 JSP

创建 Servlet (Controller)

右键点击 src 文件夹 -> New -> Servlet。
Java package: 输入 com.example.controller。
Class name: 输入 WelcomeServlet。
点击 Next，Finish。

在 doGet 方法中，添加以下代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 1. 处理业务逻辑 (这里只是设置一个简单的属性)
    String welcomeMsg = "欢迎来到由 Servlet 控制的页面！";
    // 2. 将数据存入 request 作用域
    request.setAttribute("message", welcomeMsg);
    // 3. 转发到 JSP 页面 (View)
    RequestDispatcher dispatcher = request.getRequestDispatcher("/welcome.jsp");
    dispatcher.forward(request, response);
}

创建 JSP 页面 (View)

在 WebContent 下创建一个新 JSP 文件，命名为 welcome.jsp。

编写如下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome Page</title>
</head>
<body>
    <h1>欢迎页面</h1>
    <%-- 从 request 作用域中获取 Servlet 设置的属性并显示 --%>
    <p>${message}</p>
    <%-- 也可以使用 JSP Expression 来获取 --%>
    <%-- <p><%= request.getAttribute("message") %></p> --%>
</body>
</html>

注意: ${message} 这种语法叫做 EL (Expression Language)，是 JSP 2.0 之后推荐使用的取值方式，比 <%= %> 更简洁。

配置 Servlet 映射

打开 WebContent/WEB-INF/web.xml 文件。

在 <web-app> 标签内，添加以下 Servlet 映射配置：

<servlet>
    <servlet-name>WelcomeServlet</servlet-name>
    <servlet-class>com.example.controller.WelcomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>WelcomeServlet</servlet-name>
    <url-pattern>/welcome</url-pattern>
</servlet-mapping>

运行测试
- 右键点击项目 -> Run As -> Run on Server。
- 在浏览器地址栏中访问: http://localhost:8080/JspDemo/welcome
- 你应该能看到由 Servlet 控制并显示的欢迎信息。

第七步：使用 JavaBean (Model)

现在我们引入 JavaBean 来封装数据。

创建 JavaBean (Model)

在 src 下创建一个新类，命名为 User。
这个类需要满足 JavaBean 规范：
- 是一个公共类 (public class)。
- 有一个无参的公共构造器。
- 属性是私有的,并且有公共的 getter 和 setter 方法。

User.java 代码：

package com.example.model;
public class User {
    private String name;
    private int age;
    // 无参构造器 (必须)
    public User() {
    }
    // Getter 和 Setter 方法
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

在 Servlet 中创建和使用 JavaBean

修改 WelcomeServlet 的 doGet 方法：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 1. 创建 JavaBean 对象
    User user = new User();
    user.setName("张三");
    user.setAge(25);
    // 2. 将 JavaBean 存入 request 作用域
    request.setAttribute("user", user);
    // 3. 转发到 JSP 页面
    RequestDispatcher dispatcher = request.getRequestDispatcher("/user_info.jsp");
    dispatcher.forward(request, response);
}

在 JSP 中访问 JavaBean 属性

在 WebContent 下创建 user_info.jsp。

使用 JSP 动作 jsp:useBean 和 EL 表达式来访问属性：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.example.model.User" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Info</title>
</head>
<body>
    <h1>用户信息</h1>
    <%-- 使用 jsp:useBean 来查找或创建 JavaBean 实例 --%>
    <jsp:useBean id="user" class="com.example.model.User" scope="request" />
    <p>姓名: <jsp:getProperty name="user" property="name" /></p>
    <p>年龄: <jsp:getProperty name="user" property="age" /></p>
    <%-- 或者更简洁地使用 EL --%>
    <hr>
    <p>EL 方式 - 姓名: ${user.name}</p>
    <p>EL 方式 - 年龄: ${user.age}</p>
</body>
</html>

运行测试
- 访问 http://localhost:8080/JspDemo/welcome，你会看到 user_info.jsp 页面，并显示了从 JavaBean 中获取的用户信息。

第八步：项目实战 - 用户列表展示

让我们结合所学,做一个更完整的例子：从 Servlet 获取一个用户列表，然后在 JSP 中以表格形式展示。

创建一个数据访问类 (模拟 DAO)
- 在 src 下创建 com.example.dao 包，并在其中创建 UserDAO.java。
- 这个类负责模拟从数据库获取数据。
```
package com.example.dao;
```
import java.util.ArrayList; import java.util.List; import com.example.model.User;

public class UserDAO { public List getAllUsers() { List users = new ArrayList<>(); users.add(new User("Alice", 28)); users.add(new User("Bob", 32)); users.add(new User("Charlie", 24)); return users; } }

创建 Servlet (Controller)

在 com.example.controller 包下创建 UserListServlet.java。
```
package com.example.controller;
```

import java.util.List; import com.example.dao.UserDAO; import com.example.model.User; import jakarta.servlet.RequestDispatcher; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException;

@WebServlet("/userList") // 使用注解配置映射，更简单 public class UserListServlet extends HttpServlet { private static final long serialVersionUID = 1L; private UserDAO userDAO;

public void init() {
    userDAO = new UserDAO();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 1. 调用 DAO 获取数据
    List<User> userList = userDAO.getAllUsers();
    // 2. 将数据存入 request
    request.setAttribute("userList", userList);
    // 3. 转发到 JSP
    RequestDispatcher dispatcher = request.getRequestDispatcher("/user_list.jsp");
    dispatcher.forward(request, response);
}


*   **注意**: 这里我们使用了 `@WebServlet("/userList")` 注解来替代 `web.xml` 中的配置，这是现代 Web 开发的推荐做法。

创建 JSP 页面 (View)

在 WebContent 下创建 user_list.jsp。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">用户列表</title>
<style>
table { border-collapse: collapse; width: 50%; }
th, td { border: 1px solid #dddddd; text-align: left; padding: 8px; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h1>所有用户列表</h1>
<%-- 使用 JSTL 的 c:forEach 标签来遍历 userList --%>
<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <c:forEach var="user" items="${userList}" varStatus="status">
        <tr>
            <td>${status.count}</td>
            <td>${user.name}</td>
            <td>${user.age}</td>
        </tr>
    </c:forEach>
</table>
</body>
</html>

代码解释:
- <%@ taglib ... %>: 引入了 JSTL 的核心标签库。
- <c:forEach>: JSTL 的核心标签，用于循环遍历集合。
  - var="user": 循环中的每个元素赋值给 user 变量。
  - items="${userList}": 遍历 request 作用域中的 userList 集合。
  - varStatus="status": 提供循环状态信息，如 status.count (当前是第几次循环)。

运行测试
- 访问 http://localhost:8080/JspDemo/userList。
- 你应该看到一个格式良好的用户列表表格。

总结与进阶

恭喜！你已经完成了 Eclipse JSP 的基础教程，并掌握了创建、配置和运行 JSP Web 应用的核心技能。

回顾我们学到的:

环境搭建: JDK, Eclipse, Tomcat 的安装与配置。
项目结构: Dynamic Web 项目的标准目录结构。
JSP 基础: 指令、脚本、动作、内置对象。
MVC 思想: 通过 Servlet 和 JSP 的分离，理解了控制器和视图的角色。
JavaBean: 用于封装数据，是 Model 层的基础。
EL 和 JSTL: 使用更简洁的标签和表达式语言来处理数据。
Servlet 映射: 通过 web.xml 和 @WebServlet 注解配置 URL 路径。

后续可以学习的进阶主题:

数据库连接: 学习使用 JDBC 连接 MySQL, Oracle 等数据库。
连接池: 使用 HikariCP, DBCP 等技术管理数据库连接，提高性能。
JPA / Hibernate: 学习 ORM (Object-Relational Mapping) 框架，简化数据库操作。
前端框架: 将 JSP 与现代前端框架（如 Vue.js, React）结合，实现前后端分离。
会话管理: 学习使用 HttpSession 来跟踪用户状态。
文件上传: 实现文件上传功能。
安全: 了解 Web 安全基础，如防止 SQL 注入、XSS 攻击等。

希望这份详细的教程能帮助你顺利开启 JSP 开发之旅！