zuzu578 / CoroNaVirus-

코로나바이러스 19 예방접종센터 data

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CoroNaVirus-

공공데이터활용지원센터_코로나19 예방접종센터 현황

참조 : https://www.data.go.kr/iim/api/selectAPIAcountView.do#/

vue.js 와 spring 을 이용하여 코로나 바이러스 예방접종센터 data 를 rest api 호출 후 json data format 으로 화면에 rendering 해주는 토이프로젝트

사용 방법

#스크린샷 2021-07-21 오후 12 41 14

해당 api 를 호출 받기 위해 api 인증 키를 공공데이터 포털 사이트에 로그인 후 발급받습니다. 해당 api 키를 입력하고 queryString 으로 json 데이터 포맷을 받습니다. (server / client ) 해당 api 데이터를 가공합니다.

page => 페이지 수 (ex: 1페이지에 10개의 데이터 뿌리기 , 2페이지에 그다음 10개의 데이터 뿌리기)

queryString 예시 :

https://api.odcloud.kr/api/15077603/v1/uddi:90bfb316-0caf-495b-92c0-c5cbc7bca1d9?page="+page+"&perPage=5&serviceKey=pIjdyg6yRnPqmwfTfG4m3TIDh518lq4lqoOgjavC5e1QPr3Vut5Dri2mQXpGfX5CbeusLqm9VNvju4fmvIkv0g%3D%3D

올바른 parameter 를 전달 하여 json data 를 가져옵니다.

통신 방법

1) vue.js 를 이용한 axios

스크린샷 2021-07-21 오후 12 44 01

2) 서버 단에서 data transaction 후 , vue에 전달 하는 방법 (map 형태로 return 합니다.)

스크린샷 2021-07-21 오후 12 45 08

# 3) 결과

스크린샷 2021-07-21 오후 12 45 43

4) 기능

페이징 을이용한 데이터 불러오기

About

코로나바이러스 19 예방접종센터 data


Languages

Language:Vue 61.2%Language:Java 38.8%