Thymeleaf 和 Spring 引导 - 向 model 添加属性。 正确的方法是什么？

Question

I am trying to find a better way to set values to thymeleaf template, because I have a feeling the way I do it is wrong.

Say I have a controller with two mappings:

@GetMapping("/")
    public String getSearchPage(Model model) {
        model.addAttribute("weatherRequest", new WeatherRequest());
        model.addAttribute("weatherResponse", new WeatherResponse());
        model.addAttribute("temperature_real");
        model.addAttribute("temperature_feels");
        model.addAttribute("humidity");
        model.addAttribute("pressure");
        return "index";
    }

and

@PostMapping("/getWeather")
    public String getWeatherForCity(@ModelAttribute("weatherRequest") WeatherRequest request, Model model) throws JsonProcessingException {

        WeatherResponse response = weatherService.getWeatherData(request.getZipCode());
        model.addAttribute("weatherResponse", new WeatherResponse());
        model.addAttribute("temperature_real", response.mainWeatherData.temperature);
        model.addAttribute("temperature_feels", response.mainWeatherData.temperatureFeels);
        model.addAttribute("humidity", response.mainWeatherData.humidity);
        model.addAttribute("pressure", response.mainWeatherData.pressure);
        return "index";

@GetMapping("/") is for my home page, @PostMapping("/getWeather") is for when the button is clicked, so that i gather weather data for the entered zip code.

It looks to me weird, that I am adding the attributes twice , but it works. However it does not work when I am trying to change template so that the form is only rendered when the mainWeatherData is not null.

the relevant index.html part you can find below).

This is the part of the index.html that is changed.

<div>
    <form th:action="@{/getWeather}" method="post" th:object="${weatherRequest}">
        <label>Enter the postal code:</label>
        <input id="search" name="searchInput" th:field="*{zipCode}"/>
        <button  type="submit">Check weather</button>
    </form>
    <form >
        <div>
            <p>Temperature:<label th:text="${temperature_real}"></label></p>
            <p>Feels like:<label th:text="${temperature_feels}"></label></p>
            <p>Humidity:<label th:text="${humidity}"></label></p>
            <p>Pressure:<label th:text="${pressure}"></label></p>
        </div>
    </form>
</div>
</body>
</html>

The whole form is not rendered both before I fetched the data and after the mainWeatherData is no more null.

This I am adding to the second form to render it when the weather data is not null:

<form th:if="${weatherResponse.mainWeatherData != null}">

• Main question: how can i improve adding the attributes in my controller.
• Second question: how do I make it render form in thymeleaf when the data is there.

Answer 1

You are not mistaken in your feelings. There are a few more useful ways of the example you're trying to write, I will show you my simple and popular usage:

public class WeatherRequest {

    private String zipCode;

    public WeatherRequest() {
    }

    // getter / setter ..
}

public class WeatherResponse {

    private String temperatureReal;
    private String temperatureFeels;
    private String humidity;
    private String pressure;

    public WeatherResponse() {
    }

    // getter/setter ..
}

@Controller
public class WeatherController {

   @GetMapping("/")
   public String getSearchPage(Model model) {
      model.addAttribute("weatherRequest", new WeatherRequest());
      return "weather-search";
   }

   @PostMapping("/getWeather")
   public String getWeatherForCity(Model model, WeatherRequest weatherRequest) {
      model.addAttribute("weatherRequest", weatherRequest);
      model.addAttribute("weatherResponses", getWeatherResponse(weatherRequest.getZipCode()));
      return "weather-search";
   }

   private List<WeatherResponse> getWeatherResponses(String zipCode) {
      List<WeatherResponse> weatherResponses = new ArrayList<>();
      for (int i = 1; i < 3; i++) {
         WeatherResponse weatherResponse = new WeatherResponse();
         weatherResponse.setTemperatureReal("A" + i + ": " + zipCode);
         weatherResponse.setTemperatureFeels("B" + i + ": " + zipCode);
         weatherResponse.setHumidity("C" + i + ": " + zipCode);
         weatherResponse.setPressure("D" + i + ": " + zipCode);
         weatherResponses.add(weatherResponse);
      }
      return weatherResponses;
   }
}

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
    <form th:action="@{/getWeather}" method="post" th:object="${weatherRequest}">
        <label>Enter the postal code:</label>
        <input th:field="*{zipCode}" />
        <button type="submit">Check Weather</button>
    </form>
    <div th:if="${!weatherResponses.isEmpty()}">
        <div th:each="weatherResponse: ${weatherResponses}">
            <p>Temperature:<label th:text="${weatherResponse.temperatureReal}"></label></p>
            <p>Feels Like:<label th:text="${weatherResponse.temperatureFeels}"></label></p>
            <p>Humidity:<label th:text="${weatherResponse.humidity}"></label></p>
            <p>Pressure:<label th:text="${weatherResponse.pressure}"></label></p>
        </div>
    </div>
</body>
</html>

In Thymeleaf, iteration is achieved by using the th:each attribute.

You can go further. For example, when you click on search, you can make an Ajax request and update the results instantly, etc.

If you use Ajax request, the weatherRequest in the getWeatherForCity() method will not be needed.

This example links will show how to make use of Thymeleaf Fragments to reuse some common parts of a site:

• Working with Fragments in Thymeleaf
• Spring MVC 3.2 Thymeleaf Ajax Fragments
• Spring Boot / Thymeleaf: Fragments via Ajax