Vue와 Repository연결 2022/04/12

파일명 vue.config.js

module.exports = {
    // 개발 서버 설정
    devServer: {
        // 프록시 설정
        proxy: {
            // 프록시 요청을 보낼 api의 시작 부분
            '/ROOT': {
                // 프록시 요청을 보낼 서버의 주소
                target: 'http://localhost:9090',
                changeOrigin: true,
                logLevel: 'debug',
            }
        },
       
    },

    // 리소스의 위치
    publicPath : '/ROOT/vue/'

};

파일명 routes/index.js

routes연결

import { createWebHashHistory, createRouter } from "vue-router";

import Home from '@/components/Home.vue'; //메인 컴포넌트 호출
import About from '@/components/About.vue'
import Board from '@/components/Board.vue'
import BoardWrite from '@/components/BoardWrite.vue'
import BoardOne from '@/components/BoardOne.vue'

const routes = [
    { path:'/', name:"Home", component:Home },
    { path:'/about', name:"About", component:About },
    { path:'/board', name:"Board", component:Board },
    { path:'/boardwrite', name:"BoBoardWriteard", component:BoardWrite },
    { path:'/boardone', name:"BoardOne", component:BoardOne },
];
  
const router = createRouter({
    history : createWebHashHistory(),
    routes : routes,
});
  
export default router;

---

파일명 App.vue

<template>
  <div>    
    <img alt="Vue logo" src="./assets/logo.png" style="width:50px" />
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/board">Board</router-link> |
    <hr />    

    <router-view></router-view>
  </div>
</template>
<script>
</script>

<style>
</style>

---

파일명 components/BoardWrite.vue

<template>
    <div>
        <h3>글쓰기</h3>
        <hr />
        <label style="width:75px; height: 30px; display:inline-block;">제목 : </label>
        <input type="text" v-model="state.btitle" /><br />
        <label style="width:75px; height: 30px; display:inline-block;">내용 : </label>
        <input type="text" v-model="state.bcontent" /><br />
        <label style="width:75px; height: 30px; display:inline-block;"></label>
        <button @click="handleInsert">글쓰기</button>

    </div>
</template>

<script>
import {reactive} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';
export default {
    setup () {
        const router = useRouter();

        const state = reactive({
            btitle : '',
            bcontent : '',
        });

        const handleInsert = async() =>{
            const url = `/ROOT/api/board/insert`;
            const headers = {"Content-Type":"application/json"};
            const body = {
                btitle : state.btitle,
                bcontent : state.bcontent
            };
            const response = await axios.post(url, body, {headers});
            console.log("BoardWrite.vue => response.data",response.data);
            if(response.data.status === 200){
                state.items = response.data.result;
                alert('등록되었습니다.');
                router.push({name : 'Board'});
            }
        }
        return {state,handleInsert}
    }
}
</script>

<style lang="scss" scoped>

</style>

---

파일명 components/Board.vue

<template>
    <div>
        <h3>게시판 목록</h3>
        <hr />
        <!-- {{state}} -->

        <router-link to="/boardwrite">글쓰기</router-link>
        <hr />
        <div v-if="state.items">
            <table border="1">
                <tr>
                    <th>글번호</th>
                    <th>글제목</th>
                    <th>조회수</th>
                </tr>

                <tr v-for="obj of state.items" :key="obj">
                    <td>{{obj.bno}}</td>
                    <td @click="handlePage(obj.bno)" style="cursor:pointer">{{obj.btitle}}</td>
                    <!-- <td><a @click="handlePage(obj.bno)" style="cursor:pointer">{{obj.btitle}}</a></td> -->
                    <td>{{obj.bhit}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import {onMounted, reactive} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';
export default {
    setup () {
        const router = useRouter();

        const state = reactive({
            page : 1
        });

        const handleData = async() =>{
            const url = `/ROOT/api/board/selectlist?page=${state.page}`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.get(url, {headers});
            console.log("Board.vue => response.data",response.data);
            if(response.data.status === 200){
                state.items = response.data.result;
            }
        };

        const handlePage = async(no) =>{
            // 조회수 1증가 시키기
            const url = `/ROOT/api/board/updatehit?bno=${no}`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.put(url, {}, {headers});
            console.log(response.data);
            if(response.data.status === 200){
                router.push({name : 'BoardOne', query :{no:no}})
            }
        }

        onMounted(()=>{
            handleData();
        })

        return {state, handlePage}
    }
}
</script>

<style lang="scss" scoped>

</style>

---

파일명 components/BoardOne.vue

<template>
    <div v-if="state.item">
        <h3>글 상세</h3>
        <!-- {{state.item.bno}} -->

        <table border="1">
            <tr>
                <th>글번호</th>
                <th>작성자</th>
                <th>조회수</th>
                <th>제목</th>
                <th>내용</th>
                <th>작성일</th>
            </tr>

            <tr>
                <td>{{state.item.bno}}</td>
                <td>{{state.item.bwriter}}</td>
                <td>{{state.item.bhit}}</td>
                <td>{{state.item.btitle}}</td>
                <td>{{state.item.bcontent}}</td>
                <td>{{state.item.bregdate}}</td>
                
            </tr>
        </table>        
    </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
import {useRoute} from 'vue-router';
import axios from 'axios';

export default {
    setup () {
        const route = useRoute();
        const state = reactive({
            no : route.query.no
        });
        
        const handleData = async()=>{
            const url = `/ROOT/api/board/selectone?bno=${state.no}`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.get(url, {headers});
            console.log(response.data);
            if(response.data.status === 200){
                state.item = response.data.result;
            }
        };

        onMounted(()=>{
            handleData();
        });

        return {state}
    }
}
</script>

<style lang="scss" scoped>

</style>