20220125_Board.vue

<template>
    <div>
        <h3>src/components/Board.vue</h3>
        <el-button>
            <router-link to="/boardwrite">글쓰기</router-link>
        </el-button>
        
        <el-card class="box-card">
            <table border="1">
                <tr v-for="tmp in state.items.result" :key="tmp">
                    <td @click="handleBoardContent(tmp._id)" >{{ tmp._id }}</td>
                    <td>{{ tmp.title }}</td>
                    <td>{{ tmp.writer }}</td>
                    <td>{{ tmp.hit }}</td>
                    <td>{{ tmp.regdate }}</td>
                </tr>
            </table>
            <el-pagination
                :page-size="20"
                :pager-count="11"
                layout="prev, pager, next"
                :total="100"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

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

export default {
    setup () { 
        const router = useRouter();
        const state  = reactive({
            items : {},
            page  : 1,
            text  : '',
        });
        
        // 생명주기 onMounded()
        onMounted( async() => {
            const url      = `/board/select?page=${state.page}&text=${state.text}`;  // 25, 26라인 변수 갖다쓰기
            const headers  = { "Content-type": "application/json" };
            const response = await axios.get(url, { headers });
            console.log(response.data);

            if(response.data.status === 200) {
                state.items.result = response.data.rows;
            }
        });

        const handleBoardContent = (no) => {
            console.log(no);
            // 127.0.0.1:3000/boardcontent?no=2
            router.push({ name: "BoardContent", query: { no: no } });
        }

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

<style lang="scss" scoped>

</style>