Procesar Formularios con Spring Boot y Mustache

Crearemos un proyecto con Spring Boot junto con el motor de plantillas Mustache, en el que procesaremos un formulario web.
Spring Boot es una librería que facilita el desarrollo de aplicaciones con Spring. Permite usar el servidor web Tomcat embebido en la aplicación simplificando la configuración y acelerando el desarrollo.
Usaremos el entorno de desarrollo Spring Tool Suite (STS) , una versión de Eclipse que proporciona facilidades para trabajar con aplicaciones Spring.

Configuramos el Proyecto

En primer lugar crearemos nuestro proyecto y añadiremos las dependencias necesarias para desarrollar el mismo.

Creación de un Nuevo Proyecto

Desde el menú superior izquierdo File , elegimos la opción New Spring Starter Project y pulsamos el botón Next :

Añadimos Dependencias

En la siguiente pantalla elegimos las siguientes dependencias :

Spring Web, nos proporciona las herramientas necesarias para implementar una aplicación web.
Mustache, el motor de plantillas que vamos a utilizar.
Spring Boot DevTools, las herramientas que nos van a facilitar nuestra labor como desarrolladores.

Fichero pom.xml

El Project Object Model queda como sigue :

<?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.5.0</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>web_note_books</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>web_note_books</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-mustache</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

Implemantamos el Controlador

Construimos la clase NotesController con la notación @Controller indicando la ruta /savenote con @RequestMapping. A continuación la función saveNote, a la cual pasamos como parámetros el modelo proporcionado por Spring y los valores de los atributos que queremos pasarle con la anotación @RequestParam. Lo siguiente será añadir los atributos al modelo y retornar la plantilla «note_view», que queremos utilizar.

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class NotesController {
	
	@RequestMapping("/savenote")
	public String saveNote(Model model,
			@RequestParam String title,
			@RequestParam String page,
			@RequestParam String note) {
		model.addAttribute("title",title);
		model.addAttribute("page",page);
		model.addAttribute("note",note);
		
		return "note_view";
	}
			
}

Diseñamos la Plantilla con Mustache

En la carpeta templates de resources creamos el fichero note_view.mustache y en él mostramos los atributos del modelo :

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{{title}}</title>
        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    </head>
<body>
	<p>Título: {{title}}</p>
	<p>Página: {{page}}</p>
	<p>Nota: {{note}}</p>
</body>
</html>

Diseño del Formulario

Creamos un formulario (form.html) en html para recoger los atributos del modelo y lo enviamos a la ruta savenote mediante el método POST.

<html>
<head>
	<meta chatset="UTF-8"/>
</head>
<body>
	<form action="savenote" method="post">
		<p>Título: </p>
		<input type='text' name='title'/>
		<p>Página: </p>
		<input type='text' name='page'/>
		<p>Nota: </p>
		<textarea name='note' rows=5 cols=40></textarea>
		
		<input type='submit' value='Enviar'/>   
	</form>
</body>
</html>

Cambio el Puerto ( si es necesario )

En algunas ocasiones el puerto por defecto de nuestra máquina (8080) puede que esté ocupado por otro servicio. En ese caso una de las formas que tenemos para cambiar el puerto donde queremos que se sirva nuestra aplicación es indicarlo en el archivo /web_note_books/src/main/resources/application.properties :

server.port=8069

Ejecutar la Aplicación

Una vez ejecutamos el archivo : /web_note_books/src/main/java/com/example/demo/WebNoteBooksApplication.java, Spring nos indica que nuestra aplicación se está ejecutando en el puerto que le hemos indicado. Para acceder a la aplicación simplemente hay que introducir la dirección http://localhost:8069/form.html en el navegador.

Llegados este punto, ya deberíamos tener nuestra aplicación funcionando correctamente. El código de la misma se encuentra en el siguiente repositorio de GitHub :

REPOSITORIO

Pasar un Objeto en lugar de Parametrizar

Una variante del la implementación anterior sería pasar el objeto Note al controlador en lugar de los atributos como parámetros.

Creamos la Clase Note

package com.example.demo;

public class Note {
	private String title;
	private String page;
	private String note;
	
	public Note() {
		
	}
	
	public Note(String title, String page, String note) {
		this.title = title;
		this.page = page;
		this.note = note;
	}
	
	public String getTitle() {
		return this.title;
	}
	public String getPage() {
		return this.page;
	}
	public String getNote() {
		return this.note;
	}
	
	public void setTitle(String title) {
		this.title = title;
	}
	public void setPage(String page) {
		this.page = page;
	}
	public void setNote(String note) {
		this.note = note;
	}
}

Modificamos el Controlador

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class NotesController {
	
	@RequestMapping("/savenote")
	public String saveNote(Model model, Note note) {

		model.addAttribute("note",note);
		
		return "note";
	}
			
}

Modificamos la plantilla

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{{title}}</title>
        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    </head>
<body>
	<p>Título: {{note.title}}</p>
	<p>Página: {{note.page}}</p>
	<p>Nota: {{note.note}}</p>
</body>
</html>

Configuramos el Proyecto

Creación de un Nuevo Proyecto

Añadimos Dependencias

Fichero pom.xml

Implemantamos el Controlador

Diseñamos la Plantilla con Mustache

Diseño del Formulario

Cambio el Puerto ( si es necesario )

Ejecutar la Aplicación

Pasar un Objeto en lugar de Parametrizar

Creamos la Clase Note

Modificamos el Controlador

Modificamos la plantilla

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta