Этот материал — завершающая часть цикла “Введение в Enterprise-разработку”. Предыдущие статьи:
![Часть 8. Пишем небольшое приложение на spring-boot - 1]()
Давай разберем простейший пример реализации MVC на примере Spring-MVC. Для этого напишем небольшое Hello World приложение на spring-boot.
Для того, чтобы ты мог повторить все сам, я дам тебе пошаговую инструкцию. Сначала мы напишем небольшое приложение, а после разберем его.
Шаг 1. Создание spring-boot приложения в IntelliJ IDEA
С помощью File -> New -> Project… создаем новый проект.
В открывшемся окне, в левом боковом меню, выбираем Spring Initializr, выбираем Project SDK, опцию Initializr Service URL оставляем дефолтной.
![Часть 8. Пишем небольшое приложение на spring-boot - 2]()
Нажимаем кнопку Next.
В следующем окне нам нужно выбрать параметры проекта. У нас будет Maven проект. Выбираем Type - Maven Project, заполняем Group и Artifact
![Часть 8. Пишем небольшое приложение на spring-boot - 3]()
Нажимаем кнопку Next.
В следующем окне необходимо выбрать компоненты Spring Framework, который мы будем использовать. Нам достаточно двух:
- Spring Web - компонента, которая позволит нам создавать Web приложения. Данная компонента включает в себя Spring MVC.
- Thymeleaf - Так называемый движок шаблонов. Штука, которая позволит нам передавать данные из Java в HTML страницы
![Часть 8. Пишем небольшое приложение на spring-boot - 4]()
![Часть 8. Пишем небольшое приложение на spring-boot - 5]()
В следующем окне выбираем имя и расположение проекта в файловой системе:
![Часть 8. Пишем небольшое приложение на spring-boot - 6]()
Нажимаем кнопку Finish.
Проект создан. У нас получилась следующая структура проекта:
![Часть 8. Пишем небольшое приложение на spring-boot - 7]()
Здесь нам интересны 2 файла:
pom.xml - дескриптор развертывания. Штука, которая позволяет быстро и просто импортировать библиотеки из разных фреймвроков в наш проект, а также штука, в которой мы конфигурируем сборку нашего приложения. Приложение наше собирается с помощью Maven, pom.xml - конфигурационный файл этой системы сборки.
Java класс - MvcDemoApplication. Это главный класс нашего приложения, с которого мы будем запускать наш spring-boot проект. Для запуска достаточно запустить метод main в данном классе.
Приведем код данного класса, а также файла 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.javarush</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>
Шаг 2. Создание веб страниц
Наше приложение будет предельно простым. У нас будет главная страница - index.html, внутри которого будет располагаться ссылка на страницу приветствия - greeting.html. На странице greeting мы отобразим приветствие. Реализуем возможность передачи имени для приветствия на страницу greeting.html через параметры url.
Создадим главную страницу нашего приложения - 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>
Теперь создадим страницу greeting.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>
Здесь из нетипичного для html страницы можно увидеть тег:
<p th:text="'Hello, ' + ${name} + '!'" />
Атрибут
th
у тега
p
- это инструмент движка шаблонов Thymeleaf. Благодаря нему значением тега
p
будет текст “Hello, “ + значение переменной
name
, которое мы зададим из Java кода.
Шаг 3. Создание контроллера
Внутри пакте mvc_demo создадим пакет contoller, внутри которого создадим наш контроллер, 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";
}
}
С одной стороны здесь совсем немного кода, но с другой стороны много всего происходит. Начнем разбор.
Аннотация @Controller - говорит о том, что данный класс является контроллером. Контроллеры в Spring обрабатывают HTTP запросы на определенный адреса.
В нашем классе есть метод helloWorldController, который помечен аннотацией - @RequestMapping(value = "/greeting"). Данная аннотация говорит нам о том, что данный метод обрабатывает HTTP GET запросы на адрес /greeting. Иными словами, данный метод сработает, если кто-то перейдет по адресу /greeting.
Данный метод возвращает String. Согласно Spring-MVC, метод контроллера должен вернуть имя представления. Далее Spring будет искать html файл, с таким именем, который и вернет в качестве ответа на HTTP запрос. Как ты видишь, наш метод возвращает имя веб страницы, которую мы создали ранее - greeting.
Наш метод принимает 2 аргумента. Разберем их:
Параметр 1:
@RequestParam(name = "name", required = false, defaultValue = "World") String name. Аннотация @RequestParam говорит о том, что параметр String name - является параметром url. В скобках аннотации указано, что данный параметр в url является не обязательным (required = false), в случае его отсутствия, значением параметра String name будет World (defaultValue = "World"), а если он будет присутствовать, то данный параметр в url будет именоваться name (name = "name")
Тут может быть многое непонятно. Приведем примеры. В таблице ниже указано, каким будет значение параметра String name, при различных вариантах обращения на адрес /greeting (с параметрами в URL и без)
Пример URL |
Значение параметра String name |
/greeting |
World |
/greeting?name=Amigo |
Amigo |
/greeting?name=Zor |
Zor |
Параметр 2:
Вторым параметром является Model model. Данный параметр является некоторой моделью. Данная модель состоит внутри из различных атрибутов. Каждый атрибут имеет имя и значение. Что-то вроде пар ключ-значение. С помощью данного параметра мы можем передавать данные из Java кода в html страницы. Или же, говоря терминологией MVC, передавать данные из Модели (Model) в Представление (View).
Осталось разобрать последнюю строчку. То, как мы передаем данные из Java в html или же из Model во View. В теле метода есть следующая строка:
model.addAttribute("name", name);
Здесь мы создаем новый атрибут с именем name и присваиваем ему значение параметра name. Вспомни, совсем недавно мы обсуждали тег:
<p th:text="'Hello, ' + ${name} + '!'" />
Мы говорили, что значением тега p будет текст “Hello, “ + значение переменной name, которое мы зададим из Java кода.
Это значение мы и задали с помощью строчки
model.addAttribute("name", name);
Шаг 5. Запуск
Для запуска, нам нужно запустить метод main в классе MvcDemoApplication:
![Часть 8. Пишем небольшое приложение на spring-boot - 9]()
В логах запуска, мы увидем, что наше web приложение стартовало на порту 8080:
![Часть 8. Пишем небольшое приложение на spring-boot - 10]()
А это значит, что мы можем идти в браузер на страницу:
http://localhost:8080:
![Часть 8. Пишем небольшое приложение на spring-boot - 11]()
Здесь нам отобразилась страница index.html. Перейдем по ссылке на greetin:
![Часть 8. Пишем небольшое приложение на spring-boot - 12]()
При этом переходе сработал наш контроллер. Мы не передавали через URL никаких параметров, поэтому, как было указано в аннотации, значение атрибута name приняло дефолтное значение World.
Попробуем теперь передать параметр через url:
![Часть 8. Пишем небольшое приложение на spring-boot - 13]()
Все работает так, как и задумано. Теперь попробуй проследить путь переменной name:
- Пользователь передал через url значение параметра name = Amigo ->
- Контроллер обработал наше действие, принял переменную name и задал атрибут модели, с именем name и принятым значением ->
- Из модели эти данные попали во View, на страницу greeting.html и отобразились пользователю
Вот и все!
Сегодня мы познакомились с тобой с довольно большой и интересной темой MVC (Model - View - Controller). Это окончание цикла, цель которого — познакомить тебя с тем, что нужно знать перед началом Enterprise-разработки.
Оставляйте в комментариях интересующие вас темы — сделаем!
|
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
,мы увидем... ...компонента, которая позволит нам создавать Web приложения. Данная компонента включает в себя... (это математичекский термин, правильно будет "данный компонент") ...Перейдем по ссылке на greetin:... ...Внутри пакте mvc_demo создадим пакет contoller...немуему значением тега p будет текст “Hello, “ + значение переменной name, которое мы зададим из Java кода. 2. Внутри пактеа mvc_demo создадим пакет contoller 3. Контроллеры в Spring обрабатывают HTTP запросы на определенныйе адреса. 4. Создание html страниц в проекте, как-то не очень очевидно описано. Я положил index.html в template, и туда же рядом положил greeting.html. В результата на 127.0.0.1:8080 попадаю, а вот переход по ссылке "here" попадает на 404 ошибку и не могу понять почему greeting.html не видно. Ну вот тут и застрял пока. Но вообще - очень интересно, прям уиииии.