Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 4)

Guten Tag. In diesem Artikel möchte ich meine erste Begegnung mit Dingen wie Maven, Spring, Hibernate, MySQL und Tomcat beim Erstellen einer einfachen CRUD-Anwendung teilen. Dies ist der letzte Teil. Der Artikel richtet sich in erster Linie an diejenigen, die hier bereits 30-40 Level abgeschlossen haben, sich aber noch nicht über reines Java hinausgewagt haben und gerade erst anfangen (oder dabei sind, damit zu beginnen), die offene Welt mit all diesen Technologien, Frameworks und anderen Unbekannten zu betreten Wörter. Dies ist der letzte vierte Teil des Artikels „Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung“. Frühere Teile können über die folgenden Links eingesehen werden:

• Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 1)
• Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 2)
• Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 3)

Inhalt:

• Design- und Webressourcen
• Seitennummerierung
• Abschluss

Design- und Webressourcen

Unsere Anwendung funktioniert, aber Sie können sie nicht ohne Tränen, langweilige Inschriften, hässliche Links und leeren weißen Hintergrund betrachten. Wir müssen das beheben und andere Schönheiten hinzufügen. Wie machen wir das? Zunächst einmal können Sie einfach mit den Seiten herumspielen und mithilfe der HTML- Funktionen alle möglichen Dinge tun . Wenn Sie jedoch versuchen, Hintergründe, Farben, Größen, Anordnung von Elementen usw. allein mit HTML zu ändern. usw. Dann kann man die Seite am Ende so durcheinander bringen, dass man dort später nichts mehr erkennen kann. Und außerdem sind die Gestaltungsmöglichkeiten von HTML recht begrenzt. Hierfür ist es besser, CSS (Cascading Style Sheets) zu verwenden. Dann kann alles, was mit dem Design zu tun hat, an einem Ort gesammelt und dann auf das gewünschte Element der Seite angewendet werden. CSS-Code kann direkt auf der JSP- Seite in einem speziellen Tag geschrieben werden , aber es ist viel bequemer, ihn in einer separaten Datei abzulegen und ihn dann einfach auf die erforderlichen Seiten anzuwenden. Um Dateien mit Stilen und anderen statischen Webressourcen zu platzieren, erstellen wir ein separates Verzeichnis in webapp . Um Webressourcen nicht mit regulären Ressourcen zu verwechseln (wo wir db.properties haben ), nennen wir dieses Verzeichnis einfach res und platzieren alle CSS-Dateien, Bilder usw. dort: Um diese Dateien verwenden zu können, müssen wir ihren Speicherort in der Konfiguration angeben. Lass uns in unsere Klasse gehen WebConfig. Zuvor haben wir die Annotation verwendet, @EnableWebMvcum nichts zu konfigurieren, sondern einfach die Standardkonfiguration zu verwenden. Aber jetzt muss noch etwas konfiguriert werden. Dazu verwenden wir die Schnittstelle WebMvcConfigurer, die es Ihnen ermöglicht, Konfigurationsmethoden zu überschreiben. Das. Wir können die Standardkonfiguration verwenden, aber gleichzeitig einige Aspekte für uns selbst anpassen. In diesem Fall addResourceHandlersbenötigen wir eine Methode, mit der wir den Standort statischer Webressourcen angeben. Nur für den Fall, die gesamte Klasse sieht am Ende so aus:

package testgroup.filmography.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "testgroup.filmography")
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/res/**").addResourceLocations("/res/");
    }

    @Bean
    ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/pages/");
        viewResolver.setSuffix(".jsp");
        return viewResolver;
    }
}

Um nun unser CSS auf der Seite zu verwenden, müssen Sie innerhalb des Tags darauf verlinken head:

<head>
    <link href="<c:url value="/res/style.css"/>" rel="stylesheet" type="text/css"/>
</head>

Fügen Sie einfach diese Zeile hinzu und erstellen Sie beispielsweise diese einfache CSS-Datei:

table {
    border-spacing: 0 10px;
    font:  bold 100% Georgia, serif;
    margin: 40px auto;
    text-shadow: 5px 5px 5px #3F3F7F;
    background: #B1B9D9;
    text-align: center;
    vertical-align: middle;
    width: 50%;
    border: 10px solid blue;
}

Und das wird unsere Tabelle komplett verändern (es sieht natürlich blöd aus, aber es ist zum Beispiel so): Nun, ich denke, über CSS muss man nicht im Detail sprechen, alles ist ganz einfach. Im Internet finden Sie viele vorgefertigte Möglichkeiten zur Gestaltung von Tabellen und Formularen. Aber es ist natürlich besser, das Design selbst zu machen, man muss kein Designer sein, schließlich handelt es sich hier nicht um eine komplizierte Website. Schon ein paar Stunden nach dem ersten Kennenlernen werden ausreichen, um ein recht schönes und ordentliches Design für eine so einfache Seite zu erstellen. Darüber hinaus ist das Internet voll von Lektionen und Beispielen aller Art. Es gibt spezielle Websites, auf denen Sie HTML und CSS gleichzeitig auf einem Bildschirm bearbeiten und sofort sehen können, wie alles aussieht. Mit ein wenig Übung können Sie echte Kunst schaffen. Allerdings sollte man sich hier auch nicht zu sehr hinreißen lassen (es sei denn, man hat natürlich vor, Designer zu werden), sonst ist Design so eine Sache, man kann hier sehr lange stecken bleiben. Als ich anfing, CSS zu verstehen, blieb ich stecken. Ich wollte alles ausprobieren, jede Eigenschaft, etwas verdrehen, herumbasteln, experimentieren, Seiten von manchen Seiten nehmen und sie bis zur Unkenntlichkeit neu gestalten. Ich hatte wahrscheinlich eine Woche lang Spaß mit diesem Spielzeug und habe nichts anderes getan, bis es mich losließ :) Nun, im Allgemeinen sollte man es natürlich nicht übertreiben und ein unverständliches buntes Wunder vollbringen, man muss es einfach und einfach machen geschmackvoll. Das Einzige, was erwähnenswert ist. Sie müssen verstehen, dass CSS eine Beschreibung des Designs und HTML ein Markup ist . Sie sollten nicht versuchen, absolut alles über CSS zu erledigen; einige Aspekte werden sehr schwierig sein, andere sind einfach unmöglich, wenn dies in HTML mit ein paar zusätzlichen Zeilen oder sogar nur einem Attribut in einem Tag erledigt wird. Sie müssen sie kombinieren, alle möglichen Farben, Hintergründe und Schriftarten in CSS erstellen, und wenn Sie beispielsweise ein paar Tabellenzellen kombinieren müssen, ist es einfacher, HTML-Tools zu verwenden. Nun, hier ist zum Beispiel, was ich in ein paar Stunden, in denen ich mit CSS und HTML herumgespielt habe, mit den Seiten machen konnte (ich werde hier nicht im Detail auf die Unordnung eingehen, die ich dafür angerichtet habe, am Ende wird es so sein (ein Link zum GitHub dieses Projekts, wo Sie nachschauen können): Ich weiß natürlich nicht, wie kompetent ich dort alles gemacht habe, aber wenn man bedenkt, dass ich CSS eine Woche zuvor zum ersten Mal gesehen habe, denke ich, dass es ganz gut geklappt hat.

Seitennummerierung

Jetzt funktioniert alles, es sieht gut aus, aber es sind bisher nur wenige Datensätze in der Tabelle. Was ist, wenn es hundert oder tausend Filme sind? Es ist nicht sehr praktisch, durch eine so lange Liste zu scrollen. Wesentlich komfortabler ist es, wenn die Liste beispielsweise in Seiten mit 10 Einträgen angezeigt wird. Daher werden wir nun versuchen, die Aufteilung der Liste in Seiten zu implementieren (manchmal wird dies auch „Paging“ oder „Pagination“ ( englische Paginierung ) genannt ). Dies kann auf unterschiedliche Weise erfolgen. Sie können beispielsweise die vollständige Liste auf eine JSP-Seite übertragen und dort eine Tabelle für die erforderliche Anzahl an Datensätzen erstellen. Oder Sie können beispielsweise die erforderlichen Datensätze aus der allgemeinen Liste im Dienst abrufen und diese Miniliste dann zur Anzeige an eine JSP-Seite senden. Aber am besten ist es natürlich, dies auf Datenbankebene zu tun. Die Idee besteht nicht darin, eine vollständige Liste aus der Datenbank zu entnehmen und diese dann in Stücke zu zerlegen, sondern zunächst das benötigte Stück aus der Datenbank zu holen, ohne alles andere anzufassen. Warum müssen wir schließlich alle Hunderte oder Tausende von Datensätzen auf einmal aus der Datenbank entfernen? Wenn der benötigte Datensatz in den Top Ten ist, ist es besser, nur diesen einen Zehner zu entfernen. Gehen wir zu DAO und fügen der Methode allFilmseinen Parameter hinzu int page, der für die Seitenzahl verantwortlich ist (im Dienst machen wir natürlich dasselbe). Und ändern wir die Implementierung dieser Methode ein wenig: Wenn wir früher die gesamte Liste herausgezogen haben, ziehen wir jetzt nur einen Teil heraus. Dabei helfen uns die Methoden setFirstResult(mit welcher Zeile der Tabelle begonnen werden soll) und setMaxResults(wie viele Datensätze angezeigt werden sollen) :

@SuppressWarnings("unchecked")
public List<Film> allFilms(int page) {
    Session session = sessionFactory.getCurrentSession();
    return session.createQuery("from Film").setFirstResult(10 * (page - 1)).setMaxResults(10).list();
}

Diese. Wenn dies die 1. Seite ist, werden maximal 10 Datensätze angezeigt, beginnend mit der 0.; wenn dies die 5. Seite ist, dann 10 Datensätze, beginnend mit der 40. (vergessen Sie nicht, dass die Nummerierung in der Datenbank bei 0 beginnt). Außerdem erstellen wir zusätzlich eine Methode, die die Anzahl der Datensätze in der Tabelle zurückgibt. Wir benötigen dies, um die Anzahl aller Seiten zu erfahren und Links für diese auf unserer JSP-Seite zu erstellen:

public int filmsCount() {
     Session session = sessionFactory.getCurrentSession();
     return session.createQuery("select count(*) from Film", Number.class).getSingleResult().intValue();
 }

Mit einer solchen Abfrage erhalten wir die Anzahl aller Datensätze in der Tabelle (als intWert), ohne die Datensätze selbst herauszuziehen. Gehen wir nun zum Controller und arbeiten an der Methode, die die Hauptseite mit einer Liste von Filmen zurückgibt:

@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView allFilms(@RequestParam(defaultValue = "1") int page) {
    List&ltFilm> films = filmService.allFilms(page);
    int filmsCount = filmService.filmsCount();
    int pagesCount = (filmsCount + 9)/10;
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("films");
    modelAndView.addObject("page", page);
    modelAndView.addObject("filmsList", films);
    modelAndView.addObject("filmsCount", filmsCount);
    modelAndView.addObject("pagesCount", pagesCount);
    return modelAndView;
}

Hier ist eine neue Anmerkung erschienen @RequestParam, die darauf hinweist, dass wir diesen Wert von einem Anforderungsparameter erhalten. Wenn wir nun zu einer Adresse mit einem Parameter gehen, zum Beispiel http://localhost:8080/ ?page=4 , erhalten wir entsprechend die 4. Seite. Wir setzen den Standardwert auf „ 1 “, sodass wir beim Start der Anwendung die erste Seite erhalten, wenn wir zu einer Adresse ohne den Parameter http://localhost:8080/ gehen . Bei der Methode erhalten wir die Anzahl aller Datensätze und berechnen dann auf diese einfache Weise die Anzahl der Seiten. Diese. Wenn wir 10 Datensätze haben, ist das 1 Seite, und wenn es 11 sind, dann sind das schon 2. Nun, wir übertragen das Ganze auf das Modell. Sie müssen die Anzahl der Seiten kennen, um Links für alle in einem Zyklus zu erstellen, und die Anzahl der Filme dort angeben, nur für den Fall, dass Sie diese Informationen beispielsweise irgendwo auf der Seite anzeigen möchten. Jetzt müssen Sie nur noch zu movies.jsp gehen und mithilfe dieses Konstrukts Links zu jeder Seite hinzufügen:

<c:forEach begin="1" end="${pagesCount}" step="1" varStatus="i">
    <c:url value="/" var="url">
        <c:param name="page" value="${i.index}"/>
    </c:url>
    <a href="${url}">${i.index}</a>
</c:forEach>

Wir erstellen Links nach Zähler 1, 2, 3, ... und setzen den Parameter nach dem Indexwert. Fügen wir noch eine kleine Note hinzu. Wir kehren zum Controller zurück. Bei den Methoden zum Hinzufügen, Bearbeiten und Löschen leiten wir nach Abschluss des Vorgangs zur Hauptseite „redirect:/“ weiter . Das. Wenn wir uns irgendwo auf der 50. Seite befinden und auf Eintrag bearbeiten klicken, gelangen wir nach der Ausführung zur Adresse „ / “, d. h. Kehren wir zu Seite 1 zurück. Das ist nicht sehr praktisch; ich würde gerne dorthin zurückkehren, wo wir hergekommen sind. Lassen Sie uns das ganz einfach lösen. FilmControllerLassen Sie uns eine Instanzvariable in der Klasse erstellenint page

private int page;

Innerhalb der Methode allFilmsweisen wir dieser Variablen den Wert des Parameters zu page:

this.page = page;

Das. Jedes Mal, wenn diese Methode ausgeführt wird (d. h. wenn wir durch Seiten navigieren), wird der Wert der aktuellen Seite in die Variable geschrieben. Und dann verwenden wir diesen Wert in unseren Methoden, um zurück zur gleichen Seite umzuleiten.

modelAndView.setViewName("redirect:/?page=" + this.page);

Abschluss

Wir werden wahrscheinlich hier enden. Das Ergebnis ist eine vollwertige CRUD-Anwendung. Es ist sicherlich alles andere als ideal (sehr weit entfernt), aber es kann optimiert und verbessert, Fehler behoben und Funktionen hinzugefügt werden. Sie können integrierte Methoden für Rohoperationen verwenden; Filtern, Suchen und Sortieren hinzufügen; andere verwandte Tabellen hinzufügen; Implementieren Sie die Unterstützung verschiedener Benutzer mit Autorisierung und Authentifizierung usw. usw. Der Fantasie sind keine Grenzen gesetzt, also probieren Sie es aus. Link zum Github dieses Projekts . Vielen Dank für Ihre Aufmerksamkeit. PS: Dies ist mein erster Versuch in meinem Leben, einen Artikel zu schreiben, also urteilen Sie nicht streng :). Ich entschuldige mich dafür, dass ich keine anderen Links zu nützlichen Ressourcen hinzugefügt habe; leider kann ich es mir immer noch nicht angewöhnen, Links zu den Quellen zu speichern, aus denen ich Informationen beziehe. Und natürlich entschuldige ich mich für die vielen Briefe, Kürze ist nicht mein Talent, ich hoffe, jemand kann damit umgehen. Links zu allen Teilen

• Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 1)
• Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 2)
• Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 3)
• Einführung in Maven, Spring, MySQL, Hibernate und die erste CRUD-Anwendung (Teil 4)