2024. 6. 19. 17:50ㆍSpring-Project
이전글 : https://codepracticeroom.tistory.com/204
이번에는 원하는 기간을 선택하고 그 기간의 데이터를 가져온다.
먼저 이전에 했던 findAll.html에 이 코드를 넣어준다.
<Body> 바로 아래에 넣어주면 된다.
<form action="/list" method="post">
<div>
<label for="startDate">시작 날짜:</label>
<input type="date" id="startDate" name="startDate" th:value="${startDate}" required />
</div>
<div>
<label for="endDate">종료 날짜:</label>
<input type="date" id="endDate" name="endDate" th:value="${endDate}" required />
</div>
<button type="submit">검색</button>
</form>
날짜를 선택하고 Post로 넘겨주는 Html이다.
날짜와 날짜 사이의 기간을 가져와야 하므로 MongoDB의 편리한 기능을 사용한다.
WeatherRepository
@Repository
public interface WeatherRepository extends MongoRepository<WeatherData, String> {
List<WeatherData> findWeatherDataByDateBetween(LocalDate start, LocalDate end);
}
find(도메인)By(날짜)Between는 MongoDBRepository에서 제공해주는 편리한 메서드이다.
이름을 기반으로 MongoDBRepository에서 자동으로 메서드를 생성해 준다.
WeatherService
public List<WeatherData> findWeatherDataBetweenDate(LocalDate start, LocalDate end) {
return weatherRepository.findWeatherDataByDateBetween(start, end);
}
Repository에 만들었던 메서드를 사용한다.
DataController
...
@PostMapping("/list")
public String reFind( @RequestParam("startDate") @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate startDate,
@RequestParam("endDate") @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate endDate,
Model model){
log.info("classA={}, classb={}", startDate.getClass(), endDate.getClass());
List<WeatherData> bets = weatherService.findWeatherDataBetweenDate(startDate, endDate);
model.addAttribute("bet",bets );
model.addAttribute("startDate", startDate);
model.addAttribute("endDate", endDate);
return "betweenDate";
}
...
/list에서 Post로 날짜를 넘겨주기 때문에 @RequestParam으로 데이터를 받아야 한다.
그리고 MongoDB에서 가져오는 데이터를 ISO로 포멧해준다.
아래 html을 templates생성하고 넣어준다.
betweenDate
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link href="../css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<title>List</title>
<style>
body {
margin: 20px;
background-color: #f8f9fa;
}
.table {
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.btn-warning {
margin-bottom: 20px;
}
</style>
</head>
<body>
<form action="/list" method="post">
<div>
<label for="startDate">시작 날짜:</label>
<input type="date" id="startDate" name="startDate" th:value="${startDate}" required />
</div>
<div>
<label for="endDate">종료 날짜:</label>
<input type="date" id="endDate" name="endDate" th:value="${endDate}" required />
</div>
<button type="submit">검색</button>
</form>
<hr class="my-4">
<div class="row">
<div class="col" style="margin-bottom: 20px;">
<button class="btn btn-primary float-end" th:onclick="|location.href='@{/}'|" type="button">뒤로가기</button>
</div>
</div>
<div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>번호</th>
<th>날짜</th>
<th>시간</th>
<th>온도</th>
<th>습도</th>
</tr>
</thead>
<tbody>
<tr th:each="find : ${bet}">
<td th:text="${find.sequence}"></td>
<td th:text="${find.date}"></td>
<td th:text="${#temporals.format(find.time, 'HH:mm:ss')}"></td>
<td th:text="${find.temperature}"></td>
<td th:text="${find.humidity}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
localhost:8080/list로 접속 해 왼쪽 상단 시작 날짜와 종료 날짜를 선택 후 검색을 클릭하면
그 사이 날짜에 있는 데이터가 나오게 된다.
모든 코드 보러가기
https://github.com/YeongBee/inpspring.git
GitHub - YeongBee/inpspring
Contribute to YeongBee/inpspring development by creating an account on GitHub.
github.com
'Spring-Project' 카테고리의 다른 글
| 기상청API를 활용한 나만의 Weather 만들기(2) - 기상청API 데이터 분석 (0) | 2024.06.25 |
|---|---|
| 기상청API를 활용한 나만의 Weather 만들기(1) (0) | 2024.06.24 |
| Arduino와 SpringBoot를 사용한 온습도 측정 사이트(7) - SpringBoot편 (0) | 2024.06.18 |
| Arduino와 SpringBoot를 사용한 온습도 측정 사이트(6) - SpringBoot편 (0) | 2024.06.17 |
| Arduino와 SpringBoot를 사용한 온습도 측정 사이트(5) - SpringBoot편 (0) | 2024.06.17 |