Vue 영화 정보를 TMDb API를 사용하여 획득

소개



완성 이미지는 이런 느낌

처음 Vue를 만져 보았다. . . Angular 이외 js 프레임 워크 모르기 때문에, 이제부터는 Vue를 본격적으로 배워 간다! 라는 것으로, 영화 정보를 Vue(v2계)로 취득해 보았다. #프로그래밍 #엔지니어 피 c. 라고 r. 코 m / ゔぇ HY 후이 r — 고졸 프로그래머 겐토 (@gento34165638) September 29, 2020


환경



Vue v2 시스템입니다.



아무래도 2020/09 현재, v3계에서는 vuetify를 사용할 수 없기 때문에, 굳이 v2계로 했습니다. .

htps : // 기주 b. 코 m / ゔ 에치 fyjs / ゔ 에치 fy ぉ 아데 r / 이스에 s / 127



사용할 수 있게 되면 댓글에서 알려주세요



별로 「vuetify는 사용하지 않는다」라고 하는 분은, 특히 버전을 신경쓰지 않아도 좋을까!



vuetify 넣기



명령 프롬프트 또는 터미널에서 프로젝트 vue의 계층 구조로 이동



vue add vuetify


TMDb의 API 키 가져오기



【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>



ぇぺぺrs. 그래도 ぃぃえ db. 오 rg / 3 / moe s / ge t-w pp y y g

문서는 이쪽



현재 상영중인 영화를 받았습니다~.


좋은 웹페이지 즐겨찾기