提问者:小点点

Thymeleaf和Spring Boot-向模型添加属性。正确的方法是什么?


我试图找到一个更好的方法来设置值thymeleaf模板,因为我有一种感觉,我这样做是错误的。

假设我有一个具有两个映射的控制器:

@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";
    }

@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";

@GetMaps("/")是我的主页,@PostMaps("/getWeather")是点击按钮时,这样我就可以收集输入邮政编码的天气数据。

在我看来很奇怪,我添加了两次属性,但它有效。然而,当我尝试更改模板以使表单仅在main WeatherData不为空时才呈现时,它不起作用。

您可以在下面找到相关的index. html部分)。

这是index. html中更改的部分。

<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>

在我获取数据之前和main WeatherData不再为空之后,整个表单都没有呈现。

这是我添加到第二种形式以在天气数据不为空时呈现它:

  • 主要问题:如何改进在控制器中添加属性。
  • 第二个问题:当数据存在时,如何使它在thymeleaf中呈现形式。

共1个答案

匿名用户

你的感觉没有错。你想写的例子还有一些更有用的方法,我将向你展示我简单而流行的用法:

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>

在Thymeleaf中,迭代是通过使用th: each属性来实现的。

你可以更进一步。例如,当你点击搜索时,你可以发出Ajax请求并立即更新结果等。

如果您使用Ajax请求,则不需要getWeatherForCity()方法中的weatherRequest

此示例链接将展示如何使用Thymeleaf Fragments来重用站点的一些常见部分:

  • 在Thymeleaf中处理碎片
  • SpringMVC3.2 Thymeleaf Ajax Fragments
  • Spring Boot/Thymeleaf:通过Ajax的片段