SpringBoot/HelloSpringMVC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Home page

Browse Source
This commit is contained in:
djmil 2023-07-26 11:34:43 +02:00
parent 959364fa12
commit 141ed6aa7f
3 changed files with 58 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
README.md
View File

@ -14,7 +14,9 @@ In VsCode press `cmd+shif+p` and type `Spring Initilizr`. Choose next dependenci
- Thymeleaf
- Spring Boot DevTools
# Web Controller
# MVC
## 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:
@ -46,7 +48,7 @@ The `@GetMapping` annotation ensures that HTTP GET requests to `/greeting` a
[`@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
## 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.
@ -67,16 +69,52 @@ Thymeleaf parses the `greeting.html` template and evaluates the `th:text` exp
</html>
```
# Interactivity
## Test the Application
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.
Now that the web site is running, visit http://localhost:8080/greeting, where you should see “Hello, World!”
Provide a `name` query string parameter by visiting http://localhost:8080/greeting?name=User). Notice how the message changes from “Hello, World!” to “Hello, User!”:
This change demonstrates that the [`@RequestParam`](http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/bind/annotation/RequestParam.html) arrangement in `GreetingController` is working as expected. The `name` parameter has been given a default value of `World`, but it can be explicitly overridden through the query string.
# Add a Home Page
Static resources, including HTML and JavaScript and CSS, can be served from your Spring Boot application by dropping them into the right place in the source code. By default, Spring Boot serves static content from resources in the classpath at `/static` (or `/public`). The `index.html` resource is special because, if it exists, it is used as a "welcome page" for serving web-content. Which means it is served up as the root resource (that is, at `http://localhost:8080/`). For this, you need to create the following file `src/main/resources/static/index.html`:
```html
<!DOCTYPE HTML>
<html>
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Get your greeting <a href="/greeting">here</a></p>
</body>
</html>
```
When you restart the application, you will see the HTML at http://localhost:8080/.
## Spring Boot Devtools
A common feature of developing web applications is coding a change, restarting your application, and refreshing the browser to view the change. This entire process can eat up a lot of time. To speed up this refresh cycle, Spring Boot offers with a handy module known as [spring-boot-devtools](http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#using-boot-devtools):
- Enables [hot swapping](https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#using.running-your-application.hot-swapping).
- Switches template engines to disable caching.
- Enables LiveReload to automatically refresh the browser.
- Other reasonable defaults based on development instead of production.
## 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 an URL parameter. Update `greeting.htm` with next lines:
```html
...
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
<input value="user"/>
<button>Get your greeting</button>
<input placeholder="Enter username.."/>
<button>Go!</button>
</body>
</html>
@ -91,4 +129,5 @@ Let's add minimal interactivity to the page by introducing an input field and a
const button = document.querySelector('button');
button.addEventListener("click", getName);
</script>
```
```

10
src/main/resources/static/index.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Get your greeting <a href="/greeting">here</a></p>
</body>
</html>

4
src/main/resources/templates/greeting.html
View File

@ -6,8 +6,8 @@
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
<input value="user"/>
<button>Get your greeting</button>
<input placeholder="Enter username.."/>
<button>Go!</button>
</body>
</html>