[vue] 우정국 api를 활용한 주소찾기

우정국 api의 경우 return은 jsonp형으로 넘겨주고,

데이터 자체는 검색형의 경우 json과 xml을 모두 지원하지만 팝업형의 경우 xml밖에 지원하지 않기 때문에 다운받은 모듈을 적극 활용했다.

데이터만 넘겨받기 때문에 ui를 직접 설계해야 한다는 부분에서 굉장히 귀찮고, 헤멘 부분이 없지 않아 있음

특히 pagination 부분..

[ HTML ]

<template>
<div>
  <div style="">
	<div>
	  <input type="text" v-model="keyword" required style="" @keydown.enter="serchAddr">
	  <a class="button" @click="serchAddr"> 검색하기 </a>
	</div>
    
	<div class="">
	  지번 주소 검색 예) 가산동 12-3<br>
	  도로명 주소 검색 예) 남부순환로, 가산디지털2로<br>
	  건물명 검색 예) 전쟁기념관, 스타타워<br>
	</div>
  </div>
  
  {{parseInt(tot/countPerPage)}}<br>
  {{tot%countPerPage}}<br>
  pageScope : {{pageScope}}<br>
  pagination : {{pagination}}<br>
  current : {{currentPage}}<br>
  next : {{nextBtn}}<br>
  prev : {{prevBtn}}<br>
  
  <table class="">
	<tbody>
	  <tr v-for="item in serchResult" :key="item.roadAdd[0]">
		<th style="">{{item.zip[0]}}</th>
		<!-- 클릭 시 닫고, 저장 -->
		<td style="">
		  [도로명] <br>{{item.roadAdd[0]}}<br>
		  [지 번] <br>{{item.jibun[0]}}
		</td>
	  </tr>
	</tbody>
  </table>

  <!-- 검색 리스트 테이블 -->
  <div class="" v-if="serchResult">
	<table>
      <tbody>
      	<tr>
		  <th>
            <a v-if="prevBtn" @click="changePageDiv('prev')">◁</a>&nbsp;&nbsp;
          </th>
          
		  <th v-for="n in countPerPage" :key='n'>
			<div v-if="index(n) <= pagination">
			  <div v-if="currentPage==index(n)">
              	<a style='font-weight:bold;color:blue;font-size:15px;'>{{ index(n) }}</a>
                &nbsp;&nbsp;
              </div>
			  <div v-else>
              	<a @click="goPageDiv(index(n))">{{ index(n) }}</a>
                &nbsp;&nbsp;
              </div>
			</div>
		  </th>

		  <th>
          	<a v-if="nextBtn" @click="changePageDiv('next')"> ▷ </a>
          </th>
        </tr>
      </tbody>
    </table>
  </div>
  
</div>
</template>

 

[ SCRIPT ]

<script>
import axios from 'axios';
import xmlParse from 'xml-to-json-promise';

export default {
data() {
  return {
	total: '',
	keyword: '',
	serchData: '',
	prevBtn: false,
	nextBtn: true,
	pagination: 0, //페이지네이션 페이지 개수 ex)total=100, perPage=10 이면 페이지네이션은 10페이지
	pageScope: 0, //페이지 범위, 1~10, 11~20.. 등 MIN값(0, 10, 20...) 첫번째 index는 1, 11, 21...
	currentPage : 0, //현재 페이지네이션 위치
	countPerPage: 10, //max=100
  }
},

methods: {
  index(page) {
	return this.pageScope+page;
  },
  
  serchAddr() {
	this.currentPage = 1;
	this.pageScope=0,
	this.getAddr();
  },
  
  // 페이지 이동
  goPageDiv(page){
	this.currentPage = page;
	this.getAddr();
  },
  
  // 페이지네이션 페이지 변경
  changePageDiv(type){
	if(type=='prev') this.pageScope -= this.countPerPage;
	else if(type='next') this.pageScope += this.countPerPage;
	this.currentPage = this.pageScope+1;
	this.getAddr();
  },

  setPageBtn() {
    // 다음페이지 버튼 set
	if(this.pagination-this.pageScope<11 || this.pagination<11)
	  this.nextBtn=false;
	else
      this.nextBtn=true;

	// 이전페이지 버튼 set
	if(this.currentPage>10)
	  this.prevBtn=true;
	else
      this.prevBtn=false;
  }

  // 주소 검색
  getAddr() {
	if (this.keyword.length<2) {
	  this.$swal("안내", "검색어 2자이상부터 검색 가능합니다.", "info");
	  return;
 	}

	var data = {
	  'keyword' : this.keyword,
	  'currentPage' : this.currentPage,
	  'countPerPage': this.countPerPage,
	  'confmKey': 발급받은 API Key,
	}

	this.$jsonp(`http://www.juso.go.kr/addrlink/addrLinkApiJsonp.do`, data)
	.then( ({returnXml}) => {
	  xmlParse.xmlDataToJSON(returnXml).then( ({results}) => {
	  	var check = results.common[0];
	  	if(check.errorCode[0] != '0') {
		  this.$swal('안내', check.errorMessage[0], 'warning');
	  	}
      	else {
		  this.serchResult = results.juso;
		  this.total = check.totalCount[0];
		  this.pagination = parseInt(this.total/this.countPerPage);
		  if(this.total%this.countPerPage)
            this.pagination += 1;
		  this.setPageBtn();
	  	}
	  });
	})
  	.catch(err => {
	  console.warn("Error : ", err);
	  throw err;
  	});
  }, // 주소검색 end
}// method end
}// export end
</script>