94 lines
4.6 KiB
Markdown
94 lines
4.6 KiB
Markdown
# HelloSpringMVC
|
||
|
||
Is a trivial “Hello, World” web site with SpringMVC.
|
||
|
||
This application is an outcome of [this](https://spring.io/guides/gs/serving-web-content/) 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`](http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/stereotype/Controller.html) annotation. In the following example, `GreetingController` handles GET requests for `/greeting` by returning the name of a [`View`](http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/servlet/View.html) (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:
|
||
|
||
```java
|
||
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`](http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/bind/annotation/RequestParam.html) 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`](http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/ui/Model.html) 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](http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html)) 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:
|
||
|
||
```html
|
||
<!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.
|
||
|
||
```html
|
||
...
|
||
<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>
|
||
``` |