axios＋Vue.js＋Qiita API v2를 이용해 자신의 투고 기사와 열람 건수(views)등을 일람 표시해 본다
axios＋Vue.js＋Qiita API v2를 이용해 자신의 투고 기사와 열람 건수(views)등을 일람 표시해 본다
사전 준비
개인 액세스 토큰 생성
新しくトークンを発行する 선택
0fbccbfa983a853d0bf8782f18decc2bbf2a3c46
발행 후 같은 화면으로 전환하면 이런 느낌이 듭니다.
axios＋Vue.js＋Qiita API v2를 이용한 투고 기사나 열람 건수의 일람 표시
코드 구성
qiita-my-list/
├ css/
│ └ style.css
├ js/
│ └ main.js
└ index.html
CSS는 조금 화면 디자인을 조정하고 있을 뿐이므로, 특히 신경쓰지 않고, index.html와 main.js의 내용을 중심으로 기재해 갑니다.
index.html의 내용
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Qiita My Article List</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app" class="container">
<h1>My Articles</h1>
<table>
<thead>
<tr>
<th>＃</th>
<th>タイトル</th>
<th>閲覧</th>
<th>いいね</th>
</tr>
</thead>
<tbody>
<tr v-for="(article, idx) in articles">
<td>{{idx + 1}}</td>
<td>{{article.title}}</td>
<td>{{article.page_views_count}}</td>
<td>{{article.likes_count}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
포인트
특히 포인트라고 할 정도의 것은 별로 없습니다만, vue.js 의 사용법의 방금 포함해 메모 정도에 기재해 둡니다.
v-for 에 의해, 후술하는 Vue 가 보관 유지하고 있는 기사 일람 정보 articles 의 건수분만큼 반복 tr 태그가 출력되도록 하고 있다. v-for 의 (article, idx) 부분은article 는 articles 의 요소(하나씩 기사)를 나타낸다 idx 는 0 로부터의 첨자(인덱스 번호)를 나타낸다 axios.min.js REST API를 사용할 때 유용한 HTTP 클라이언트 javascript vue.js는 MVVM의 디자인을 기반으로하는 자바 스크립트 프레임 워크입니다.main.js
(function(){
'use strict';
const http = axios.create({
baseURL: 'https://qiita.com/api/v2/'
});
http.interceptors.request.use((config) => {
config.headers.Authorization = "Bearer 0fbccbfa983a853d0bf8782f18decc2bbf2a3c46";
return config;
}, function (error) {
return Promise.reject(error);
});
var vm = new Vue({
el: '#app',
data: {
articles: []
},
mounted() {
// 投稿一覧を取得しても「page_views_count」が取得されない（null）ため、
// 取得記事に対して個別取得して「page_views_count」を取得する。
http.get("/authenticated_user/items")
.then(response => {
this.articles = [];
response.data.forEach(function(item){
http.get(`/items/${item.id}`)
.then(response => {
this.articles.push(response.data);
})
.catch(error => {console.log(error);});
}, this);
})
.catch(error => {console.log(error);});
}
});
})();
포인트
use strict 는 javascript 쓸 때 추천되고 있는 엄격 모드로, 뭔가 좋다고 하기 때문에 기술. baseURL는 axios를 이용하여 Qiita API를 여러 번 호출하기 때문에 기본 URL을 미리 정의합니다. config.headers.Authorization 는 QiitaAPI /authenticated_user/items 는 인증 중인 사용자의 게시물 목록을 작성 날짜와 시간의 내림차순으로 취득하는 API로, 이 API를 이용하기 위해 필요하므로 정의. page_views_count 를 취득할 수 없기 때문에, 개별 기사를 1개씩 취득해 page_views_count 를 표시할 수 있도록 하고 있다. 코드 세트
코드 세트는 GitHub에 올려 놓았습니다.
htps : // 기주 b. 코 m / 유 야마 구치 / 쿠타타 - my ぃ st
Reference
이 문제에 관하여(axios＋Vue.js＋Qiita API v2를 이용해 자신의 투고 기사와 열람 건수(views)등을 일람 표시해 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/You_name_is_YU/items/8c83e4c4c3f9c273b704텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
