Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 4)

Buon pomeriggio. In questo articolo vorrei condividere il mio primo incontro con cose come Maven, Spring, Hibernate, MySQL e Tomcat nel processo di creazione di una semplice applicazione CRUD. Questa è la parte finale. L'articolo è destinato principalmente a coloro che hanno già completato 30-40 livelli qui, ma non si sono ancora avventurati oltre il puro Java e stanno appena iniziando (o stanno per iniziare) ad entrare nel mondo aperto con tutte queste tecnologie, framework e altri strumenti sconosciuti parole. Questa è la quarta parte finale dell'articolo "Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD". Le parti precedenti possono essere visualizzate seguendo i link:

• Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 1)
• Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 2)
• Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 3)

Contenuto:

• Progettazione e risorse web
• Impaginazione
• Conclusione

Progettazione e risorse web

La nostra applicazione funziona, ma non puoi guardarla senza lacrime, iscrizioni noiose, collegamenti brutti e sfondo bianco vuoto. Dobbiamo risolvere questo problema e aggiungere bellezze diverse. Come facciamo questo? Bene, prima di tutto, puoi semplicemente giocare con le pagine e fare ogni genere di cose usando le funzionalità dell'HTML . Ma se provi a modificare sfondi, colori, dimensioni, disposizione degli elementi, ecc. utilizzando solo HTML. e così via. poi alla fine puoi creare un tale pasticcio nella pagina che non riesci più a distinguere più niente. Inoltre, le opzioni di progettazione dell'HTML sono piuttosto limitate. È meglio usare i CSS (Cascading Style Sheets) per questo . Quindi tutto ciò che riguarda il design può essere raccolto in un unico posto e quindi applicato all'elemento desiderato della pagina. Il codice CSS può essere scritto direttamente sulla pagina JSP in un tag speciale, ma è molto più comodo inserirlo in un file separato e quindi applicarlo semplicemente alle pagine necessarie. Per posizionare file con stili e altre risorse web statiche, creeremo una directory separata all'interno di webapp . Per non confondere le risorse web con le risorse normali (dove abbiamo db.properties ), chiamiamo semplicemente questa directory res e posizioniamo lì tutti i file CSS, le immagini, ecc.: Per utilizzare questi file dobbiamo specificare la loro posizione nella configurazione. Andiamo alla nostra classe WebConfig. In precedenza, utilizzavamo l'annotazione @EnableWebMvcper non configurare nulla, ma utilizzare semplicemente la configurazione predefinita. Ma ora è necessario configurare qualcosa. Per fare ciò, utilizziamo l'interfaccia WebMvcConfigurer, che consente di sovrascrivere i metodi di configurazione. Quello. possiamo utilizzare la configurazione predefinita, ma allo stesso tempo personalizzare alcuni aspetti per noi stessi. In questo caso addResourceHandlers, abbiamo bisogno di un metodo con cui indichiamo la posizione delle risorse web statiche. Per ogni evenienza, l'intera classe finisce per assomigliare a questa:

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;
    }
}

Ora per utilizzare il nostro CSS sulla pagina è necessario collegarlo all'interno del tag head:

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

Basta aggiungere questa riga e creare, ad esempio, questo semplice file CSS:

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;
}

E questo cambierà completamente la nostra tabella (sembra stupido, ovviamente, ma è così, per esempio): Beh, penso che non sia necessario parlare in dettaglio dei CSS, tutto è abbastanza semplice. Su Internet puoi trovare molte opzioni già pronte per la progettazione di tabelle e moduli. Ma è meglio, ovviamente, progettare da soli, non è necessario essere un designer, dopotutto questo non è un sito complicato. Anche poche ore dopo la prima conoscenza saranno sufficienti per creare un design abbastanza bello e ordinato per una pagina così semplice. Inoltre, Internet è pieno di tutti i tipi di lezioni, esempi, ci sono siti speciali in cui puoi modificare contemporaneamente HTML, CSS su uno schermo e vedere immediatamente come appare. Con un po' di pratica puoi creare vera arte. È vero, non dovresti lasciarti trasportare troppo qui (a meno che, ovviamente, tu non abbia intenzione di diventare un designer), altrimenti il ​​​​design è una cosa del genere, puoi rimanere bloccato qui per molto tempo. Quando ho iniziato a capire i CSS, sono rimasto bloccato. Volevo provare tutto, ogni proprietà, stravolgere qualcosa, armeggiare, sperimentare, prendere pagine di alcuni siti e rifarle in modo irriconoscibile. Probabilmente mi sono divertito con questo giocattolo per una settimana, senza fare nient'altro, finché non mi ha lasciato andare :) Beh, in generale, ovviamente, non dovresti esagerare e fare un miracolo colorato incomprensibile, devi farlo semplicemente e con gusto. L'unica cosa degna di nota. Devi capire che CSS è una descrizione del design e HTML è markup . Non dovresti provare a fare assolutamente tutto tramite CSS; alcuni aspetti saranno molto difficili da realizzare, e altri sono semplicemente impossibili, quando in HTML questo viene fatto con un paio di righe extra, o anche solo con un attributo in un tag. Devi combinarli, creare tutti i tipi di colori, sfondi, caratteri in CSS e se, ad esempio, devi combinare un paio di celle di tabella, è più semplice utilizzare gli strumenti HTML. Bene, per esempio, ecco cosa sono riuscito a fare con le pagine in un paio d'ore di giocherellare con CSS e HTML (non entrerò nei dettagli qui riguardo al pasticcio che ho fatto per ottenere questo risultato, alla fine ci sarà un collegamento al GitHub di questo progetto dove puoi guardare): Certo, non so con quanta competenza ho fatto tutto lì, ma considerando che ho visto i CSS per la prima volta una settimana prima, penso che sia andata abbastanza bene.

Impaginazione

Ora tutto funziona, sembra a posto, ma finora ci sono solo pochi record nella tabella. E se ci fossero cento o mille film? Non è molto comodo scorrere un elenco così lungo. È molto più comodo visualizzare l'elenco, ad esempio, in pagine da 10 voci. Pertanto, ora proveremo a implementare la suddivisione dell'elenco in pagine (a volte viene chiamata anche “impaginazione” o “impaginazione” ( impaginazione inglese )). Questo può essere fatto in diversi modi. Ad esempio, puoi trasferire l'elenco completo su una pagina jsp e creare lì una tabella per il numero di record richiesto. Oppure, ad esempio, puoi estrarre i record richiesti dall'elenco generale del servizio e quindi inviare questo mini-elenco a una pagina jsp per la visualizzazione. Ma è meglio, ovviamente, farlo a livello di database. L'idea non è quella di prendere un elenco completo dal database e poi suddividerlo in parti, ma di ottenere inizialmente la parte richiesta dal database senza toccare tutto il resto. Dopotutto, perché dobbiamo estrarre tutte le centinaia o migliaia di record dal database contemporaneamente, se quello di cui abbiamo bisogno è tra i primi dieci, è meglio estrarre solo questo dieci. Andiamo su DAO e aggiungiamo allFilmsun parametro al metodo int page, che sarà responsabile del numero di pagina (nel servizio, ovviamente, facciamo lo stesso). E cambiamo un po’ l’implementazione di questo metodo: se prima tiravamo fuori l’intera lista, ora ne tireremo fuori solo una parte. setFirstResultI metodi (da quale riga della tabella iniziare) e setMaxResults(quanti record visualizzare) ci aiuteranno in questo :

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

Quelli. se questa è la 1° pagina visualizziamo un massimo di 10 record, a partire dallo 0; se questa è la 5° pagina, allora 10 record a partire dal 40 (non dimenticare che la numerazione nel database parte da 0). Creeremo inoltre un metodo che restituirà il numero di record nella tabella. Ne avremo bisogno per conoscere il numero di tutte le pagine e creare collegamenti per esse sulla nostra pagina jsp:

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

Utilizzando tale query, otterremo il numero di tutti i record nella tabella (come intvalore) senza estrarre i record stessi. Andiamo ora sul controller e lavoriamo sul metodo che restituisce la pagina principale con l'elenco dei film:

@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;
}

Qui è apparsa una nuova annotazione @RequestParamche indica che stiamo ottenendo questo valore da un parametro di richiesta. Ora, se andiamo ad un indirizzo con un parametro, ad esempio http://localhost:8080/ ?page=4 , otterremo, di conseguenza, la 4a pagina. Impostiamo il valore predefinito su " 1 " in modo che all'avvio dell'applicazione, quando andiamo a un indirizzo senza il parametro http://localhost:8080/ , otteniamo la prima pagina. Nel metodo otteniamo il numero di tutti i record, quindi in questo modo semplice calcoliamo il numero di pagine. Quelli. se abbiamo 10 record, questa è 1 pagina e se ce ne sono 11, significa già 2. Bene, trasferiamo l'intera cosa sul modello. È necessario conoscere il numero di pagine per creare collegamenti per tutte in un ciclo e lasciare che il numero di film sia lì per ogni evenienza, ad esempio, se si desidera visualizzare queste informazioni da qualche parte nella pagina. Adesso non resta che andare su film.jsp e aggiungere i link ad ogni pagina utilizzando questo costrutto:

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

Creiamo collegamenti in base al contatore 1, 2, 3, ... e impostiamo il parametro in base al valore dell'indice. Aggiungiamo un altro piccolo tocco. Torniamo al controllore. Nei metodi di aggiunta, modifica ed eliminazione, una volta completata l'operazione, reindirizziamo alla pagina principale "redirect:/" . Quello. se ci troviamo da qualche parte nella 50a pagina e facciamo clic su Modifica voce, dopo l'esecuzione andremo all'indirizzo " / ", ad es. Torniamo alla pagina 1. Questo non è molto conveniente, vorrei tornare da dove siamo venuti. Risolviamolo in modo molto semplice. FilmControllerCreiamo una variabile di istanza nella classeint page

private int page;

All'interno del metodo allFilmsassegneremo il valore del parametro a questa variabile page:

this.page = page;

Quello. Ogni volta che viene eseguito questo metodo (cioè quando navighiamo tra le pagine), nella variabile verrà scritto il valore della pagina corrente. Quindi utilizziamo questo valore nei nostri metodi per reindirizzare alla stessa pagina.

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

Conclusione

Probabilmente finiremo qui. Il risultato è un'applicazione CRUD a tutti gli effetti. È certamente lontano dall'ideale (molto lontano), ma può essere ottimizzato e migliorato, corretti bug e aggiunte funzionalità. È possibile utilizzare metodi integrati per operazioni grezze; aggiungere filtraggio, ricerca, ordinamento; aggiungere altre tabelle correlate; implementare il supporto per diversi utenti con autorizzazione e autenticazione, ecc. e così via. Lo spazio per l'immaginazione è illimitato, quindi provaci. Collegamento a github di questo progetto . Grazie per l'attenzione. PS Questo è il primo tentativo nella mia vita di scrivere un articolo, quindi non giudicare rigorosamente :). Mi scuso per non aver aggiunto collegamenti diversi a risorse utili; sfortunatamente non riesco ancora a prendere l'abitudine di salvare collegamenti alle fonti da cui ottengo informazioni. E, naturalmente, mi scuso per le tante lettere, la brevità non è il mio talento, spero che qualcuno possa gestirlo. Collegamenti a tutte le parti

• Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 1)
• Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 2)
• Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 3)
• Introduzione a Maven, Spring, MySQL, Hibernate e alla prima applicazione CRUD (parte 4)