Vue 映画情報をTMDb APIを使って取得

はじめに

完成イメージはこんな感じ

はじめてVueを触ってみた。。。Angular以外jsフレームワーク知らんから、これからはVueを本格的に学んでいく！
ってことで、映画情報をVue（v2系）で取得してみた。#プログラミング #エンジニア転職 pic.twitter.com/UvEHYFiirR

— 高卒プログラマーげんと (@gento34165638) September 29, 2020

環境

Vue v2系です。

どうやら2020/09現在、vue v3系ではvuetifyが使えないようなので、あえてv2系にしました。。
https://github.com/vuetifyjs/vuetify-loader/issues/127

使えるようになってら、コメントより教えてください

別に「vuetifyなんて使わない」と言う方は、特にバージョンを気にしなくて良いかと！

vuetifyを入れる

コマンドプロンプトかターミナルより、プロジェクトvueの階層へ移動

vue add vuetify

TMDbのAPI keyを取得

【Ionic + Angular】TMDb APIで映画の一覧を取得して表示する
上記リンクのリンクより、取得できます。

映画情報を取得

axiosを入れる

npm install axios

まぁ映画上を取得するだけならaxiosを使う必要はなさそうですが、後々に検索機能とかもやってみたいので

一覧を表示してみる

Home.vue

<template>
    <v-container>
        <v-row>
            <v-col v-for="movie in movies" :key="movie.id">
                <v-card>
                    <v-img v-bind:src="'http://image.tmdb.org/t/p/w300/' + movie.poster_path"></v-img>
                    <v-card-title>{{ movie.title }}</v-card-title>
                    <v-card-subtitle>{{ movie.release_date }}</v-card-subtitle>
                    <v-card-text>{{ movie.overview }}</v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import axios from 'axios'

export default {
    name: 'Home',
    data() {
        return {
            movies: [],
         // 自分のkeyに置き換える
            apiKey: '***',
        }
    },
    methods: {
        getMovies() {
            // &language=jaで日本語に（日本語版がないものは空欄になるけど、、）
            axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=${this.apiKey}`)
            .then(response => {
                this.movies = response.data.results
                console.log(this.movies);
            })
            console.log(this.movies);

        },
    },
    created() {
        this.getMovies();
    }
}
</script>

https://developers.themoviedb.org/3/movies/get-now-playing
ドキュメントはこちら

現在上映中の映画を取得しました〜。