2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-29

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

#環境
Vue v2系です。

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

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

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

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

vue add vuetify

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

#映画情報を取得
##axiosを入れる

npm install axios

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

##一覧を表示してみる

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
:point_up:ドキュメントはこちら

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?