S02L02 - O Modelo e os Arquivos Externos

html

Integrando Modelos com Spring Boot: Um Guia Abrangente
Índice

Introdução ................................................................. 1
Compreendendo a Estrutura do Projeto ............ 2
Adicionando Modelos e Recursos Estáticos ........ 4
Configurando o Controller do Spring Boot ............. 6
Executando e Testando a Aplicação .......... 8
Introdução ao Motor de Modelagem Thymeleaf ... 10
Conclusão ................................................................. 12


Introdução
No âmbito do desenvolvimento web, integrar modelos com frameworks de backend é fundamental para criar aplicações dinâmicas e responsivas. Spring Boot, renomado por sua simplicidade e recursos poderosos, oferece uma abordagem simplificada para construir aplicações web baseadas em Java. Este guia explora o processo de integração de modelos com uma aplicação Spring Boot, enfatizando as melhores práticas, estruturas de pastas e a utilização do motor de modelagem Thymeleaf.
Pontos Principais:

Compreender a estrutura do projeto Spring Boot.
Integrar modelos HTML e recursos estáticos.
Configurar controllers para servir os modelos.
Utilizar Thymeleaf para capacidades aprimoradas de modelagem.

Prós:

Simplifica o desenvolvimento de aplicações web.
Oferece configuração rápida com configurações mínimas.
Aprimora a manutenção através de estruturas organizadas.

Contras:

Curva de aprendizado mais acentuada para iniciantes não familiarizados com Spring Boot.
Flexibilidade limitada sem a devida compreensão dos conceitos subjacentes.





		
		
			
			
Java
			
			<table border=1 style='width:100%; text-align:center;'>
    <tr>
        <th>Característica</th>
        <th>Spring Framework</th>
        <th>Spring Boot</th>
    </tr>
    <tr>
        <td>Configuração</td>
        <td>Extensiva</td>
        <td>Mínima</td>
    </tr>
    <tr>
        <td>Tempo de Configuração</td>
        <td>Maior</td>
        <td>Menor</td>
    </tr>
    <tr>
        <td>Defaults Opinativos</td>
        <td>Não</td>
        <td>Sim</td>
    </tr>
    <tr>
        <td>Flexibilidade</td>
        <td>Alta</td>
        <td>Moderada</td>
    </tr>
</table>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						<table border=1 style='width:100%; text-align:center;'>
    <tr>
        <th>Característica</th>
        <th>Spring Framework</th>
        <th>Spring Boot</th>
    </tr>
    <tr>
        <td>Configuração</td>
        <td>Extensiva</td>
        <td>Mínima</td>
    </tr>
    <tr>
        <td>Tempo de Configuração</td>
        <td>Maior</td>
        <td>Menor</td>
    </tr>
    <tr>
        <td>Defaults Opinativos</td>
        <td>Não</td>
        <td>Sim</td>
    </tr>
    <tr>
        <td>Flexibilidade</td>
        <td>Alta</td>
        <td>Moderada</td>
    </tr>
</table>
					
				
			
		


Quando Usar:

Spring Boot é ideal para desenvolvedores que buscam criar aplicações Spring baseadas em produção e independentes com esforço mínimo. É particularmente útil para arquitetura de microserviços e ciclos de desenvolvimento rápidos.

Compreendendo a Estrutura do Projeto
Uma estrutura de projeto bem organizada é fundamental para manter e escalar aplicações. Abaixo está uma divisão da hierarquia típica de pastas em um projeto Spring Boot integrado com modelos.
Visão Geral da Hierarquia do Projeto




		
		
			
			
Java
			
			SpringStarter
│
├── src
│   ├── main
│   │   ├── java
│   │   │   └── org.studyeasy.SpringStarter
│   │   │       ├── SpringStarterApplication.java
│   │   │       └── Controller
│   │   │           └── HomeController.java
│   │   └── resources
│   │       ├── static
│   │       │   ├── css
│   │       │   ├── fonts
│   │       │   ├── images
│   │       │   └── js
│   │       └── templates
│   │           ├── about.html
│   │           ├── book.html
│   │           └── home.html
│   └── test
│       └── java
│           └── org.studyeasy.SpringStarter
│               └── SpringStarterApplicationTests.java
├── pom.xml
└── mvnw
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						SpringStarter
│
├── src
│   ├── main
│   │   ├── java
│   │   │   └── org.studyeasy.SpringStarter
│   │   │       ├── SpringStarterApplication.java
│   │   │       └── Controller
│   │   │           └── HomeController.java
│   │   └── resources
│   │       ├── static
│   │       │   ├── css
│   │       │   ├── fonts
│   │       │   ├── images
│   │       │   └── js
│   │       └── templates
│   │           ├── about.html
│   │           ├── book.html
│   │           └── home.html
│   └── test
│       └── java
│           └── org.studyeasy.SpringStarter
│               └── SpringStarterApplicationTests.java
├── pom.xml
└── mvnw
					
				
			
		


Componentes Principais:

src/main/java: Contém o código-fonte Java.
src/main/resources/static: Abriga recursos estáticos como CSS, JS, fontes e imagens.
src/main/resources/templates: Armazena arquivos de modelos HTML renderizados pela aplicação.
pom.xml: Arquivo de configuração do Maven que gerencia as dependências do projeto.


Adicionando Modelos e Recursos Estáticos
Integrar modelos e recursos estáticos é crucial para o aspecto frontend da sua aplicação. Esta seção descreve os passos para adicionar e organizar esses recursos de forma eficaz.
Passo 1: Organizando Recursos Estáticos
Spring Boot serve automaticamente conteúdo estático de diretórios específicos. Certifique-se de que seus arquivos estáticos estejam colocados em src/main/resources/static.
Estrutura de Pastas:




		
		
			
			
Java
			
			static
├── css
│   ├── bootstrap.css
│   ├── font-awesome.min.css
│   ├── responsive.css
│   ├── style.css
│   └── style.scss
├── fonts
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── images
│   ├── about-img.png
│   ├── client1.jpg
│   ├── hero-bg.jpg
│   └── favicon.png
└── js
    ├── bootstrap.js
    ├── custom.js
    └── jquery-3.4.1.min.js
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						static
├── css
│   ├── bootstrap.css
│   ├── font-awesome.min.css
│   ├── responsive.css
│   ├── style.css
│   └── style.scss
├── fonts
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── images
│   ├── about-img.png
│   ├── client1.jpg
│   ├── hero-bg.jpg
│   └── favicon.png
└── js
    ├── bootstrap.js
    ├── custom.js
    └── jquery-3.4.1.min.js
					
				
			
		


Passo 2: Adicionando Modelos HTML
Coloque seus arquivos HTML no diretório src/main/resources/templates.
Arquivos HTML:

home.html: A página inicial.
about.html: Informações sobre a aplicação ou empresa.
book.html: Um formulário para entradas ou submissões de usuários.

Passo 3: Modelo de Exemplo (home.html)




		
		
			
			
Java
			
			&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Página Inicial&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/bootstrap.css}&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/style.css}&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;Bem-vindo à Nossa Aplicação Spring Boot!&lt;/h1&gt;
        &lt;p&gt;Esta é a página inicial.&lt;/p&gt;
        &lt;a th:href=&quot;@{/about}&quot; class=&quot;btn btn-primary&quot;&gt;Sobre Nós&lt;/a&gt;
    &lt;/div&gt;
    &lt;script th:src=&quot;@{/js/jquery-3.4.1.min.js}&quot;&gt;&lt;/script&gt;
    &lt;script th:src=&quot;@{/js/bootstrap.js}&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Página Inicial&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/bootstrap.css}&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/style.css}&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;Bem-vindo à Nossa Aplicação Spring Boot!&lt;/h1&gt;
        &lt;p&gt;Esta é a página inicial.&lt;/p&gt;
        &lt;a th:href=&quot;@{/about}&quot; class=&quot;btn btn-primary&quot;&gt;Sobre Nós&lt;/a&gt;
    &lt;/div&gt;
    &lt;script th:src=&quot;@{/js/jquery-3.4.1.min.js}&quot;&gt;&lt;/script&gt;
    &lt;script th:src=&quot;@{/js/bootstrap.js}&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
 
					
				
			
		


Explicação:

XML Namespaces: O atributo xmlns:th habilita o processamento do Thymeleaf.
Linkagem de Recursos: Os atributos th:href e th:src garantem a ligação adequada aos recursos estáticos.


Configurando o Controller do Spring Boot
Controllers no Spring Boot lidam com requisições HTTP entrantes e retornam respostas apropriadas, tipicamente renderizando modelos HTML.
Passo 1: Criando HomeController.java




		
		
			
			
Java
			
			package org.studyeasy.SpringStarter.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home"; // Renderiza home.html
    }

    @GetMapping("/about")
    public String about() {
        return "about"; // Renderiza about.html
    }

    @GetMapping("/book")
    public String book() {
        return "book"; // Renderiza book.html
    }
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						package org.studyeasy.SpringStarter.Controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class HomeController {
 
    @GetMapping("/")
    public String home() {
        return "home"; // Renderiza home.html
    }
 
    @GetMapping("/about")
    public String about() {
        return "about"; // Renderiza about.html
    }
 
    @GetMapping("/book")
    public String book() {
        return "book"; // Renderiza book.html
    }
}
 
					
				
			
		


Explicação:

@Controller Annotation: Indica que esta classe serve como um controller web.
@GetMapping: Mapeia requisições HTTP GET para métodos manipuladores específicos.
Valores de Retorno: A string retornada corresponde ao nome do modelo HTML sem a extensão .html.

Passo 2: Configurando SpringStarterApplication.java




		
		
			
			
Java
			
			package org.studyeasy.SpringStarter;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringStarterApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringStarterApplication.class, args);
    }
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						package org.studyeasy.SpringStarter;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
@SpringBootApplication
public class SpringStarterApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(SpringStarterApplication.class, args);
    }
}
 
					
				
			
		


Explicação:

@SpringBootApplication: Combina três anotações:

@EnableAutoConfiguration
@ComponentScan
@Configuration


Método main: Inicializa a aplicação.

Passo 3: Dependências do Maven (pom.xml)
Certifique-se de que a dependência do Thymeleaf está incluída no seu pom.xml para habilitar a renderização de modelos.




		
		
			
			
Java
			
			&lt;dependencies&gt;
    &lt;!-- Spring Boot Starter Web --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Motor de Modelagem Thymeleaf --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Outras dependências --&gt;
    &lt;!-- ... --&gt;
&lt;/dependencies&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
				
						&lt;dependencies&gt;
    &lt;!-- Spring Boot Starter Web --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Motor de Modelagem Thymeleaf --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Outras dependências --&gt;
    &lt;!-- ... --&gt;
&lt;/dependencies&gt;
 
					
				
			
		


Explicação:

spring-boot-starter-web: Facilita a construção de aplicações web.
spring-boot-starter-thymeleaf: Integra o Thymeleaf como o motor de modelagem.


Executando e Testando a Aplicação
Com a estrutura do projeto e os controllers configurados, é hora de executar e testar a aplicação.
Passo 1: Iniciando a Aplicação
Navegue até o diretório raiz do projeto e execute o seguinte comando no terminal:




		
		
			
			
Java
			
			./mvnw spring-boot:run
			
				
					
				
					1
				
						./mvnw spring-boot:run
					
				
			
		


Explicação:

./mvnw: Script do Maven Wrapper para sistemas baseados em Unix.
spring-boot:run: Meta do Maven para executar a aplicação Spring Boot.

Passo 2: Acessando a Aplicação
Uma vez que a aplicação inicia, abra seu navegador web e navegue para:

Página Inicial: http://localhost:8080/
Página Sobre: http://localhost:8080/about
Página de Reserva: http://localhost:8080/book

Passo 3: Verificando o Resultado
Ao acessar essas URLs, você deve ver as respectivas páginas HTML renderizadas corretamente com recursos estáticos vinculados, como arquivos CSS e JS.
Exemplo de Resultado:




		
		
			
			
Java
			
			&lt;img src="static/images/home-screenshot.png" alt="Captura de Tela da Página Inicial"&gt;
			
				
					
				
					1
				
						&lt;img src="static/images/home-screenshot.png" alt="Captura de Tela da Página Inicial"&gt;
					
				
			
		


Nota: Substitua pelas capturas de tela reais das páginas renderizadas.
Visualizando o Código-Fonte:

Inspecionar o código-fonte da página (Ctrl + U ou Cmd + U) revela que todos os links para arquivos CSS e JS estão resolvidos corretamente, garantindo o estilo e a funcionalidade apropriados.

Introdução ao Motor de Modelagem Thymeleaf
Thymeleaf é um moderno motor de modelo Java para ambientes web e standalone. Ele oferece uma abordagem de modelagem natural, permitindo que desenvolvedores criem modelos que podem ser abertos diretamente em navegadores sem modificação.
Principais Características do Thymeleaf:

Modelo Natural: Modelos podem ser renderizados como protótipos estáticos sem a necessidade de um servidor em execução.
Integração com Spring MVC: Funciona perfeitamente com controllers do Spring Boot.
Suporte Rico a Atributos: Oferece uma variedade de atributos para renderização dinâmica de conteúdo.

Aprimorando Modelos com Thymeleaf
Renderização de Conteúdo Dinâmico:




		
		
			
			
Java
			
			&lt;h1 th:text="${title}"&gt;Título Padrão&lt;/h1&gt;
&lt;p th:text="${description}"&gt;Descrição Padrão&lt;/p&gt;

			
				
					
				
					1
2
3
				
						&lt;h1 th:text="${title}"&gt;Título Padrão&lt;/h1&gt;
&lt;p th:text="${description}"&gt;Descrição Padrão&lt;/p&gt;
 
					
				
			
		


Explicação:

th:text: Substitui o conteúdo pelo valor da variável especificada.
${title}: Expressão para buscar o atributo title do modelo.

Passando Dados do Controller para o Modelo
Modificação do Controller:




		
		
			
			
Java
			
			@GetMapping("/book")
public String book(Model model) {
    model.addAttribute("title", "Página de Reserva");
    model.addAttribute("description", "Esta é a página de reserva.");
    return "book";
}

			
				
					
				
					1
2
3
4
5
6
7
				
						@GetMapping("/book")
public String book(Model model) {
    model.addAttribute("title", "Página de Reserva");
    model.addAttribute("description", "Esta é a página de reserva.");
    return "book";
}
 
					
				
			
		


Explicação:

Model: Uma interface que define um holder para atributos do modelo.
addAttribute: Adiciona atributos ao modelo para serem acessados no modelo.

Modelo Atualizado (book.html):




		
		
			
			
Java
			
			&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title th:text="${title}"&gt;Página de Reserva&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1 th:text="${title}"&gt;Página de Reserva&lt;/h1&gt;
        &lt;p th:text="${description}"&gt;Esta é a página de reserva.&lt;/p&gt;
        &lt;form&gt;
            &lt;!-- Campos do Formulário --&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
				
						&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title th:text="${title}"&gt;Página de Reserva&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1 th:text="${title}"&gt;Página de Reserva&lt;/h1&gt;
        &lt;p th:text="${description}"&gt;Esta é a página de reserva.&lt;/p&gt;
        &lt;form&gt;
            &lt;!-- Campos do Formulário --&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
 
					
				
			
		


Renderização Condicional e Iteração
Renderização Condicional:




		
		
			
			
Java
			
			&lt;div th:if="${user != null}"&gt;
    &lt;p&gt;Bem-vindo, &lt;span th:text="${user.name}"&gt;Usuário&lt;/span&gt;!&lt;/p&gt;
&lt;/div&gt;
&lt;div th:unless="${user != null}"&gt;
    &lt;p&gt;Por favor, faça login.&lt;/p&gt;
&lt;/div&gt;

			
				
					
				
					1
2
3
4
5
6
7
				
						&lt;div th:if="${user != null}"&gt;
    &lt;p&gt;Bem-vindo, &lt;span th:text="${user.name}"&gt;Usuário&lt;/span&gt;!&lt;/p&gt;
&lt;/div&gt;
&lt;div th:unless="${user != null}"&gt;
    &lt;p&gt;Por favor, faça login.&lt;/p&gt;
&lt;/div&gt;
 
					
				
			
		


Iteração sobre Coleções:




		
		
			
			
Java
			
			&lt;ul&gt;
    &lt;li th:each="book : ${books}" th:text="${book.title}"&gt;Título do Livro&lt;/li&gt;
&lt;/ul&gt;

			
				
					
				
					1
2
3
4
				
						&lt;ul&gt;
    &lt;li th:each="book : ${books}" th:text="${book.title}"&gt;Título do Livro&lt;/li&gt;
&lt;/ul&gt;
 
					
				
			
		


Explicação:

th:if / th:unless: Renderiza conteúdo condicionalmente com base na expressão.
th:each: Itera sobre uma coleção, permitindo a renderização repetitiva de elementos.


Conclusão
Integrar modelos com Spring Boot aprimora o desenvolvimento de aplicações web dinâmicas e amigáveis ao usuário. Ao compreender a estrutura do projeto, gerenciar efetivamente os recursos estáticos, configurar controllers e utilizar o motor de modelagem Thymeleaf, desenvolvedores podem construir aplicações robustas e manuteníveis com facilidade.
Principais Aprendizados:

A organização adequada do projeto é essencial para escalabilidade.
As convenções do Spring Boot reduzem a sobrecarga de configuração.
Thymeleaf oferece uma maneira poderosa e intuitiva de renderizar conteúdo dinâmico.

Inicie sua jornada com Spring Boot implementando essas práticas e desbloqueie todo o potencial do desenvolvimento moderno de aplicações web.
Palavras-chave para SEO: Tutorial Spring Boot, integrando modelos com Spring Boot, Thymeleaf Spring Boot, estrutura de projeto Spring Boot, recursos estáticos Spring Boot, configuração de controller Spring Boot, modelagem Thymeleaf, aplicação web Spring Boot, modelos HTML Spring Boot, guia Spring Boot e Thymeleaf
Nota: Este artigo é gerado por IA.
S02L02 – O Modelo e os Arquivos Externos

Integrando Modelos com Spring Boot: Um Guia Abrangente

Índice

Introdução

Compreendendo a Estrutura do Projeto

Visão Geral da Hierarquia do Projeto

Componentes Principais:

Adicionando Modelos e Recursos Estáticos

Passo 1: Organizando Recursos Estáticos

Passo 2: Adicionando Modelos HTML

Passo 3: Modelo de Exemplo (`home.html`)

Configurando o Controller do Spring Boot

Passo 1: Criando `HomeController.java`

Passo 2: Configurando `SpringStarterApplication.java`

Passo 3: Dependências do Maven (`pom.xml`)

Executando e Testando a Aplicação

Passo 1: Iniciando a Aplicação

Passo 2: Acessando a Aplicação

Passo 3: Verificando o Resultado

Introdução ao Motor de Modelagem Thymeleaf

Principais Características do Thymeleaf:

Aprimorando Modelos com Thymeleaf

Passando Dados do Controller para o Modelo

Renderização Condicional e Iteração

Conclusão
