Niniejszy materiał jest końcową częścią serii „Wprowadzenie do rozwoju przedsiębiorstwa”. Poprzednie artykuły:
Spójrzmy na najprostszą implementację MVC na przykładzie Spring MVC. W tym celu napiszemy małą aplikację Hello World przy użyciu Spring Boot. Dam ci instrukcje krok po kroku, abyś mógł sam wszystko powtórzyć. Najpierw napiszemy małą aplikację, a następnie ją przeanalizujemy.
Krok 1. Tworzenie aplikacji Spring Boot w IntelliJ IDEA.
Użyj opcji Plik -> Nowy -> Projekt…, aby utworzyć nowy projekt. W oknie, które zostanie otwarte, w menu po lewej stronie wybierz Spring Initializr, a następnie Project SDK. Pozostaw wartość domyślną dla opcji adresu URL usługi Initializr.
Kliknij przycisk „Dalej”. W kolejnym oknie musimy wybrać ustawienia projektu. Będziemy mieć projekt Maven. Wybierz projekt Maven jako typ. Wypełnij pola Grupa i Artefakt Kliknij Dalej.
W kolejnym oknie musimy wybrać komponenty Spring Framework, których będziemy używać. Wystarczą nam dwa:
- Spring Web to komponent, który pozwala nam tworzyć aplikacje webowe. Ten komponent zawiera Spring MVC.
- Thymeleaf to nasz silnik szablonów. To coś, co pozwala nam przesyłać dane z Javy do stron HTML
W kolejnym oknie wybierz nazwę projektu i lokalizację w systemie plików:
Kliknij przycisk „Zakończ”. Projekt jest tworzony. Otrzymujemy następującą strukturę projektu:
Tutaj interesują nas 2 pliki: pom.xml (deskryptor wdrożenia). Ta rzecz pozwala szybko i łatwo importować biblioteki z różnych frameworków do naszego projektu. Tutaj również konfigurujemy sposób budowania naszej aplikacji. Nasza aplikacja jest zbudowana przy użyciu Mavena, a pom.xml jest plikiem konfiguracyjnym dla tego systemu kompilacji. Klasa Java to MvcDemoApplication. To jest główna klasa naszej aplikacji. Uruchomimy z niego nasz projekt Spring Boot. Aby rozpocząć, po prostu uruchom główną metodę tej klasy. Oto kod tej klasy oraz plik pom.xml: MvcDemoApplication:
@SpringBootApplication
public class MvcDemoApplication {
public static void main(String[] args) {
SpringApplication.run(MvcDemoApplication.class, args);
}
}
pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.codegym/groupId>
<artifactId>mvc_demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>mvc_demo</name>
<description>Spring MVC Demo</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Krok 2. Tworzenie strony internetowej
Nasza aplikacja będzie niezwykle prosta. Będziemy mieli stronę główną (index.html), która będzie zawierała link do strony powitalnej (greeting.html). Na stronie powitania wyświetlamy powitanie. Użyjemy parametrów adresu URL, aby przekazać nazwę, która ma zostać użyta w powitaniu, do strony pozdrowienia.html. Stwórzmy stronę główną naszej aplikacji — index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main page</title>
</head>
<body>
<p>Get your greeting <a href="/greeting">here</a></p>
</body>
</html>
Teraz utworzymy stronę z pozdrowieniami.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>
Nasza strona zawiera
<p th:text="'Hello, ' + ${name} + '!'" />
tag, który nie jest normalny dla HTML. Atrybut
th
znacznika
p
jest mechanizmem używanym przez silnik szablonów Thymeleaf. Wartością tagu
p
będzie „Hello” + wartość zmiennej
name
, którą ustawimy w kodzie Javy.
Krok 3. Tworzenie kontrolera
Wewnątrz pakietu mvc_demo utworzymy pakiet contoller, w którym utworzymy nasz kontroler, HelloWorldController:
@Controller
public class HelloWorldController {
@RequestMapping(value = "/greeting")
public String helloWorldController(@RequestParam(name = "name", required = false, defaultValue = "World") String name, Model model) {
model.addAttribute("name", name);
return "greeting";
}
}
Z jednej strony jest bardzo mało kodu, ale z drugiej dużo się dzieje. Rozpocznijmy naszą analizę. Adnotacja @Controller wskazuje, że ta klasa jest kontrolerem. Wiosną kontrolery przetwarzają żądania HTTP kierowane do określonych adresów URL. Nasza klasa posiada metodę helloWorldController oznaczoną adnotacją @RequestMapping(value = "/greeting"). Ta adnotacja wskazuje, że ta metoda przetwarza żądania HTTP GET kierowane na adres URL /greeting. Innymi słowy, ta metoda zostanie wywołana, jeśli ktoś przejdzie do /greeting. Ta metoda zwraca String. Według Spring MVC metoda kontrolera powinna zwracać nazwę widoku. Następnie Spring poszuka pliku HTML o tej samej nazwie, który zwróci jako odpowiedź na żądanie HTTP. Jak widzisz, Nasza metoda przyjmuje 2 argumenty. Przyjrzyjmy się im: Parametr 1: @RequestParam(name = "name", wymagane = false, defaultValue = "World") Nazwa ciągu znaków. Adnotacja @RequestParam wskazuje, że parametr nazwy ciągu jest parametrem adresu URL. Jeśli adnotacja wskazuje, że ten parametr adresu URL jest opcjonalny (wymagany = fałsz), to jeśli go nie ma, wartością parametru nazwy ciągu będzie „Świat” (wartość domyślna = „Świat”). Jeśli jest obecny, wówczas parametrem adresu URL będzie „nazwa” (nazwa = „nazwa”). Być może wielu rzeczy tutaj nie rozumiesz. Podajmy kilka przykładów. Poniższa tabela pokazuje, jaka będzie wartość parametru Nazwa ciągu, z różnymi opcjami dostępu do /greeting (z parametrami adresu URL i bez nich)
Przykładowy adres URL |
Wartość nazwy ciągu |
/Powitanie |
Świat |
/greeting?name=Amigo |
przyjacielu |
/greeting?name=Zor |
Zor |
Parametr 2: Drugi parametr to model modelu. Ten parametr jest jakimś modelem. Model ten składa się z różnych atrybutów wewnętrznych. Każdy atrybut ma nazwę i wartość. Coś w rodzaju par klucz-wartość. Możemy użyć tego parametru do przesyłania danych z kodu Java do stron HTML. Lub, używając terminologii MVC, wyślij dane z modelu do widoku. Pozostaje tylko zbadać ostatnią linię. W ten sposób przesyłamy dane z Javy do HTML lub z modelu do widoku. Metoda zawiera następującą linię:
model.addAttribute("name", name);
Tutaj tworzymy nowy atrybut o nazwie name i przypisujemy mu wartość parametru name. Pamiętaj, niedawno omawialiśmy
<p th:text = "'Hello,' + ${name} + '!'" />
Powiedzieliśmy, że wartość znacznika p to „Hello” + wartość zmiennej name, którą ustawimy w kodzie Java. Ustawiamy tę wartość za pomocą linii
model.addAttribute("name", name);
Krok 5. Uruchom
Aby rozpocząć, musimy uruchomić główną metodę klasy MvcDemoApplication:
W logach zobaczymy, że nasza aplikacja internetowa została uruchomiona na porcie 8080:
A to oznacza, że w przeglądarce możemy przejść do strony pod adresem
http:// localhost:8080 :
Tutaj mamy stronę index.html. Podążajmy za linkiem do strony powitalnej:
Nasz kontroler został wywołany w tym przejściu. Nie przekazaliśmy żadnych parametrów przez adres URL. W rezultacie atrybut name przyjmuje wartość domyślną („World”) wskazaną w adnotacji. Spróbujmy przekazać parametr przez adres URL:
Wszystko działa zgodnie z przeznaczeniem. Teraz spróbuj prześledzić ścieżkę zmiennej name:
- Użytkownik podał „nazwa=Amigo” w adresie URL ->
- Kontroler przetworzył naszą akcję, otrzymał zmienną name i ustawił atrybut modelu o nazwie name równy otrzymanej wartości ->
- Te dane zostały wyświetlone z modelu i trafiły na stronę z pozdrowieniami.html i zostały wyświetlone użytkownikowi
To wszystko na teraz!
Dziś zapoznaliśmy się z dość obszernym i ciekawym tematem MVC (Model - View - Controller). To już koniec serii, której celem jest zapoznanie Cię z tym, co musisz wiedzieć przed rozpoczęciem tworzenia przedsiębiorstwa.
W komentarzach napisz, jakie tematy Cię interesują — zajmiemy się nimi! |
GO TO FULL VERSION