Spring

Spring 일지 #60 (exam) 시험 대비5(검색창, 조회수 증가)

uni5948 2021. 10. 7. 23:11

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'urltrue);

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

        @RequestParam("no"long no) {

            System.out.println(no); //글번호가 제대로 넘어오는지 확인

            Map<StringObjectmap=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;

        }

}

 

 * 조회수 증가

 * 상세 페이지를 아직 생성하지 않아 오류창이 나타난다.

조회수 증가

 

상세페이지 미구현