Отображение данных пользователя | JSP | Язык выражений

Введение

В этом проекте вы научитесь отображать данные пользователя, полученные из базы данных, с использованием выражений EL (Expression Language) на страницах JSP (JavaServer Pages). Вы реализуете две страницы JSP: одну для ввода идентификатора пользователя и запроса соответствующей информации о пользователе, и другую для отображения запрошенных данных.

👀 Предварительный просмотр

index.jsp
data.jsp

🎯 Задачи

В этом проекте вы научитесь:

Как реализовать страницу index.jsp, которая содержит форму для ввода идентификатора пользователя и перенаправления на data.jsp.
Как реализовать страницу data.jsp, которая отображает данные пользователя, полученные из базы данных, с использованием выражений EL.

🏆 Достижения

После завершения этого проекта вы сможете:

Использовать выражения EL для доступа и отображения данных на страницах JSP.
Взаимодействовать с сервлетом для получения данных из базы данных и передачи их на страницу JSP.
Создавать и стилизовать HTML-таблицы для представления данных в удобочитаемом виде.

Реализация страницы index.jsp

В этом шаге вы научитесь реализовать страницу index.jsp, которая содержит форму для ввода идентификатора пользователя и перенаправления на data.jsp.

Откройте файл index.jsp, расположенный в QueryDisplayElProject/src/main/webapp.
Добавьте в файл следующий код:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>User Information Inquiry</title>
</head>
<body>
<form action="/UserServlet" method="get">
    <input type="text" name="id" /><input
        type="submit"
        value="search"
/>
</form>
</body>
</html>

Этот код создает простую HTML-форму с полем ввода для идентификатора пользователя и кнопкой отправки с надписью "search". Когда пользователь нажимает кнопку отправки, будет отправлен GET-запрос на /UserServlet с параметром id, установленным в идентификатор пользователя, введенный в поле ввода.

Реализация страницы data.jsp

В этом шаге вы научитесь реализовать страницу data.jsp, которая будет отображать данные пользователя, полученные из базы данных, с использованием выражений EL.

Откройте файл data.jsp, расположенный в QueryDisplayElProject/src/main/webapp.
Добавьте в файл следующий код:

<%@ 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>User Information</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>Name</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Phone Number</th>
            <th>Email</th>
            <th>Address</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>${user.userId}</td>
            <td>${requestScope.user.userName}</td>
            <td>${requestScope.user.userGender == 1? 'man' : 'woman'}</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>Information not found.</p>
    </c:if>
  </body>
</html>

Этот код создает HTML-таблицу для отображения данных пользователя. Он использует выражения EL для доступа к свойствам объекта User, полученного из Servlet и хранящегося в requestScope. Если объект User не найден, отображается сообщение, указывающее, что информация не найдена.

Теги <c:if> используются для условного отображения таблицы или сообщения "Information not found" в зависимости от того, присутствует ли объект User в requestScope.

Запустите сервер Tomcat с использованием следующей команды:

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

Откройте веб-браузер и перейдите по адресу http://localhost:8080. Вы увидите поле ввода и кнопку, в поле ввода введите номер id, например: 7, а затем нажмите кнопку, чтобы перейти на страницу data.jsp и отобразить информацию о пользователе с id 7.

Результат выглядит следующим образом:

Результат отображения данных пользователя

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.

Отображение результатов запросов с использованием выражений EL