소개

이 기사는 『 2020년 프런트 엔드 마스터가 되고 싶으면 이 9 프로젝트를 만들 수 있다 』에서 소개되었다

첫
Build a movie search app using React (with hooks) = React를 사용하여 영화 검색 앱 만들기
라는 것을 Vue.js(Vue CLI)로 간이적으로 만들어 본 것입니다.

완성된 것

이 8 비트 스타일의 CSS는 NES.css을 사용했습니다!

API 정보

OMDb API이라는 영화 검색 API를 사용했습니다.

https://www.omdbapi.com/?apikey=[yourkey]&s=hero

s=[검색하고 싶은 문자열]에서 아래와 같은 json이 반환됩니다.



※영화의 포스터 화상도 취득할 수 있는 것이 편리합니다!

코드

Vue.js

vue-magic-grid 라고 하는 간단하게 타일 형태로 늘어놓아 주는 라이브러리를 이용합니다.

Movie.js

import MagicGrid from 'vue-magic-grid'
import Vue from 'vue'

let baseUrl = 'https://www.omdbapi.com/?apikey=[yourkey]'
export default {
  name: 'movie',
  data () {
    return {
      searchStr: '',
      results: []
    }
  },
  methods: {
    // クリック時発火
    onClick: function() {
      // 何も入力されていない場合はAPI叩かない
      if (this.searchStr === '') {
          return
      }
      // 検索用のURL作成
      baseUrl = baseUrl + '&s=' + this.searchStr
      // axiosで非同期通信
      this.axios.get(baseUrl)
      .then(response => {
          this.results = response.data.Search
          Vue.use(MagicGrid)
      })
    }
  }
}

HTML&CSS

v-model 를 사용하여 텍스트 상자 값(searchStr)을 양방향 데이터 바인딩합니다.
버튼으로 API를 두드려 결과를 표시합니다.

<div class="movie">
  <!-- 検索ボックス -->
  <div class="nes-field search-box">
      <input type="text" id="name_field" class="nes-input search-box__input" v-model="searchStr" placeholder="enter movie title" />
      <button type="button" class="nes-btn search-box__btn" @click="onClick">Search</button>
  </div>

  <magic-grid class="posts-list">
    <!-- 単体 -->
    <div class="posts-item nes-container with-title is-centered" v-for="(post, index) in results" :key="index">
      <p class="title">{{post.Title}}</p>
      <p>{{post.Year}}</p>
      <img :src="post.Poster" :alt="post.Title">
    </div>
  </magic-grid>
</div>

.search-box {
  display: flex;
  &__input {
    width: 80%;
  }
  &__btn {
    width: 20%;
  }
}
.posts-list {
  margin-top: 2.5rem;
}
.posts-item {
  img {
    width: 100%;
  }
}

끝

이런 느낌으로 영화 포스터 첨부로 표시할 수 있습니다!
코드는 이쪽