Vue 일지 #13 (20210928) spring 연동(상세 페이지)

13. 상세 페이지

-백엔드

 *entity 수정(BoardProjection.java)

 **상세 페이지에 표시할 글 내용 항목 추가

... ...

String getContent(); // 내용 content

... ...

 

 *저장소 수정(BoardRepository.java)

 **상세 페이지를 구현하기 위한 조건 추가

... ...

// 한개 조회 글번호가 일치하는 것

BoardProjection findByNo(long no);

... ...

 

 *board_select_one get 추가(ApiController.java)

 

// GET => /ROOT/api/board_select_one?no=

    // 상세페이지

    @RequestMapping(value = "/board_select_one", method = RequestMethod.GET, consumes = MediaType.ALL_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)

    public Map<String, Object> boardSelect(@RequestParam(name = "no") long no) {

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

        try {

            BoardProjection board = bRepository.findByNo(no); <- 저장소에서 추가한 조건 사용

            map.put("result", 1);

            map.put("data", board);

            map.put("imageurl", "/ROOT/api/select_image?no=" + no);

        } catch (Exception e) {

            e.printStackTrace();

            map.put("result", 0);

        }

        return map;

    }

 

 *상세 페이지 확인(포스트맨)

상세 페이지 확인

 

-프론트엔드

 *상세 페이지 화면 구현(Menu4.vue)

<template>

    <div>

        <h3>게시판 상세내용</h3>

        {{no}}

        <hr/>

        글번호 {{item.no}} <br />

        제목 {{item.title}} <br />

        내용 {{item.content}} <br />

        <img :src="`${imageurl}`" style="width:50px;height:50px" />

    </div>

</template>

 

<script>

    import axios from 'axios';

    export default {

        methods:{

            async handleContent(){

                const url = `ROOT/api/board_select_one?no=${this.no}`;

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

                const response = await axios.get(url, headers);

                //console.log(response.data);  //데이터 구조 확인 필요

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

                    this.item = response.data.data;

                    this.imageurl = response.data.imageurl;

                }

            }

        },

        async mounted(){

            await this.handleContent(); //메소드 호출

        },

        data(){

            return{

                item : '',

                imageurl : '',

                no : this.$route.query.no

            }

        }

    }

</script>

 

<style scoped>

 

</style>

 

 *상세 페이지 이동 설정(Menu1.vue)

... ...

<tr v-for="item in items" v-bind:key="item">

                <td>{{item.no}}</td>

                <td><a href="#" @click="nextPage(item.no)">{{item.title}}</a></td>

                <td>{{item.writer}}</td>

                <td>{{item.hit}}</td>

                <td>{{item.regdate}}</td>

            </tr>

... ...

methods:{

            async nextPage(no){

                this.$router.push({name: 'Menu4', query:{no:no}});

            }

        },

... ...

 

 *상세 페이지 확인

상세 페이지