Benutzerdatenanzeige | JSP | Ausdruckssprache

Einführung

In diesem Projekt lernst du, wie du Benutzerdaten, die aus einer Datenbank abgerufen werden, in JSP (JavaServer Pages)-Seiten mit EL (Expression Language)-Ausdrücken anzeigen kannst. Du wirst zwei JSP-Seiten implementieren: eine zur Eingabe einer Benutzer-ID und zum Abfragen der entsprechenden Benutzerinformationen und eine andere zur Anzeige der abgefragten Daten.

👀 Vorschau

index.jsp
data.jsp

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die index.jsp-Seite implementierst, die ein Formular zur Eingabe einer Benutzer-ID enthält und zu data.jsp weiterleitet.
Wie du die data.jsp-Seite implementierst, die die Benutzerdaten, die aus der Datenbank abgerufen werden, mit EL-Ausdrücken anzeigt.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

EL-Ausdrücke zum Zugreifen auf und Anzeigen von Daten in JSP-Seiten zu verwenden.
Mit einem Servlet zu interagieren, um Daten aus einer Datenbank abzurufen und an eine JSP-Seite zu übergeben.
HTML-Tabellen zu erstellen und zu gestalten, um Daten auf benutzerfreundliche Weise darzustellen.

Skills Graph

Implementiere die index.jsp-Seite

In diesem Schritt lernst du, wie du die index.jsp-Seite implementierst, die ein Formular zur Eingabe einer Benutzer-ID enthält und zu data.jsp weiterleitet.

Öffne die Datei index.jsp, die sich in QueryDisplayElProject/src/main/webapp befindet.
Füge den folgenden Code zur Datei hinzu:

<%@ 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>

Dieser Code erstellt ein einfaches HTML-Formular mit einem Eingabefeld für die Benutzer-ID und einem Submit-Button mit der Bezeichnung "search". Wenn der Benutzer den Submit-Button klickt, wird eine GET-Anfrage an /UserServlet gesendet, wobei der Parameter id auf die in das Eingabefeld eingegebene Benutzer-ID gesetzt ist.

✨ Lösung prüfen und üben

Implementiere die data.jsp-Seite

In diesem Schritt lernst du, wie du die data.jsp-Seite implementierst, die die Benutzerdaten, die aus der Datenbank abgerufen werden, mit EL-Ausdrücken anzeigt.

Öffne die Datei data.jsp, die sich in QueryDisplayElProject/src/main/webapp befindet.
Füge den folgenden Code zur Datei hinzu:

<%@ 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>

Dieser Code erstellt eine HTML-Tabelle, um die Benutzerdaten anzuzeigen. Er verwendet EL-Ausdrücke, um auf die Eigenschaften des User-Objekts zuzugreifen, das aus dem Servlet abgerufen und im requestScope gespeichert wurde. Wenn das User-Objekt nicht gefunden wird, wird eine Nachricht angezeigt, die angibt, dass die Information nicht gefunden wurde.

Die <c:if>-Tags werden verwendet, um bedingt die Tabelle oder die "Information not found"-Nachricht anzuzeigen, je nachdem, ob das User-Objekt im requestScope vorhanden ist.

Starte den Tomcat-Server mit dem folgenden Befehl:

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

Öffne einen Webbrowser und gehe zu http://localhost:8080. Du wirst ein Eingabefeld und einen Button sehen. Im Eingabefeld gib die Nummer der ID ein, z. B.: 7, und klicke dann auf den Button, um zur data.jsp-Seite zu springen und die Benutzerinformationen der ID 7 anzuzeigen.

Das Ergebnis ist wie folgt: