В этой серии постов в блоге мы будем создавать полное адаптивное веб-приложение, используя следующий технический стек:
1) Пружинная загрузка
— Spring MVC web
— Spring Data JPA
— Spring Security
2) Thymeleaf для серверных шаблонов
3) Angular JS для MVC на стороне клиента (включая управление зависимостями JS с помощью bower)
4) Разверните приложение на AWS / EBS / Heroku / Openshift
Мы будем использовать старый добрый Maven, чтобы начать.
ШАГ 1. Простой интерфейс Hello world с Thymeleaf
1.) Для начала давайте создадим рабочее пространство в нашей локальной файловой системе для запуска проекта.
|
1
|
Anirudhs-MacBook-Pro:~ anirudh$ mkdir practice && cd practice |
2.) Откройте вашу любимую IDE (eclipse / IDEA) и начните новый проект, используя maven (вы также можете использовать быстрый старт архетипа maven). Укажите идентификатор группы и идентификатор артикула на ваш выбор.
Я использовал следующее:
|
1
2
|
group id : com.practice artifact id : ecomm |
3.) После создания проекта откройте Pom.xml и вставьте следующее
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" <modelVersion>4.0.0</modelVersion> <groupId>com.practice</groupId> <artifactId>ecomm</artifactId> <version>1.0-SNAPSHOT</version> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.3.3.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> <properties> <java.version>1.8</java.version> </properties></project> |
4.) Теперь добавьте Application.class для SpringBoot в ваш пакет (на com.practice)
|
01
02
03
04
05
06
07
08
09
10
11
|
import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); }} |
5) Добавить контроллер
Создайте новый пакет внутри com.practice с именем controller и добавьте HomeController.Java
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
package com.practice.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class HomeController { @RequestMapping("/home") public String home(){ return "index"; }} |
Обратите внимание, что аннотация не «@RestController», это просто «@Controller», который является контроллером Spring MVC, который возвращает представление.
6) Наконец, мы сделаем просмотр HTML-файла. Thymeleaf — это библиотека шаблонов, которая используется для генерации этого.
Поместите этот index.html в index.html : src / main / resources / templates (соглашение о загрузке Spring)
|
01
02
03
04
05
06
07
08
09
10
|
<!DOCTYPE HTML><head> <title>First Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body>Hi, this is my first landing page using server side templating by Thymeleaf</body></html> |
7.) Запустите приложение
Перейдите в консоль и перейдите в домашний каталог, где у вас есть файл pom.xml и запустите mvn clean package
|
1
|
Anirudhs-MacBook-Pro:practice anirudh$ mvn clean package |
После того, как проект собран, запустите, используя spring-boot: run
|
1
|
Anirudhs-MacBook-Pro:practice anirudh$ mvn spring-boot:run |
Теперь перейдите по адресу http: // localhost: 8080 / home и найдите свою целевую страницу.
В следующем блоге мы добавим больше функциональности, откроем службы REST и добавим Angular JS в наше приложение.
| Ссылка: | Создайте новое веб-приложение с нуля, используя Spring boot, Thymeleaf, AngularJS — часть 1 от нашего партнера JCG Анируд Бхатнагар в блоге anirudh bhatnagar . |