vue + jpa project (6) - Vue 게시판 목록화면 생성

이제 Vue 게시판 목록 화면을 생성한다. 화면을 좀 꾸미는 게 좋을 것 같아서 스타일을 적용하고 

게시판 목록 화면을 진행하겠다.

 

1. 스타일 적용

    w3.css는 를 최상단 public/index.html 파일의 안에 아래 줄을 타이틀 위에 추가한다.

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  // 추가된 소스
    <title><%= htmlWebpackPlugin.options.title %></title>

2. 게시판 목록화면 을 생성한다.

    이때, 별도의 폴더를 구성하여 생성하도록 한다. /views/board/BoardList.vue 

    일단 데이터 연동이 안되니 임시 데이터를 넣어서 하겠다.

<template>
  <div style="width:700px; margin:auto;">
    <div style="text-align: right; margin:8px;">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnWrite">신규등록</button>
    </div>
    <table class="w3-table-all">
      <thead>
      <tr>
        <th>No</th>
        <th>제목</th>
        <th>작성자</th>
        <th>등록일시</th>
        <th>수정일시</th>
      </tr>
      </thead>
      <tbody>

        <tr v-if="!list || (Array.isArray(list) && list.length ===0)">
          <td colspan="5">
            등록된 게시물이 없습니다.
          </td>
        </tr>

        <tr v-else v-for="(row, no) in list" :key="no">
          <td>{{ row.board_no }}</td>
          <td><a v-on:click="fnView(`${row.board_no}`)">{{ row.title }}</a></td>
          <td>{{ row.writer }}</td>
          <td>{{ row.reg_date }}</td>
          <td>{{ row.upd_date }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination w3-bar w3-padding-16 w3-small" v-if="paging.total_list_cnt > 0">
      <span class="pg">
      <a href="javascript:;" @click="fnPage(1)" class="first w3-button w3-border">&lt;&lt;</a>
      <a href="javascript:;" v-if="paging.start_page > 10" @click="fnPage(`${paging.start_page-1}`)"
         class="prev w3-button w3-border">&lt;</a>
      <template v-for=" (n,index) in paginavigation()">
          <template v-if="paging.page==n">
              <strong class="w3-button w3-border w3-green" :key="index">{{ n }}</strong>
          </template>
          <template v-else>
              <a class="w3-button w3-border" href="javascript:;" @click="fnPage(`${n}`)" :key="index">{{ n }}</a>
          </template>
      </template>
      <a href="javascript:;" v-if="paging.total_page_cnt > paging.end_page"
         @click="fnPage(`${paging.end_page+1}`)" class="next w3-button w3-border">&gt;</a>
      <a href="javascript:;" @click="fnPage(`${paging.total_page_cnt}`)" class="last w3-button w3-border">&gt;&gt;</a>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() { //변수생성
    return {
      requestBody: {}, //리스트 페이지 데이터전송
      list: {}, //리스트 데이터
      paging: {
        block: 0,
        end_page: 0,
        next_block: 0,
        page: 0,
        page_size: 0,
        prev_block: 0,
        start_index: 0,
        start_page: 0,
        total_block_cnt: 0,
        total_list_cnt: 0,
        total_page_cnt: 0,
      }, //페이징 데이터
      page: this.$route.query.page ? this.$route.query.page : 1,  // 기본페이지는 1페이지
      size: this.$route.query.size ? this.$route.query.size : 10, // 보여지는 리스트 사이즈 10개
      keyword: this.$route.query.keyword,
      paginavigation: function () { //페이징 처리 for문 커스텀
        let pageNumber = [] //;
        let start_page = this.paging.start_page;
        let end_page = this.paging.end_page;
        for (let i = start_page; i <= end_page; i++) pageNumber.push(i);
        return pageNumber;
      }
    }
  },
  mounted() {
    this.fnBoardList()
  },
  methods: {
    fnBoardList() {
      this.list = [
        {
            "board_no":1,
            "title": "제목1",
            "writer": "작성자1",
            "reg_date": "등록일시1",
            "upd_date": "수정일시1",
        },
        {
            "board_no":1,
            "title": "제목1",
            "writer": "작성자1",
            "reg_date": "등록일시1",
            "upd_date": "수정일시1",
        },
        {
            "board_no":1,
            "title": "제목1",
            "writer": "작성자1",
            "reg_date": "등록일시1",
            "upd_date": "수정일시1",
        }
      ]
    }
  }
}
</script>

3. 게시판에 대한 라우터 파일을 별도로 구성하여 포함시킨다.

    /router/board.js 를 생성하고 아래와 같이 추가 한다.   

import BoardList from '@/views/board/BoardList.vue'

export const BoardRouters = [
  {
    path: '/board/list',
    name: 'BoardList',
    component: BoardList,
  }
]

   그리고 해당 board.js 파일을 routers.js에 추가한다.

import { HomeRouters } from './home.js'
import { BoardRouters } from './board.js'

const routes = [
  ...HomeRouters,
  ...BoardRouters,
]

export default routes

 수정이 완료되면 화면에서 게시판 링크를 클릭하면 아래와 같은 화면이 조회된다.

이렇게 뜨면 반영이 잘 된 것이다.