#はじめに
完成イメージはこんな感じ
はじめてVueを触ってみた。。。Angular以外jsフレームワーク知らんから、これからはVueを本格的に学んでいく!
— 高卒プログラマーげんと (@gento34165638) September 29, 2020
ってことで、映画情報をVue(v2系)で取得してみた。#プログラミング #エンジニア転職 pic.twitter.com/UvEHYFiirR
#環境
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を使う必要はなさそうですが、後々に検索機能とかもやってみたいので
##一覧を表示してみる
<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
ドキュメントはこちら
現在上映中の映画を取得しました〜。