Ejemplos thymeleaf

package com.trifulcas.SpringBootVistas.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import com.trifulcas.SpringBootVistas.model.Genero;
import com.trifulcas.SpringBootVistas.repository.GeneroRepository;

@Controller
public class MainController {

	@Autowired
	GeneroRepository generoRepository;
	
	@GetMapping("/index")
	public String index(Model model) {
		// Para pasar datos a la vista usamos model
		
		model.addAttribute("nombre", "Pepito pérez");
		
		// Lo que devolvemos aquí es el nombre de la vista
		// Spring boot automáticamente buscará una página index.html
		// En la carpeta resources/templates
		return "index";
	}
	// La primera vez que estamos haciendo un MVC como dios manda
	@GetMapping("/genero/{id}")
	public String getGenero(Model model, @PathVariable int id) {
		// Voy al modelo para obtener los datos del genero
		Genero genero=generoRepository.findById(id).orElse(null);
		// Una vez tengo esos datos los envío a la vista vía model
		model.addAttribute("genero", genero);
		
		// Lo que devolvemos aquí es el nombre de la vista
		// Spring boot automáticamente buscará una página index.html
		// En la carpeta resources/templates
		return "genero";
	}
// La primera vez que estamos haciendo un MVC como dios manda
		@GetMapping("/generos")
		public String getGeneros(Model model) {
			// Voy al modelo para obtener los datos del genero
			List<Genero> generos=generoRepository.findAll();
			// Una vez tengo esos datos los envío a la vista vía model
			model.addAttribute("generos", generos);
			
			// Lo que devolvemos aquí es el nombre de la vista
			// Spring boot automáticamente buscará una página index.html
			// En la carpeta resources/templates
			return "generos";
		}
}


index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Mi primera vista</title>
</head>

<body>
	<!-- Las plantillas Thymeleaf tienen una serie de comandos para
	utilizar y mostrar la información que nos pasan-->
	<h1>Hola <span th:text="${nombre}"></span> ¿Qué tal?</h1>
</body>

</html>

genero.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Genero</title>
</head>

<body>
	<h2>Género</h2>
<!-- A mí me han pasado los datos en la entidad genero
	Y muestro las propiedades de esa entidad -->
	<p th:text="${genero.idgenero}"></p>
	<p th:text="${genero.nombre}"></p>
</body>

</html>

generos.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Generos</title>
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

	<!-- Latest compiled JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
	<h2>Géneros</h2>
	<div class="card w-50" th:each="genero: ${generos}">
		<div class="card-header"><span th:text="${genero.idgenero}"></span></div>
		<div class="card-body"><span th:text="${genero.nombre}"></span></div>
	</div>

</body>

</html>

Si yo voy a esta url: http://localhost:8080/genero/3
Podré ver los datos del género que nos pidan, en este caso 3

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos