vue-cli로 개발하는 연습?의 일환으로 매우 간단한 영화 정보 검색 사이트를 만들어 보았으므로 프런트 엔드의 컴퍼넌트의 구축에 대해 정리합니다.
디자인 프레임 워크로 Vuetify를 사용하고 있습니다.

개발 환경

・프런트 엔드
npm:6.12.1
node:12.13.1
yarn:1.21.1
Vue-cli:4.1.1
Vuetify:2.2.3

참고

무료로 영화 정보를 취득하는 API 「TMDb」의 사용법
【vue.js】Vuefity 마스터하기(1)

애플리케이션의 움직임에 대해

화면에 액세스한 직후에는 검색란이 표시됩니다.



셀렉트 박스에 포커스를 넣으면 최근 상영되고 있는 영화의 타이틀을 선택할 수 있게 되어 있습니다.
이 선택 상자의 데이터는 화면을 그릴 때 백엔드에 대한 API 요청으로 검색됩니다.



시험에 「조커」를 선택하면, 오른쪽 하단의 「SEARCH」라고 쓰여져 있는 검색 버튼이 유효화되어 눌러 할 수 있게 됩니다.



검색 버튼을 누르면 백엔드에 대한 요청이 이루어지며 선택한 제목과 일치하는 영화 정보를 화면에 그립니다.
* 화상이 등록되어 있지 않은 영화는 디폴트용의 화상을 설정해, 타이틀의 말미에 (No Image)라고 추기하고 있습니다.



선택 상자에 저장된 타이틀뿐만 아니라 임의로 입력한 타이틀에서도 검색할 수 있습니다.
시험에 "123"을 입력하고 검색 버튼을 누르십시오.

「123」에 합치하는 영화의 정보를 모두 취득해 옵니다.
* 화상이 등록되어 있지 않은 영화는 디폴트용의 화상을 설정해, 타이틀의 말미에 (No Image)라고 추기하고 있습니다.

구성 요소 정보

화면을 구성하는 구성 요소는 다음과 같습니다.

주요 구성 요소

전체 화면의 구성 요소입니다.

검색 필드의 카드는 CardMovieSearch 구성 요소라는 하위 구성 요소로 구성됩니다.
셀렉트 박스의 값의 get, set를 모두 부모 컴퍼넌트로 체크하고 싶기 때문에 셀렉트 박스의 태그(v-combobox 태그)만 slot로 아이 컴퍼넌트로 전달하고 있습니다.

검색된 영화 정보는 CardMovieInfo 컴포넌트라는 하위 컴포넌트로 출력됩니다.

  <v-layout text-center wrap>
    <v-flex xs12 v-if="errorFlag">
      <v-alert type="error">
        {{ errorMessage }}
      </v-alert>
    </v-flex>

    <v-flex mb-5 xs12>
      <CardMovieSearch
        :disabledFlag="noInputFlag"
        @searchEvent="showMovieInfo($event)"
      >
        <template>
          <v-combobox
            v-model="getSelectData"
            :items="getTitlesList"
            label="Input Movie Title"
            outlined
            dense
            small-chips
          />
        </template>
      </CardMovieSearch>
    </v-flex>

    <v-flex xs12 v-if="searchFlag">
      <CardMovieInfo
        v-for="movie in getMoviesData"
        v-bind:key="movie.id"
        :movieData="movie"
      />
    </v-flex>
  </v-layout>

CardMovieSearch 구성 요소

검색 필드의 구성 요소입니다.
v-btn 태그의 click 이벤트는 axios에 의한 GET 요청을 처리합니다.
GET 요청에 성공하면 CardMovieInfo 구성 요소의 표시 플래그를 true로 설정합니다.

  <v-card class="mx-auto text-center" color="gray" dark outlined>
    <v-card-title class="text-right">
      <div class="display-1 font-weight-thick">Movie Search!</div>
    </v-card-title>
    <v-card-text>
      <div class="display-1 font-weight-thick">Movie Info Search Servise</div>
      <v-row>
        <v-col cols="12">
          <slot/>
        </v-col>
      </v-row>
      <v-card-actions>
        <v-spacer/>
        <v-btn
         class="success"
         large="true"
         color="orange"
         disabled="true"
         text
         @click="startSearch()"
        >
         Search!
         <v-icon dark right>mdi-database-search</v-icon>
        </v-btn>
      </v-card-actions>
    </v-card-text>
  </v-card>

CardMovieInfo 구성 요소

각 영화 정보를 출력하기 위한 컴포넌트입니다.
v-img 태그에서는 TMDB의 화상을 출력하기 위해서 화상 출력용의 URL도 src 속성에 기재하고 있습니다.

  <v-card class="mx-auto" max-width="400" hover>
    <v-img
      v-if="movieData.poster_path !== null"
      class="white--text align-end"
      height="200px"
      :src="'https://image.tmdb.org/t/p/original'+movieData.poster_path"
    >
      <v-card-title>{{ movieData.title }}</v-card-title>
    </v-img>
    <v-img
      v-else
      class="white--text align-end"
      height="200px"
      src="./../../assets/img/camera.png"
      alt="イメージポスター画像"
    >
      <v-card-title>{{ movieData.title }}</v-card-title>
    </v-img>

    <v-card-subtitle class="pb-0">Release: {{ movieData.release_date }}</v-card-subtitle>

    <v-card-text class="text--primary">
      <div>Original Title: {{ movieData.original_title }}</div>
      <div>{{ movieData.overview }}</div>
    </v-card-text>

    <v-card-actions>
      <v-btn color="orange" text>detail</v-btn>
    </v-card-actions>
  </v-card>

끝에

컴퍼넌트의 구축에 대해서는 이상입니다.
Vuetify를 이용한 덕분에 CSS를 사용하지 않고 최소한의 디자인 화면을 만들 수있었습니다.
재이용할 수 있는 컴퍼넌트를 만들면 프로젝트를 넘어도 사용할 수 있기 때문에, 화면 설계시에는 공통으로 이용할 수 있는 개소가 없는지 주의해 가고 싶습니다.