How to display characters entered in Spring Boot on a browser and reference links [Introduction to Spring Boot / For beginners]

Assumptions and environment

I'm studying how to use the Java framework Spring Boot. This time with Spring Boot *** Output of entered characters *** Now that I can do it, I will write it as a memorandum for myself and for beginners.

There were a lot of terms that I had never seen before, such as variables and methods that appeared on the way, so I will explain it in a bit of a bit.

environment: ・ Windows 10 ・ Eclipse · Java 8 ・ Spring Boot 2.0.4 Release ・ Thymeleaf ・ Maven

Introducing Spring Boot

Install STS from Eclipse Help> Marketplace. This article is insanely easy to understand. [Web application development starting with Spring Tool Suite (STS) and Spring Boot (1)](https://www.techscore.com/blog/2016/11/22/start-with-sts-and-spring-boot- 1 /) If you proceed according to this article, it's OK. Dependencies are Thymeleaf, Maven, Web only. Follow this article to Hello, World !.

• By default, 〇〇 (project name) Application.java is an execution class for executing this application, so you can leave it as it is. If you proceed this way, you can almost certainly do Hello, World !.

Display the entered characters on the browser

Follow the continuation of the article linked above. It has become difficult to understand from here, so I will explain it.

First, let's play with the files created during Hello, World !.

--Edit HelloController.java (not really good, but reuse it) --Edit index.html

*** Basic notation explanation ***

Editing Controller.java

HelloController.java

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

//It's a Controller! Annotation
@Controller
public class HelloController {
    //RequestMapping "/"→ Can be called when accessing the root URL
    //→ Method can be specified for each access address!
    @RequestMapping(value="/",method=RequestMethod.GET)
    //A convenient one that can put both Model and View (can be a return value)
    public ModelAndView index(ModelAndView mav) {
        //View name settings
        mav.setViewName("index");
        //Set the value (msg) and the output character for it
        mav.addObject("msg", "Please enter your name:");
        return mav;
    }

    @RequestMapping(value="/",method=RequestMethod.POST)
    //"name"Get the parameter POSTed in and take it as an argument
    public ModelAndView send(@RequestParam("name")String name,ModelAndView mav) {
        mav.setViewName("index");
        mav.addObject("msg", "Hello,"+name+"!");
        //Enter name (input value) in value
        mav.addObject("value",name);
        return mav;
    }
}

The above is the source code of the controller. (If you're looking for a controller, search for "Java MVC"!) Since it is a Java class of the main source, create it in src / main / java.

I usually write it as a comment, but the terms I don't understand are as follows.

What is the difference between @Controller and @RestController?

This article will be helpful. Various return values in Spring MVC controller

In short @Controller is mainly used for controllers for web pages, @RestController is used separately It seems that. My head hasn't caught up yet, but I somehow understood what I wanted to say, so next.

What is ModelAndView?

ModelAndView is a function of Spring MVC, and is a class that can handle "View" (object to be displayed on the screen) and "Model" (object to exchange values with view) together. By putting ModelAndView in the argument, you can use the information collectively. Super convenient.

What is setViewName?

setViewName is "the one that sets the view name". By setting the view name to " index " in setViewName, the view named index will be used. So what is a view name? It seems that there are various things, so I will investigate it next time. Omitted.

Since the Thymeleaf template engine is used here, the set " index " is recognized as a Thymeleaf template (templates / index.html). View (screen display part) is generated based on the information of this view name.

So, put this " ViewName " and the output characters named " msg " together into the ModelAndView class mav. This is the good point of ModelAndView. So, if you return the mav, you can send the ViewName and msg together to the client side.

What is Thymeleaf?

A template engine such as HTML.

• What is a template engine?

A library for processing with a program based on an HTML template called a template and outputting it to the screen. For the purpose of division of labor between programmers and web designers, processing is performed by interpreting and executing special tags. Smarty is a typical example in PHP. [From Weblio Dictionary](https://www.weblio.jp/content/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3 % 83% 88% E3% 82% A8% E3% 83% B3% E3% 82% B8% E3% 83% B3)

So, the following is easy to understand about the features of Thymeleaf. What is Thymeleaf In short, unlike JSP that is displayed after processing, it is described by attribute value, so it can be displayed normally without processing & it seems to be easy to see after all.

Edit index.html

Now that you understand it so far (even in Zackli), edit index.html.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hello Page</title>
</head>
    <body>
        <!-- th:text is specified as text in Thymeleaf,${}Is a variable-->
        <p th:text="${msg}">please wait...</p>
        <form action="/" method="post">
        <input type="text" name="name" th:value="${value}" >
        <input type="submit" value="Click">
        </form>
    </body>
</html>

Put the HTML in the template file. src/main/resources>templates

This HTML file is written in Thymeleaf notation, isn't it? These two articles are easy to understand about Thymeleaf notation. Completely master Thymeleaf with the minimum required sample Thymeleaf standard syntax

With this as a reference, I wrote and copied it.

In this state, run the project as a Spring Boot application.

Result screen

I was able to pass the value safely!