vue + jpa project (24) - 공통코드 연관(join)조회 프론트

공통코드 관련 지난번 장까지는 전혀 연관이 없는 각각의 테이블에 대해서 조회를 했었지만

이번 장부터는 서로 연관 관계를 가지는 테이블이라는 점을 가지고 접근을 하려고 한다.

 

이번장에서는 테스트를 위해서 백엔드 보다 프론트엔드를 먼저 시작하겠다. 

백엔드가 상황에 따라서 소스가 계속 수정이 되어야 해서 테스트가 가능하도록 프론트를 먼저 개발하겠다.

 

 

1. 코드 리스트 페이지 생성

   코드 쪽이어서 /views/code/CodeJoinList.vue 로 생성하겠다.

   100% 완벽하지 않겠지만 일단 이것으로도 테스트를 하기엔 충분할 것이다. (검색/버그 등 추후 수정)

<template>
  <div class="board-list">
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnDetailJoinList()">상세기준리스트</button>&nbsp;
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnGroupJoinList()">그룹기준리스트</button>&nbsp;
    </div>
    <table class="w3-table-all">
      <thead>
      <tr>
        <th>No</th>
        <th>그룹코드</th>
        <th>그룹코드명</th>
        <th>상세코드값</th>
        <th>상세코드명</th>
        <th>순번</th>
        <th>사용여부</th>
        <th>그룹등록일시</th>
        <th>그룹수정일시</th>
        <th>상세등록일시</th>
        <th>상세수정일시</th>
      </tr>
      </thead>
      <tbody>

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

        <tr v-else-if="pageFlag === 'A'" v-for="(row, no) in list" :key="no" >
          <td>{{ (this.page - 1)*size + (no+1) }}</td>
          <td>{{ row.group_code }}</td>
          <td>{{ row.code_group_dto.group_name }}</td>
          <td>{{ row.code_value }}</td>
          <td><a v-on:click="fnView(`${row.group_code}`, `${row.code_value}`)">{{ row.code_name }}</a></td>
          <td>{{ row.sort_seq }}</td>
          <td>{{ row.use_yn }}</td>
          <td>{{ row.code_group_dto.reg_date }}</td>
          <td>{{ row.code_group_dto.upd_date }}</td>
          <td>{{ row.reg_date }}</td>
          <td>{{ row.upd_date }}</td>
        </tr>

        <tr v-else-if="pageFlag === 'B'" v-for="(row, num) in list" :key="num">
          <td>{{ (this.page - 1)*size + (num+1) }}</td>
          <td>{{ row.group_code }}</td>
          <td>{{ row.group_name }}</td>
          <td>{{ row.code_value }}</td>
          <td><a v-on:click="fnView(`${row.group_code}`, `${row.code_value}`)">{{ row.code_name }}</a></td>
          <td>{{ row.sort_seq }}</td>
          <td>{{ row.use_yn }}</td>
          <td>{{ row.reg_date }}</td>
          <td>{{ row.upd_date }}</td>
          <td>{{ row.detail_reg_date }}</td>
          <td>{{ row.detail_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 {
      pageFlag: 'A',
      requestBody: {}, //리스트 페이지 데이터전송
      list: {}, //리스트 데이터
      groupCode : this.$route.query.groupCode ? this.$route.query.groupCode : '',
      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개
      search_key: this.$route.query.search_key ? this.$route.query.search_key : '',
      search_value: this.$route.query.search_value ? this.$route.query.search_value : '',
      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.fnDetailJoinList()
  },
  methods: {
    fnDetailJoinList() {
      
      this.pageFlag = 'A';
      this.list = {};

      this.requestBody = { // 데이터 전송
        useYn : 'Y',
        page: this.page,
        size: this.size
      }

      this.$axios.get(this.$serverUrl + "/codedetails/detail_join_list", {
        params: this.requestBody,
        headers: {}
      }).then((res) => {

        this.list = res.data.data
        this.paging = res.data.pagination

      }).catch((err) => {
        if (err.message.indexOf('Network Error') > -1) {
          alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
        }
      })
    },
    fnView(groupCode, codeValue) {
      
    },
    fnWrite(groupCode) {
      
    },
    fnPage(n) {
      if(this.page !== n) {
        this.page = n
      }

      if(this.pageFlag === 'A') {
        this.fnDetailJoinList()
      } else {
        this.fnGroupJoinList()
      }
    },

    fnGroupJoinList() {

      this.pageFlag = 'B';
      this.list = {};

      this.requestBody = { // 데이터 전송
        useYn : 'Y',
        page: this.page,
        size: this.size
      }

      this.$axios.get(this.$serverUrl + "/codegroups/group_join_list", {
        params: this.requestBody,
        headers: {}
      }).then((res) => {

        this.list = res.data.data
        this.paging = res.data.pagination

      }).catch((err) => {
        if (err.message.indexOf('Network Error') > -1) {
          alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
        }
      })
    }
  }
}
</script>

다음 장에 나오는 두가지 패턴에 대한 테스트를 모두 하기 위해서 상단에 버튼을 두개를 두었다. 

하나는 상세코드를 기준으로 한 리스트 조회이고, 또 하나는 그룹코드를 기준으로 한 리스트이다.

 

대략 짐작이 갈 것이다.

첫번째는 상세리스트를 뽑되 맵핑되는 그룹코드를 같이 가져오자는 것이고,

두번째는 그룹리스트를 뽑되 맵핑되는 상세코드를 같이 가져오는 것이다. 

단순 기준이 달라지는 것도 있겠지만 첫번째는 그냥 Inner Join의  형태이고, 두번째는 Outer Join의 형태로 약간 다르다.

 

나중에 백엔드까지 완료되면 이해가 될 것이다.

 

 

2. code 라우터 파일 수정

    code.js 파일을 아래와 같이 추가한다. 

 

... 중략
import CodeJoinList  from '@/views/code/CodeJoinList.vue
... 중략

   ,
  {
    path: '/codejoin/list',
    name: 'CodeJoinList',
    component: CodeJoinList,
    beforeEnter: axios.requireAuth()
  },
  
... 중략

 

3. 메뉴바 뷰 수정

  menubar.vue를 아래와 같이 수정한다.

... 중략
    <router-link to="/codegroup/list">코드그룹</router-link> |
    <router-link to="/codejoin/list">코드리스트</router-link>
... 중략

 

 

소스 수정이 완료되었다면 대략적인 화면이 아래와 같이 나올 것이다. 

물론 일단 주석 처리를 해서 나온 모양이다.

일단 프론트는 여기서 마무리를 하고 다음 장에서는 어려운 부분인 백엔드 부분을 진행하겠다.