用户数据显示 | JSP | 表达式语言

简介

在这个项目中，你将学习如何在 JSP（JavaServer Pages）页面中使用 EL（表达式语言）表达式来显示从数据库中检索到的用户数据。你将实现两个 JSP 页面：一个用于输入用户 ID 并查询相应的用户信息，另一个用于显示查询到的数据。

👀 预览

index.jsp
data.jsp

🎯 任务

在这个项目中，你将学习：

如何实现 index.jsp 页面，该页面包含一个用于输入用户 ID 并重定向到 data.jsp 的表单。
如何实现 data.jsp 页面，该页面使用 EL 表达式显示从数据库中检索到的用户数据。

🏆 成果

完成这个项目后，你将能够：

使用 EL 表达式在 JSP 页面中访问和显示数据。
与 Servlet 进行交互，从数据库中检索数据并将其传递到 JSP 页面。
创建并设置 HTML 表格的样式，以用户友好的方式呈现数据。

Skills Graph

实现 index.jsp 页面

在这一步中，你将学习如何实现 index.jsp 页面，该页面包含一个用于输入用户 ID 并重定向到 data.jsp 的表单。

打开位于 QueryDisplayElProject/src/main/webapp 中的 index.jsp 文件。
向该文件添加以下代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息查询</title>
</head>
<body>
<form action="/UserServlet" method="get">
    <input type="text" name="id" /><input
        type="submit"
        value="搜索"
/>
</form>
</body>
</html>

这段代码创建了一个简单的 HTML 表单，其中有一个用于输入用户 ID 的输入字段和一个标有“搜索”的提交按钮。当用户点击提交按钮时，它将向 /UserServlet 发送一个 GET 请求，其中 id 参数设置为在输入字段中输入的用户 ID。

✨ 查看解决方案并练习

实现 data.jsp 页面

在这一步中，你将学习如何实现 data.jsp 页面，该页面将使用 EL 表达式显示从数据库中检索到的用户数据。

打开位于 QueryDisplayElProject/src/main/webapp 中的 data.jsp 文件。
向该文件添加以下代码：

<%@ page import="org.labex.entity.User" %> <%@ page
contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>用户信息</title>
    <style>
      th,
      td {
        border: 1px solid black;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <c:if test="${not empty requestScope.user}">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>电话号码</th>
            <th>邮箱</th>
            <th>地址</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>${user.userId}</td>
            <td>${requestScope.user.userName}</td>
            <td>${requestScope.user.userGender == 1? '男' : '女'}</td>
            <td>${requestScope.user.userAge}</td>
            <td>${requestScope.user.userPhone}</td>
            <td>${requestScope.user.userEmail}</td>
            <td>${requestScope.user.userAddr}</td>
          </tr>
        </tbody>
      </table>
    </c:if>
    <c:if test="${empty requestScope.user}">
      <p>未找到信息。</p>
    </c:if>
  </body>
</html>

这段代码创建了一个 HTML 表格来显示用户数据。它使用 EL 表达式来访问从 Servlet 检索并存储在 requestScope 中的 User 对象的属性。如果未找到 User 对象，它将显示一条消息，表明未找到信息。

<c:if> 标签用于根据 requestScope 中是否存在 User 对象有条件地显示表格或“未找到信息”消息。

使用以下命令启动 Tomcat 服务器：

cd ~/project/QueryDisplayElProject/
mvn clean tomcat7:run

打开一个网页浏览器并转到 http://localhost:8080。你将看到一个输入框和一个按钮，在输入框中输入数字 id，例如：7，然后点击按钮跳转到 data.jsp 页面并显示 id 为 7 的用户信息。

结果如下：