60. 검색창, 조회수 증가
- 검색창
* 검색창 생성(board_select.jsp)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판 목록</title>
</head>
<body>
<h3>게시판 목록</h3>
<hr />
<a th:href="@{/board/insert}">글쓰기</a>
<form th:action="@{/board/select}" method="get">
<input type="hidden" value="1" name="page" />
<input type="text" name="title" placeholder="검색어" />
<!--<input type="text" name="writer" placeholder="검색어" />-->
<input type="submit" value="검색" />
</form>
<table border="1">
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
<th>날짜</th>
</tr>
</thead>
<tbody>
<tr th:each="brd, idx : ${list}">
<td th:text="${brd.no}"></td>
<td>
<a href="#" th:text="${brd.title}"></a>
</td>
<td th:text="${brd.writer}"></td>
<td th:text="${brd.hit}"></td>
<td th:text="${brd.regdate}"></td>
</tr>
</tbody>
</table>
<th:block th:each=" i : ${#numbers.sequence(1,pages)}">
<a th:href="@{/board/select(page=${i}, title=${param.title}, writer=${param.writer} )}" th:text=${i}></a>
</th:block>
</body>
</html>
* 검색창 확인
- 조회수 증가
* board_select.jsp 수정
* 제목 태그를 클릭 하면 script 를 이용해서 조회수 증가한다.
... ...
<tbody>
<tr th:each="brd, idx : ${list}">
<td th:text="${brd.no}"></td>
<td>
<a href="#" th:onclick="|javascript:updateHit( '${brd.no}' ) |" th:text="${brd.title}"></a>
</td>
<td th:text="${brd.writer}"></td>
<td th:text="${brd.hit}"></td>
<td th:text="${brd.regdate}"></td>
</tr>
</tbody>
</table>
... ...
*script 생성(board_select.jsp)
... ...
<!--자바 스크립트 이용해서 restcontroller 호출-->
<script>
function updateHit(idx){ // == axios.put()...
const xhr = new XMLHttpRequest();
const url = "/ROOT/board/update_hit.json?no="+idx;
xhr.open('PUT', url, true);
xhr.responseType = 'json';
xhr.setRequestHeader('Content-Type',
'application/json; charset=UTF-8;');
xhr.onload = function(e) {
console.log(e);
if (e.target.response.result === 1 &&
e.target.status === 200) {
location.href
= "/ROOT/board/select_one?no=" + idx;
}
}
xhr.send();
}
</script>
</body>
</html>
* /update_hit.json 생성(RestBoardController.java)
package com.example.controller;
import java.util.HashMap;
import java.util.Map;
import com.example.entity.Board;
import com.example.repository.BoardRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping(value = "/board")
public class RestBoardController {
@Autowired
BoardRepository bRepository;
@PutMapping(value = "/update_hit.json",
consumes = MediaType.ALL_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE )
public Map<String, Object> updateHitPUT(
@RequestParam("no") long no) {
System.out.println(no); //글번호가 제대로 넘어오는지 확인
Map<String, Object> map=new HashMap<>();
try{
Board board = bRepository.getById(no);
board.setHit(board.getHit()+1);
bRepository.save(board);
map.put("result", 1);
}
catch(Exception e){
e.printStackTrace();
map.put("result", 0);
}
return map;
}
}
* 조회수 증가
* 상세 페이지를 아직 생성하지 않아 오류창이 나타난다.
'Spring' 카테고리의 다른 글
| Spring 일지 #62 (exam) 시험 대비7(상세 페이지 이전글, 다음글) (0) | 2021.10.08 |
|---|---|
| Spring 일지 #61 (exam) 시험 대비6(상세 페이지, 이미지 불러오기) (0) | 2021.10.07 |
| Spring 일지 #59 (exam) 시험 대비4(게시판 목록, 페이지네이션) (0) | 2021.10.07 |
| Spring 일지 #58 (exam) 시험 대비3(게시판 글쓰기) (0) | 2021.10.07 |
| Spring 일지 #57 (exam) 시험 대비2(패키지, 엔티티, 컨트롤러) (0) | 2021.10.07 |