Spring 일지 #13 (20210914) 화면 구현(rest, 조회수 증가)

13. RestBoardConroller.java, 조회수증가

-RestBoardConroller.java

 *화면을 나타내는 곳을 따로 있다고 가정(ex) react)하고 어떻게 정보를 보낼지 코딩

 *controller 생성(RestBoardConroller.java)

RestBoardConroller 위치

-상세 화면 정보 확인

 *상세 화면 정보 전달(RestBoardConroller.java)

package com.example.restcontroller;

 

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.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.RestController;

 

@RestController

@RequestMapping(value = "/board_api")

public class RestBoardController {

 

    @Autowired

    private BoardRepository bRepository;

 

    // 127.0.0.1:8080/ROOT/board_api/select_one.json?no=1

    @RequestMapping(value = "/select_one.json", method = { RequestMethod.GET,

            RequestMethod.POST }, consumes = MediaType.ALL_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)

    public @ResponseBody Map<String, Object> selectOne(@RequestParam("no") long no) {

        Board board = bRepository.getById(no);

 

        Map<String, Object> map = new HashMap<>();

        map.put("no", board.getNo());

        map.put("title", board.getTitle());

        map.put("writer", board.getWriter());

        map.put("content", board.getContent());

        map.put("hit", board.getHit());

        map.put("regdate", board.getRegdate());

 

        return map;

    }

 

 *화면 확인(크롬, 포스트맨)

1번 글 확인

포스트맨 확인

 

-조회수 증가

 *조회수 증가 정보 전달(RestBoardConroller.java)

... ...

// 127.0.0.1:8080/ROOT/board_api/update_hit.json?no=1

    @RequestMapping(value = "/update_hit.json", method = {

            RequestMethod.PUT }, consumes = MediaType.ALL_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)

    public @ResponseBody Map<String, Integer> updateOne(@RequestParam("no") long no) {

        Map<String, Integer> map = new HashMap<>();

        try {

            Board board = bRepository.getById(no);

            board.setHit(board.getHit() + 1);

            bRepository.save(board);

            map.put("ret", 1);

        } catch (Exception e) {

            e.printStackTrace();

            map.put("ret", 0);

        }

        return map;

    }

... ...

 

 *entity 수정(Board.java)

 *기존에 updatable = false 였는데 조회수 증가가 될 수 있도록 true 로 수정한다.

... ...

 @Column(updatable = true, name = "HIT")

    private int hit = 1; // 조회수

... ...

 

 

 *화면 확인(포스트맨)

 **send 버튼을 눌러 조회수 증가

 **오라클에서 조회수 증가 확인

조회수 증가 구현

조회수 증가 확인

 

-조회수 증가 화면 구현

 *조회수 증가 구현

... ...

<div id="app" style="padding: 10px;">  <-id="app" 추가

... ...

<td> 

    <a href="#"

      th:text="${brd.title}" 

th:@click="'handleHit(\''+${brd.no}+'\')'"></a>  <- a 태그 수정

</td> 

... ...

<!--CDN방식(jsp기반 정상적인 프론트엔드는 아님), CLI 방식(npm install해서 하는 방식)-->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script th:inline="javascript">

        new Vue({

            el : '#app',

            date : function(){

                return{

                }

            },

            methods:{

                async handleHit(no){

                    console.log(this.vueList);

                    console.log(no);

                    const headers = {"Content-Type":"application/json"};

                    const url = "/ROOT/board_api/update_hit.json?no="+ Number(no);

                    const response = await axios.put(url, {}, headers);

                    console.log(response);

                    if(response.data.ret === 1){

                        window.location.href="/ROOT/board/select_one?no="+ Number(no);

                    }

                }

            }

        });

    </script>

 

  *증가 구현하기

조회수 증가 확인