Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 4)

Dzień dobry. W tym artykule chciałbym podzielić się swoim pierwszym spotkaniem z takimi rzeczami jak Maven, Spring, Hibernate, MySQL i Tomcat w procesie tworzenia prostej aplikacji CRUD. To jest ostatnia część. Artykuł przeznaczony jest przede wszystkim dla tych, którzy przeszli już tutaj 30-40 poziomów, ale nie wyszli jeszcze poza czystą Javę i dopiero zaczynają (lub wkrótce rozpoczną) wkraczanie do otwartego świata ze wszystkimi tymi technologiami, frameworkami i innymi nieznanymi im słowa. To ostatnia czwarta część artykułu „Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD”. Poprzednie części można zobaczyć pod linkami:

• Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 1)
• Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 2)
• Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 3)

Treść:

• Projektowanie i zasoby internetowe
• Paginacja
• Wniosek

Projektowanie i zasoby internetowe

Nasza aplikacja działa, ale nie można na nią patrzeć bez łez, nudnych napisów, brzydkich linków, pustego białego tła. Musimy to naprawić i dodać różne piękności. Jak to zrobić? Cóż, po pierwsze, możesz po prostu bawić się stronami i robić różne rzeczy, korzystając z możliwości HTML . Ale jeśli spróbujesz zmienić tła, kolory, rozmiary, rozmieszczenie elementów itp., Używając samego HTML. i tak dalej. to w końcu możesz zrobić taki bałagan na stronie, że później nic tam nie zobaczysz. Poza tym możliwości projektowania HTML są dość ograniczone. Lepiej jest w tym celu użyć CSS (kaskadowych arkuszy stylów) . Wtedy wszystko związane z projektem można zebrać w jednym miejscu, a następnie zastosować do pożądanego elementu strony. Kod CSS można zapisać bezpośrednio na stronie JSP w specjalnym tagu, ale o wiele wygodniej jest umieścić go w osobnym pliku, a następnie po prostu zastosować na niezbędnych stronach. Aby umieścić pliki ze stylami i innymi statycznymi zasobami sieciowymi, utworzymy osobny katalog wewnątrz aplikacji webapp . Aby nie mylić zasobów sieciowych ze zwykłymi zasobami (gdzie mamy db.properties ), nazwijmy ten katalog res i umieśćmy tam wszystkie pliki CSS, obrazy itp.: Aby skorzystać z tych plików musimy określić ich lokalizację w konfiguracji. Chodźmy do naszej klasy WebConfig. Poprzednio używaliśmy adnotacji, @EnableWebMvcaby niczego nie konfigurować, ale po prostu użyć konfiguracji domyślnej. Ale teraz trzeba coś skonfigurować. W tym celu korzystamy z interfejsu WebMvcConfigurer, który pozwala na nadpisanie metod konfiguracyjnych. To. możemy skorzystać z domyślnej konfiguracji, ale jednocześnie dostosować niektóre aspekty dla siebie. W tym przypadku addResourceHandlerspotrzebujemy metody, za pomocą której będziemy wskazywać lokalizację statycznych zasobów sieciowych. Na wszelki wypadek cała klasa wygląda tak:

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

Teraz, aby użyć naszego CSS na stronie, musisz zamieścić do niego link w tagu head:

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

Po prostu dodaj tę linię i utwórz na przykład ten prosty plik 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;
}

A to całkowicie zmieni naszą tabelę (oczywiście wygląda to głupio, ale na przykład jest tak): Cóż, myślę, że nie ma potrzeby szczegółowo rozmawiać o CSS, wszystko jest dość proste. W Internecie można znaleźć wiele gotowych opcji projektowania tabel i formularzy. Ale oczywiście lepiej jest samemu wykonać projekt, nie musisz być projektantem, w końcu nie jest to jakaś skomplikowana strona. Nawet kilka godzin po pierwszej znajomości wystarczy, aby stworzyć całkiem piękny i schludny projekt dla tak prostej strony. Poza tym Internet jest pełen wszelkiego rodzaju lekcji, przykładów, istnieją specjalne strony, na których można jednocześnie edytować HTML, CSS na jednym ekranie i od razu zobaczyć, jak to wszystko wygląda. Przy odrobinie praktyki możesz stworzyć prawdziwą sztukę. To prawda, że ​​\u200b\u200btu też nie powinieneś dać się ponieść emocjom (chyba że oczywiście planujesz zostać projektantem), w przeciwnym razie projektowanie to coś takiego, możesz tu utknąć na bardzo długo. Kiedy po raz pierwszy zacząłem rozumieć CSS, utknąłem. Chciałem spróbować wszystkiego, każdej właściwości, coś przekręcić, majstrować przy tym, eksperymentować, brać strony niektórych witryn i przerabiać je nie do poznania. Pewnie bawiłem się tą zabawką przez tydzień, nic innego nie robiąc, aż mnie puściła :) No cóż, w sumie oczywiście nie należy przesadzać i robić niezrozumiały kolorowy cud, trzeba to zrobić prosto i gustownie. Jedyna rzecz, na którą warto zwrócić uwagę. Musisz zrozumieć, że CSS to opis projektu , a HTML to znaczniki . Nie powinieneś próbować robić absolutnie wszystkiego za pomocą CSS; niektóre aspekty będą bardzo trudne, a niektóre po prostu niemożliwe, gdy w HTML zrobi się to za pomocą kilku dodatkowych linii lub nawet tylko jednego atrybutu w tagu. Trzeba je połączyć, zrobić różne kolory, tła, czcionki w CSS, a jeśli na przykład trzeba połączyć kilka komórek tabeli, łatwiej jest skorzystać z narzędzi HTML. Cóż, na przykład, oto co udało mi się zrobić ze stronami w ciągu kilku godzin majstrowania przy CSS i HTML (nie będę tu wdawał się w szczegóły dotyczące bałaganu, jaki narobiłem, aby to osiągnąć, na końcu będzie link do GitHuba tego projektu, gdzie możesz zajrzeć): Oczywiście nie wiem, na ile kompetentnie wszystko tam zrobiłem, ale biorąc pod uwagę, że pierwszy raz zobaczyłem CSS tydzień wcześniej, myślę, że wyszło całkiem nieźle.

Paginacja

Teraz wszystko działa, wygląda dobrze, ale na razie w tabeli jest tylko kilka rekordów. A co jeśli znajdzie się w nim sto filmów, albo tysiąc?Przewijanie tak długiej listy nie jest zbyt wygodne. Dużo wygodniej jest, gdy lista wyświetlana jest na przykład na stronach po 10 wpisów. Dlatego teraz spróbujemy zaimplementować podział listy na strony (czasami nazywa się to również „stronicowaniem” lub „paginacją” ( ang. paginacja )). Można to zrobić na różne sposoby. Możesz na przykład przenieść pełną listę na stronę jsp i utworzyć tam tabelę dla wymaganej liczby rekordów. Możesz też na przykład wyciągnąć wymagane rekordy z ogólnej listy w serwisie, a następnie wysłać tę minilistę na stronę jsp w celu wyświetlenia. Najlepiej jednak oczywiście zrobić to na poziomie bazy danych. Pomysł nie polega na pobraniu pełnej listy z bazy danych, a następnie podzieleniu jej na części, ale na początku pobraniu wymaganej części z bazy danych, bez dotykania wszystkiego innego. W końcu po co wyciągać z bazy wszystkie setki, tysiące rekordów na raz, skoro ten, którego potrzebujemy, jest w pierwszej dziesiątce, to lepiej wyciągnąć tylko tę jedną dziesiątkę. Przejdźmy do DAO i dodajmy do metody allFilmsparametr int page, który będzie odpowiadał za numer strony (w serwisie oczywiście robimy to samo). I zmieńmy trochę implementację tej metody; jeśli wcześniej wyciągnęliśmy całą listę, teraz wyciągniemy tylko część. Pomogą nam w tym metody setFirstResult(od którego wiersza tabeli zacząć) i setMaxResults(ile rekordów wyświetlić) :

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

Te. jeśli jest to 1 strona, wyświetlamy maksymalnie 10 rekordów, zaczynając od 0, jeśli jest to 5 strona, to 10 rekordów zaczynając od 40 (pamiętaj, że numeracja w bazie zaczyna się od 0). Stworzymy też dodatkowo metodę, która zwróci liczbę rekordów w tabeli. Będziemy tego potrzebować, aby poznać liczbę wszystkich stron i utworzyć dla nich linki na naszej stronie jsp:

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

Stosując takie zapytanie otrzymamy liczbę wszystkich rekordów w tabeli (jako intwartość) bez wyciągania samych rekordów. Przejdźmy teraz do kontrolera i popracujmy nad metodą zwracającą stronę główną z listą filmów:

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

Pojawiła się tu nowa adnotacja @RequestParam, która wskazuje, że tę wartość pobieramy z parametru żądania. Jeśli teraz przejdziemy pod adres z parametrem, np. http://localhost:8080/ ?page=4 , otrzymamy odpowiednio 4. stronę. Domyślną wartość ustawiamy na „ 1 ” tak, aby po uruchomieniu aplikacji, gdy przejdziemy pod adres bez parametru http://localhost:8080/ , otrzymamy pierwszą stronę. W metodzie otrzymujemy liczbę wszystkich rekordów, następnie w ten prosty sposób obliczamy liczbę stron. Te. jeśli mamy 10 rekordów to jest to 1 strona, a jeśli jest ich 11 to już jest 2. No to całość przenosimy na model. Trzeba znać liczbę stron, żeby utworzyć dla nich linki w cyklu, a liczba filmów niech będzie tam na wszelki wypadek, jeśli np. chcemy tę informację wyświetlić gdzieś na stronie. Teraz pozostaje tylko przejść do pliku filmy.jsp i dodać linki do każdej strony, korzystając z tej konstrukcji:

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

Tworzymy linki według licznika 1, 2, 3, ... i ustawiamy parametr według wartości indeksu. Dodajmy jeszcze jeden mały akcent. Wracamy do sterownika. W metodach dodaj, edytuj i usuń po zakończeniu operacji przekierowujemy na stronę główną „redirect:/” . To. jeśli jesteśmy gdzieś na 50-tej stronie i klikniemy edytuj wpis, to po wykonaniu przejdziemy pod adres „ / ”, czyli tzw. Wróćmy do strony 1. Nie jest to zbyt wygodne, chciałbym wrócić tam, skąd przyszliśmy. Rozwiążmy to bardzo prosto. FilmControllerUtwórzmy zmienną instancji w klasieint page

private int page;

Wewnątrz metody allFilmsprzypiszemy wartość parametru do tej zmiennej page:

this.page = page;

To. Przy każdym wykonaniu tej metody (tzn. podczas poruszania się po stronach) do zmiennej zostanie zapisana wartość bieżącej strony. Następnie używamy tej wartości w naszych metodach, aby przekierować z powrotem na tę samą stronę.

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

Wniosek

Prawdopodobnie na tym zakończymy. Rezultatem jest pełnoprawna aplikacja CRUD. Z pewnością jest daleki od ideału (bardzo daleko), ale można go zoptymalizować i ulepszyć, naprawić błędy i dodać funkcjonalność. Możesz używać wbudowanych metod do operacji crud; dodaj filtrowanie, wyszukiwanie, sortowanie; dodaj inne powiązane tabele; wdrożyć obsługę różnych użytkowników z autoryzacją i uwierzytelnianiem itp. i tak dalej. Możliwości wyobraźni są nieograniczone, więc działaj. Link do githuba tego projektu . Dziękuję za uwagę. PS To moja pierwsza w życiu próba napisania artykułu, więc nie oceniajcie ściśle :). Przepraszam, że nie dodaję innych linków do przydatnych zasobów, niestety nadal nie mogę wykształcić w sobie nawyku zapisywania linków do źródeł, z których czerpię informacje. I oczywiście przepraszam za ilość listów, zwięzłość nie jest moim talentem, mam nadzieję, że ktoś sobie z tym poradzi. Linki do wszystkich części

• Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 1)
• Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 2)
• Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 3)
• Wprowadzenie do Mavena, Springa, MySQL, Hibernate i pierwszej aplikacji CRUD (część 4)