我试图找到一个更好的方法来设置值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
不再为空之后,整个表单都没有呈现。
这是我添加到第二种形式以在天气数据不为空时呈现它:
你的感觉没有错。你想写的例子还有一些更有用的方法,我将向你展示我简单而流行的用法:
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
来重用站点的一些常见部分: