简单网页设计模板jsp代码如何快速上手？-网页设计-锦华智联科技

最简单的静态模板（仅HTML + JSP语法）

这个模板不包含任何Java逻辑,只展示了JSP如何嵌入HTML和一些基本的JSP指令，适合作为所有JSP页面的基础框架。

（图片来源网络，侵删）

文件名: simple_template.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %> <%-- 引入Java类，以便使用 --%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单JSP模板</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* 可以在这里写一些自定义的CSS样式 */
        body {
            padding-top: 50px; /* 为固定导航栏留出空间 */
        }
    </style>
</head>
<body>
    <!-- JSP指令: 包含一个共同的头部文件 -->
    <%@ include file="header.jsp" %>
    <div class="container mt-4">
        <h1>欢迎使用我们的网站！</h1>
        <p>这是一个使用JSP和Bootstrap构建的简单模板。</p>
        <!-- JSP脚本片段: 在这里嵌入Java代码 -->
        <%
            // 获取当前服务器时间
            Date now = new Date();
            out.println("<p>当前服务器时间是: " + now + "</p>");
        %>
        <!-- JSP表达式: 直接输出Java表达式的值 -->
        <p>页面的请求URI是: <%= request.getRequestURI() %></p>
    </div>
    <!-- JSP指令: 包含一个共同的底部文件 -->
    <%@ include file="footer.jsp" %>
    <!-- 引入外部JavaScript文件 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

配套文件示例:

header.jsp

<%-- 这是一个通用的头部文件 --%>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">我的网站</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active"><a class="nav-link" href="#">首页</a></li>
            <li class="nav-item"><a class="nav-link" href="#">lt;/a></li>
            <li class="nav-item"><a class="nav-link" href="#">联系</a></li>
        </ul>
    </div>
</nav>

footer.jsp

（图片来源网络，侵删）

<%-- 这是一个通用的底部文件 --%>
<footer class="bg-dark text-white text-center py-3 mt-5">
    <p>&copy; 2025 我的网站. 保留所有权利.</p>
</footer>

动态数据展示模板（JSP + EL + JSTL）

这是更常用、更规范的模板，它使用JSP Expression Language (EL) 和 JSP Standard Tag Library (JSTL) 来处理数据，使JSP页面更加整洁，几乎不包含Java代码。

准备工作：

确保你的项目中已经添加了JSTL的库依赖（如果你使用Maven，在pom.xml中添加）：

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>
<dependency>
    <groupId>taglibs</groupId>
    <artifactId>standard</artifactId>
    <version>1.1.2</version>
</dependency>

文件名: dynamic_template.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- 引入JSTL核心标签库 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%-- 引入JSTL格式化标签库 --%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">动态数据展示模板</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <%-- 使用JSTL的<c:import>来包含头部，比<%@ include %>更灵活 --%>
    <c:import url="header.jsp" />
    <div class="container mt-4">
        <h1>用户列表</h1>
        <p>以下是从服务器获取的用户数据：</p>
        <%-- JSTL的<c:if>标签进行条件判断 --%>
        <c:if test="${not empty userList}">
            <table class="table table-striped table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>注册时间</th>
                    </tr>
                </thead>
                <tbody>
                    <%-- JSTL的<c:forEach>标签遍历集合 --%>
                    <c:forEach var="user" items="${userList}">
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.email}</td>
                            <%-- JSTL的<fmt:formatDate>标签格式化日期 --%>
                            <td><fmt:formatDate value="${user.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </c:if>
        <%-- JSTL的<c:if>标签处理空数据的情况 --%>
        <c:if test="${empty userList}">
            <div class="alert alert-warning" role="alert">
                暂无用户数据！
            </div>
        </c:if>
    </div>
    <c:import url="footer.jsp" />
</body>
</html>

数据如何传递到这个页面？ 这个页面的数据 ${userList} 是由一个Servlet（控制器）设置的，在Servlet中，你会这样做：

（图片来源网络，侵删）

// 在你的Servlet的doGet或doPost方法中
// 1. 获取数据 (从数据库或Service层)
List<User> users = userService.getAllUsers();
// 2. 将数据存入request作用域
request.setAttribute("userList", users);
// 3. 转发到JSP页面
request.getRequestDispatcher("dynamic_template.jsp").forward(request, response);

带表单的模板（JSP + EL + JSTL）

这个模板在前一个模板的基础上,增加了表单提交功能，展示了如何从JSP接收数据。

文件名: form_template.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">用户注册表单</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <c:import url="header.jsp" />
    <div class="container mt-4">
        <h1>用户注册</h1>
        <%-- 显示成功或错误消息 --%>
        <c:if test="${not empty message}">
            <div class="alert alert-${messageType}">
                ${message}
            </div>
        </c:if>
        <%-- 
          action="register" 指定表单提交的URL，这个URL对应一个Servlet。
          method="post" 指定提交方式为POST。
        --%>
        <form action="register" method="post">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" name="name" value="${param.name}" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" value="${param.email}" required>
            </div>
            <div class="form-group">
                <label for="birthDate">出生日期</label>
                <input type="date" class="form-control" id="birthDate" name="birthDate" value="${param.birthDate}" required>
            </div>
            <button type="submit" class="btn btn-primary">提交注册</button>
            <a href="dynamic_template.jsp" class="btn btn-secondary">返回列表</a>
        </form>
    </div>
    <c:import url="footer.jsp" />
</body>
</html>

处理表单数据的Servlet示例 (RegisterServlet.java)

@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 设置请求编码，防止中文乱码
        request.setCharacterEncoding("UTF-8");
        // 2. 获取表单数据
        String name = request.getParameter("name");
        String email = request.getParameter("email");
        String birthDateStr = request.getParameter("birthDate");
        // 3. 简单的业务逻辑验证
        String message = "";
        String messageType = "danger"; // 'danger' (红色), 'success' (绿色), 'info' (蓝色)
        if (name == null || name.trim().isEmpty()) {
            message = "姓名不能为空！";
        } else if (email == null || !email.contains("@")) {
            message = "请输入有效的邮箱地址！";
        } else {
            // 模拟保存成功
            message = "用户 " + name + " 注册成功！";
            messageType = "success";
            // ... 在这里调用Service层将数据保存到数据库 ...
        }
        // 4. 将消息和回显的数据存入request作用域
        request.setAttribute("message", message);
        request.setAttribute("messageType", messageType);
        // 将用户输入的数据也放回去，方便表单回显
        request.setAttribute("name", name);
        request.setAttribute("email", email);
        request.setAttribute("birthDate", birthDateStr);
        // 5. 转发回表单页面，显示消息
        request.getRequestDispatcher("form_template.jsp").forward(request, response);
    }
}

模板类型	核心技术	优点	适用场景
模板一	JSP脚本 (`<% ... %>`)	简单直接，适合学习JSP基础。	静态页面、简单动态展示、快速原型。
模板二	EL + JSTL + Servlet	代码清晰、职责分离、易于维护，是业界标准。	几乎所有需要展示数据的动态网页。
模板三	模板二 + HTML表单	功能完整，能处理用户输入和反馈。	用户注册、登录、信息修改等表单交互场景。

对于现代的JSP开发,强烈推荐使用模板二和模板三的方式，即Servlet作为控制器，JSP作为视图，通过EL和JSTL来展示数据，这能让你的项目结构更清晰，代码更易于管理和扩展。