【Vue.js】NHK 프로그램표 API로 방송중인 프로그램을 표시한다
소개
요전날에 투고한 NHK 프로그램 표 API 사용 방법 를 근거로, Web 페이지상에 방송중의 프로그램을 표시해 보았습니다.
프런트 엔드의 지식은 깔끔하기 때문에 처음에는 일반 Javascript로 쓰려고 생각했지만 조금만 도전해 보자 ...라는 것으로 Vue.js를 처음 사용해 보았습니다.
망설이는 코드라고 생각합니다만, 큰 눈에 봐 주시면 고맙습니다.
코드
HTML
HTML
nhk_api.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<link rel="stylesheet" href="./nhk_api.css">
<title>NHKで放送中の番組</title>
<meta name="description" content="NHK番組表APIを使って、現在放送中の番組を表示しています。">
<meta name="author" content="nkojima">
</head>
<body>
<div class="container" id="app">
<h1 class="text-center">NHK総合1で放送中の番組</h1>
<div class="columns medium-4">
<div class="card">
<div class="card-divider">
<span class="status">前の番組</span>
</div>
<div class="card-section">
<p><span class="title">{{results.previous_title}}</span></p>
<p>{{results.previous_subtitle}}</p>
</div>
</div>
</div>
<div class="columns medium-4">
<div class="card">
<div class="card-divider">
<p><span class="status">現在放送中の番組</span></p>
</div>
<div class="card-section">
<p><span class="title">{{results.present_title}}</span></p>
<p>{{results.present_subtitle}}</p>
</div>
</div>
</div>
<div class="columns medium-4">
<div class="card">
<div class="card-divider">
<span class="status">次の番組</span>
</div>
<div class="card-section">
<p><span class="title">{{results.following_title}}</span></p>
<p>{{results.following_subtitle}}</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./nhk_api.js"></script>
</body>
</html>
자바스크립트
XMLHttpRequest가 아니라, axios 라는 것이 일반적으로 사용되고 있는 것 같았기 때문에, 거기에 따라 써 보았습니다. nhk_api.js
new Vue({
el: '#app',
data: {
results: []
},
created() {
axios.get("http://api.nhk.or.jp/v2/pg/now/130/g1.json?key={あなたのAPIキー}")
.then(response => {
this.results = {
previous_title: response.data.nowonair_list.g1.previous.title,
previous_subtitle: response.data.nowonair_list.g1.previous.subtitle,
present_title: response.data.nowonair_list.g1.present.title,
present_subtitle: response.data.nowonair_list.g1.present.subtitle,
following_title: response.data.nowonair_list.g1.following.title,
following_subtitle: response.data.nowonair_list.g1.following.subtitle
}
})
}
});
CSS
nhk_api.css
span.status {
font-weight:bold;
font-size:x-large;
}
span.title {
font-weight:bold;
}
실제 페이지
요약
[Vue warn]: Property or method "〇〇〇" is not defined on the instance but referenced during render. 라는 에러가 나오더라도, 원인이 전혀 모르고 우왕좌왕했습니다. Reference
이 문제에 관하여(【Vue.js】NHK 프로그램표 API로 방송중인 프로그램을 표시한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nkojima/items/143c08cdce061ae187b4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
