국회도서관 자료 검색 vue.js 화면 스케치 #14

국회도서관 도서검색은 5개의 흐름으로 진행한다.

1. 검색어 입력
2. 검색어로 국회도서관 도서검색 API 호출
3. 도서검색된 결과 리스트 노출
4. 특정 도서 클릭
5. 클릭된 도서의 상세정보 노출

5개의 흐름을 3개의 페이지로 구성한다.

1. SearchMain.vue
   1. 검색 메인 페이지
   2. 검색어 입력 ▶ 1번 흐름 진행
   3. vue router 활용하여 페이지 호출
2. ResultList.vue
   1. 검색결과 리스트
   2. 검색어로 국회도서관 도서검색 API 호출 ▶ 2번 흐름 진행
   3. 도서검색된 결과 리스트 노출 ▶ 3번 흐름 진행
   4. axios 모듈 이용하여 API 호출
3. ResultDtl.vue
   1. 상세 도서 정보
   2. 특정 도서 클릭 ▶ 4번 흐름 진행
   3. 클릭된 도서의 상세정보 노출 ▶ 5번 흐름 진행
   4. modal 팝업으로 노출
   5. vuetify의 data tables component로 개발

화면 구성 스케치

• SearchMain.vue

국회도서관 자료검색 화면

• ResultList.vue

국회도서관 자료검색 화면

• ResultDtl.vue

국회도서관 자료검색 화면

마무리

다음에는 위 화면 스케치 대로 개발해 본다.

 

☞ vue, vue cli 설치는 이전 글 참고

https://yuneenelife.tistory.com/entry/vue-vue-cli-설치하고-버전-확인-12

vue, vue cli 설치하고 버전 확인 #12

 

☞ 국회도서관 자료검색 API 호출하는 django 설치는 이전 글 참고

https://yuneenelife.tistory.com/entry/API-Server-django-python-Framework-설치-1

API Server django python Framework 설치 #1