杰瑞科技汇

如何快速掌握JSP动态网站开发?

JSP 动态网站开发教程

第一部分:核心概念与环境搭建

什么是JSP?

  • 全称:JavaServer Pages,Java服务器页面。
  • 本质:一种用于创建动态Web内容的技术,它允许你在HTML页面中嵌入Java代码片段。
  • 工作原理:当Web服务器(如Tomcat)收到一个JSP请求时,它会先将JSP文件转换成一个Java Servlet(一个特殊的Java类),然后编译这个Servlet,最后由Servlet引擎来执行并生成HTML响应,最后将HTML发送给客户端浏览器。
  • 优点
    • 前后端分离:页面设计(HTML/CSS)和业务逻辑(Java)可以分开,便于团队协作。
    • 可重用性:通过JavaBean(可重用的Java组件)封装业务逻辑和数据,提高了代码复用性。
    • 强大的Java生态:可以无缝使用Java庞大的类库和框架。

JSP vs. Servlet vs. HTML

技术 描述 优点 缺点
HTML 静态网页,内容固定。 简单,加载快。 无法动态生成内容。
Servlet 纯Java代码生成HTML,out.println("<html>...") 逻辑强大,性能高。 编写HTML极其繁琐,代码可读性差。
JSP 在HTML中嵌入Java代码。 页面结构清晰,易于维护,分离了表现和逻辑。 过多的Java脚本(Scriptlet)会使页面混乱。

核心思想用Servlet做控制,用JSP做视图。

如何快速掌握JSP动态网站开发?-图1
(图片来源网络,侵删)

环境搭建

开发JSP应用需要两个核心软件:

  1. JDK (Java Development Kit):Java开发工具包,提供Java编译器、运行时环境等。
  2. Web服务器:最常用的是 Apache Tomcat,它是一个开源的Servlet容器,专门用于运行Java Web应用。

安装步骤(以Windows为例):

  1. 安装JDK

    • 下载JDK(推荐LTS版本,如JDK 8, 11, 17),从Oracle官网或OpenJDK官网获取。
    • 运行安装程序,记住安装路径(如 C:\Program Files\Java\jdk-11.0.12)。
    • 配置环境变量
      • 新建系统变量 JAVA_HOME,值为你的JDK安装路径。
      • 编辑系统变量 Path,添加 %JAVA_HOME%\bin
    • 打开命令提示符,输入 java -versionjavac -version,如果显示版本号,则安装成功。
  2. 安装Tomcat

    如何快速掌握JSP动态网站开发?-图2
    (图片来源网络,侵删)
    • 下载Tomcat(推荐Tomcat 9或10),从 Apache Tomcat官网 下载。
    • 解压下载的zip文件到你喜欢的目录(如 C:\apache-tomcat-9.0.50)。
    • 配置环境变量(可选,但推荐)
      • 新建系统变量 CATALINA_HOME,值为你的Tomcat安装路径。
    • 启动Tomcat
      • 进入Tomcat的 bin 目录。
      • 双击 startup.bat
      • 如果看到命令窗口闪退,可能是没配置JAVA_HOME,如果窗口停留并显示一些信息,说明启动成功。
    • 验证:打开浏览器,访问 http://localhost:8080,如果看到Tomcat的欢迎页面,说明安装成功。

创建第一个JSP项目

  1. 在Tomcat的 webapps 目录下创建一个新文件夹,hello_jsp,这个文件夹就是你的Web应用根目录。

  2. hello_jsp 文件夹中,创建一个名为 index.jsp 的文件。

  3. 用文本编辑器(如VS Code, Sublime Text)打开 index.jsp,输入以下内容:

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>我的第一个JSP页面</title>
    </head>
    <body>
        <h1>Hello, JSP World!</h1>
        <%
            // 这是JSP脚本片段,可以写Java代码
            String message = "当前时间: " + new java.util.Date().toString();
        %>
        <p><%= message %></p> <!-- 这是JSP表达式,用于输出变量值 -->
        <p>服务器信息: <%= application.getServerInfo() %></p>
    </body>
    </html>
  4. 启动Tomcat(如果没启动的话)。

    如何快速掌握JSP动态网站开发?-图3
    (图片来源网络,侵删)
  5. 在浏览器中访问 http://localhost:8080/hello_jsp/index.jsp

你应该能看到:

  • "Hello, JSP World!"。
  • 一段显示当前时间的文字。
  • 一段显示Tomcat服务器信息的文字。

恭喜!你已经成功运行了第一个JSP程序。


第二部分:JSP核心语法

三大核心元素

这是JSP的灵魂,也是它区别于HTML的地方。

a) 脚本片段

  • 语法<% Java代码 %>
  • 作用:用于编写复杂的Java逻辑,如声明变量、循环、条件判断等。
  • 注意:脚本片段中的代码是原封不动地插入到_jspService方法中的。

示例

<%
    for (int i = 1; i <= 5; i++) {
%>
        <h2>循环第 <%= i %> 次</h2>
<%
    }
%>

b) 表达式

  • 语法<%= Java表达式 %>
  • 作用:用于输出一个变量的值或一个表达式的结果到HTML页面,它会被自动翻译成 out.print()
  • 注意:表达式后面不能有分号

示例

<%! 
    // 声明变量(在类中)
    String name = "张三"; 
%>
<p>你好, <%= name %>!</p>

c) 声明

  • 语法<!% Java代码 %>
  • 作用:用于声明类的成员变量或方法,这些代码会被插入到生成的Servlet类的内部。
  • 注意:现在已经不推荐使用,因为它破坏了页面与逻辑的分离,更好的做法是使用JavaBean。

示例

<%! 
    private int count = 0;
    public int getCount() {
        return count++;
    }
%>
<p>页面访问次数: <%= getCount() %></p>

指令

指令用于向JSP引擎提供全局信息,它们不直接生成任何可见的输出。

  • page 指令:作用于整个页面。

    • <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*" %>
    • language: 指定脚本语言,默认是Java。
    • contentType: 指定响应的MIME类型和字符编码。
    • pageEncoding: 指定JSP文件本身的编码。
    • import: 导入Java类,如 import="java.util.List, java.util.ArrayList"
  • include 指令:静态包含。

    • <%@ include file="header.html" %>
    • 翻译阶段,将header.html的源代码直接插入到当前JSP文件中,两个文件最终会合并编译成一个Servlet。
  • taglib 指令:引入标签库。

    • <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    • 用于引入JSTL(JSP Standard Tag Library)等标签库,这是现代JSP开发的标配。

动作

动作是JSP的XML语法,用于在运行时控制流程或操作JavaBean。

  • <jsp:useBean>:实例化一个JavaBean。

    • <jsp:useBean id="user" class="com.example.User" scope="request" />
    • id: Bean的引用名。
    • class: Bean的完整类名。
    • scope: Bean的作用域(page, request, session, application)。
  • <jsp:setProperty>:设置Bean的属性。

    • <jsp:setProperty name="user" property="name" value="李四" />
    • 可以自动从请求参数中获取值:<jsp:setProperty name="user" property="*" />
  • <jsp:getProperty>:获取Bean的属性并输出。

    • <jsp:getProperty name="user" property="name" />
  • <jsp:include>:动态包含。

    • <jsp:include page="footer.jsp" />
    • 请求处理阶段,包含目标页面的输出,两个页面是分别编译的,执行时再合并输出。
  • <jsp:forward>:转发请求。

    • <jsp:forward page="login.jsp" />
    • 将当前请求完全转发给另一个资源,浏览器地址栏不会改变。

第三部分:JSP最佳实践与MVC模式

直接在JSP中写大量Java脚本(Scriptlet)是坏味道,会导致“意大利面条代码”,难以维护。

现代JSP开发的核心是MVC(Model-View-Controller)模式:

  • Model (模型):数据和业务逻辑,通常由JavaBean和Service层构成。
  • View (视图):展示数据,由JSP页面负责,只负责显示,不包含逻辑。
  • Controller (控制器):接收用户请求,调用Model处理,然后选择合适的View进行响应,在JSP中,这个角色通常由Servlet来扮演。

实战案例:用户登录

目标:实现一个登录页面,用户输入用户名和密码,点击登录后,由Servlet验证,然后跳转到欢迎页面或错误页面。

项目结构

hello_jsp/
├── WEB-INF/
│   └── web.xml (可选,Servlet 3.0+可以不用)
├── index.jsp       (登录页面)
├── welcome.jsp     (登录成功页面)
└── LoginServlet.java (登录控制器)

步骤 1: 创建模型 - User.java (JavaBean) 这个类只包含用户数据。

// src/com/example/User.java
package com.example;
public class User {
    private String username;
    private String password;
    // 必须有一个无参构造器
    public User() {}
    // Getter 和 Setter
    public String getUsername() { return username; }
    public void setUsername(String username) { this.username = username; }
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
}

步骤 2: 创建视图 - index.jsp (登录表单) 这个页面只负责显示表单。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>登录</title>
</head>
<body>
    <h1>用户登录</h1>
    <form action="login" method="post">
        用户名: <input type="text" name="username"><br>
        密码:   <input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>
  • action="login":表单提交到名为 login 的Servlet。

步骤 3: 创建控制器 - LoginServlet.java 这是核心逻辑,处理请求并转发。

// src/com/example/LoginServlet.java
package com.example;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login") // 使用注解映射URL
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 获取请求参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 2. 验证逻辑 (这里简化了,实际项目中应查询数据库)
        if ("admin".equals(username) && "123456".equals(password)) {
            // 3. 创建User对象并设置属性
            User user = new User();
            user.setUsername(username);
            // 4. 将User对象存入request作用域
            request.setAttribute("user", user);
            // 5. 转发到欢迎页面
            request.getRequestDispatcher("welcome.jsp").forward(request, response);
        } else {
            // 6. 登录失败,转发到错误页面
            request.setAttribute("errorMsg", "用户名或密码错误!");
            request.getRequestDispatcher("error.jsp").forward(request, response);
        }
    }
}
  • @WebServlet("/login"):Servlet 3.0+的注解方式,替代了在web.xml中配置。
  • request.getRequestDispatcher(...).forward(...):这是Servlet的核心功能,用于在服务器内部跳转,用户浏览器地址不变。

步骤 4: 创建视图 - welcome.jsp 和 error.jsp

welcome.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>欢迎</title>
</head>
<body>
    <h1>欢迎, ${user.username}!</h1>
    <p>登录成功!</p>
</body>
</html>
  • ${user.username}:这是 EL表达式 (Expression Language),是JSTL的一部分,用于从作用域中获取数据。${user} 相当于 ${requestScope.user}

error.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>错误</title>
</head>
<body>
    <h1>登录失败</h1>
    <p style="color:red;">${errorMsg}</p>
    <a href="index.jsp">返回登录</a>
</body>
</html>

如何运行?

  1. com.example 包和 LoginServlet.java 放在项目的 WEB-INF/classes 目录下(如果你使用IDE如Eclipse/IntelliJ,它会自动处理)。
  2. 确保 webapps/hello_jsp 目录结构正确。
  3. 重启Tomcat。
  4. 访问 http://localhost:8080/hello_jsp/index.jsp 进行测试。

第四部分:进阶学习与资源

必须掌握的JSTL

JSTL是一套标签库,用于消除JSP页面中的Java脚本,让页面更纯粹。

  • 核心标签库<c:if>, <c:forEach>, <c:set> 等。
  • 格式化标签库<fmt:formatDate>, <fmt:formatNumber> 等。
  • 函数标签库:提供字符串操作函数。

示例 (使用JSTL核心标签)

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:if test="${user != null}">
    <p>欢迎回来, ${user.username}!</p>
</c:if>
<c:forEach var="i" begin="1" end="5">
    <p>项目 ${i}</p>
</c:forEach>

EL表达式

  • 语法:${expression}
  • 作用域查找顺序:pageScope -> requestScope -> sessionScope -> applicationScope
  • 常用内置对象:
    • ${param}: 获取请求参数,等同于 request.getParameter()
    • ${header}: 获取请求头。
    • ${initParam}: 获取Servlet初始化参数。

框架演进

  • Servlet + JSP + JSTL + JavaBean:这是经典的小型项目架构,足以应对很多需求。
  • Spring MVC:更强大的MVC框架,是目前Java Web开发的主流,它通过依赖注入面向切面编程 等特性,让开发更高效、更规范。
  • 现代框架Spring Boot 极大地简化了Spring应用的创建和部署,是当前企业级应用开发的首选。

学习资源推荐

本教程带你从零开始,了解了JSP的核心概念、语法,并通过一个完整的MVC案例,学习了如何构建一个结构清晰、易于维护的动态网站。

学习路径建议

  1. 打好基础:熟练掌握JSP三大元素、指令和动作。
  2. 实践MVC:动手实现几个小项目(如留言板、新闻列表),深刻理解Servlet和JSP的协作。
  3. 拥抱JSTL和EL:彻底告别页面中的Java脚本。
  4. 迈向框架:当你觉得手动配置和编写Servlet很繁琐时,就可以开始学习Spring MVC了。

JSP虽然不是最前沿的技术,但它是理解Java Web工作原理的基石,掌握了它,学习更现代的框架(如Spring Boot)会事半功倍,祝你学习愉快!

分享:
扫描分享到社交APP
上一篇
下一篇