| gradle/wrapper | ||
| src | ||
| .gitignore | ||
| build.gradle | ||
| gradlew | ||
| gradlew.bat | ||
| README.md | ||
| settings.gradle | ||
HelloSpringMVC
Is a trivial “Hello, World” web site with SpringMVC.
This application is an outcome of this guide, which walks you through the process of creating a “Hello, World” web site with Spring. It serves a static home page and that will also accept HTTP GET requests at: http://localhost:8080/greeting. It will respond with a web page that displays HTML. The body of the HTML will contain a greeting: “Hello, World!”
You can customize the greeting with an optional name parameter in the query string. The URL might then be http://localhost:8080/greeting?name=User. The name parameter value overrides the default value of World and is reflected in the response by the content changing to “Hello, User!”
Spring Initializr
In VsCode press cmd+shif+p and type Spring Initilizr. Choose next dependencies:
- SpringWeb
- Thymeleaf
- Spring Boot DevTools
Web Controller
In Spring’s approach to building web sites, HTTP requests are handled by a controller. You can easily identify the controller by the @Controller annotation. In the following example, GreetingController handles GET requests for /greeting by returning the name of a View (in this case, greeting). A View is responsible for rendering the HTML content. The following listing (from src/main/java/djmil/hellomvc/GreetingController.java) shows the controller:
package djmil.hellomvc;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class GreetingController {
@GetMapping("/greeting")
public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
// NOTE: Here we can request some data from our RESTful backend as well
model.addAttribute("name", name);
return "greeting"; // <<-- template
}
}
This controller is concise and simple, but there is plenty going on. We break it down step by step.
The @GetMapping annotation ensures that HTTP GET requests to /greeting are mapped to the greeting() method.
@RequestParam binds the value of the query string parameter name into the name parameter of the greeting() method. This query string parameter is not required. If it is absent in the request, the defaultValue of World is used. The value of the name parameter is added to a Model object, ultimately making it accessible to the view template.
Model, View and a Template
The implementation of the greeting() method body relies on a view technology (in this case, Thymeleaf) to perform server-side rendering of the HTML.
[!note] Make sure you have Thymeleaf on your classpath. Artifact co-ordinates:
org.springframework.boot:spring-boot-starter-thymeleaf
Thymeleaf parses the greeting.html template and evaluates the th:text expression to render the value of the ${name} parameter that was set in the controller. The following listing src/main/resources/templates/greeting.html shows the template:
<!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>
Interactivity
Let's add minimal interactivity to the page by introducing an input field and a button. On the button press, a simple JavaScript will reload the page (by calling README#Web Controller 's Get endpoint) providing a value from the input filed as a URL parameter.
...
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
<input value="user"/>
<button>Get your greeting</button>
</body>
</html>
<script>
function getName() {
const name = document.querySelector('input').value;
console.log(name);
window.open('http://localhost:8080/greeting?name='+name)
}
const button = document.querySelector('button');
button.addEventListener("click", getName);
</script>