Vue.js + axios에서 Qiita API v2를 두드려 게시물 얻기
검증 환경
gulp에서 트랜스파일러를 사용한 상태에서 검증하고 있습니다.
공식 링크
axios 설치
npm install axios --save
작성 화면
로드 버튼을 눌러 링크가 있는 게시물 제목과 태그를 가져옵니다.
소스 코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Qiita Posts | Vue.js + axios test</title>
<link rel="stylesheet" href="/css/main.css">
<script src="https://unpkg.com/vue"></script>
<script src="/js/main.js" charset="utf-8" async></script>
</head>
<body>
<section id="qiita-posts">
<h1>Qiita Posts</h1>
<button v-on:click="request">読み込み</button>
<hr>
<ul>
<li v-for="post in posts" >
<span class="tag" v-for="tag in post['tags']">{{ tag['name'] }}</span>
<a v-bind:href="post['url']" target="_blank" rel="noopener noreferrer">
<div>{{ post['title'] }}</div>
</a>
</li>
</ul>
</section>
</body>
</html>
main.scssbody {
padding: 0 10px;
}
#qiita-posts {
h1 {
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: bold;
}
button {
margin-bottom: 10px;
padding: 4px 10px;
color: #fff;
font-size: 0.75rem;
background: #325d7c;
border: none;
border-radius: 2px;
box-shadow: 0 4px 0 darken( #325d7c, 4% );
cursor: pointer;
}
li {
margin-bottom: 15px;
line-height: 1.5;
.tag {
display: inline-block;
margin: 0 1px 6px;
padding: 2px 6px;
color: #fff;
font-size: 0.75rem;
background: #7daaca;
}
a {
color: darken( #7daaca, 24% );
}
}
}
main.js'use strict';
import axios from 'axios';
let vm = new Vue( {
el: '#qiita-posts',
data: {
posts: void(0),
},
methods: {
request: () => {
axios.get( 'https://qiita.com/api/v2/users/[QiitaユーザID]/items' )
.then( ( res ) => {
vm.posts = res.data;
} )
.catch( ( res ) => {
console.error( res );
} );
}
},
} );
검색된 데이터 구조에 대한 자세한 내용은 Qiita API v2 문서 - 게시물을 참조하십시오.
결론
Vue.js의 공부 드디어에 실장해 보았습니다만, axios와 조합하면 Ajax 주위의 처리가 너무 간단해서 놀라울 뿐입니다.
Reference
이 문제에 관하여(Vue.js + axios에서 Qiita API v2를 두드려 게시물 얻기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/junsan50/items/af751532e6eeb1e2a987
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm install axios --save
로드 버튼을 눌러 링크가 있는 게시물 제목과 태그를 가져옵니다.
소스 코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Qiita Posts | Vue.js + axios test</title>
<link rel="stylesheet" href="/css/main.css">
<script src="https://unpkg.com/vue"></script>
<script src="/js/main.js" charset="utf-8" async></script>
</head>
<body>
<section id="qiita-posts">
<h1>Qiita Posts</h1>
<button v-on:click="request">読み込み</button>
<hr>
<ul>
<li v-for="post in posts" >
<span class="tag" v-for="tag in post['tags']">{{ tag['name'] }}</span>
<a v-bind:href="post['url']" target="_blank" rel="noopener noreferrer">
<div>{{ post['title'] }}</div>
</a>
</li>
</ul>
</section>
</body>
</html>
main.scssbody {
padding: 0 10px;
}
#qiita-posts {
h1 {
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: bold;
}
button {
margin-bottom: 10px;
padding: 4px 10px;
color: #fff;
font-size: 0.75rem;
background: #325d7c;
border: none;
border-radius: 2px;
box-shadow: 0 4px 0 darken( #325d7c, 4% );
cursor: pointer;
}
li {
margin-bottom: 15px;
line-height: 1.5;
.tag {
display: inline-block;
margin: 0 1px 6px;
padding: 2px 6px;
color: #fff;
font-size: 0.75rem;
background: #7daaca;
}
a {
color: darken( #7daaca, 24% );
}
}
}
main.js'use strict';
import axios from 'axios';
let vm = new Vue( {
el: '#qiita-posts',
data: {
posts: void(0),
},
methods: {
request: () => {
axios.get( 'https://qiita.com/api/v2/users/[QiitaユーザID]/items' )
.then( ( res ) => {
vm.posts = res.data;
} )
.catch( ( res ) => {
console.error( res );
} );
}
},
} );
검색된 데이터 구조에 대한 자세한 내용은 Qiita API v2 문서 - 게시물을 참조하십시오.
결론
Vue.js의 공부 드디어에 실장해 보았습니다만, axios와 조합하면 Ajax 주위의 처리가 너무 간단해서 놀라울 뿐입니다.
Reference
이 문제에 관하여(Vue.js + axios에서 Qiita API v2를 두드려 게시물 얻기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/junsan50/items/af751532e6eeb1e2a987
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Qiita Posts | Vue.js + axios test</title>
<link rel="stylesheet" href="/css/main.css">
<script src="https://unpkg.com/vue"></script>
<script src="/js/main.js" charset="utf-8" async></script>
</head>
<body>
<section id="qiita-posts">
<h1>Qiita Posts</h1>
<button v-on:click="request">読み込み</button>
<hr>
<ul>
<li v-for="post in posts" >
<span class="tag" v-for="tag in post['tags']">{{ tag['name'] }}</span>
<a v-bind:href="post['url']" target="_blank" rel="noopener noreferrer">
<div>{{ post['title'] }}</div>
</a>
</li>
</ul>
</section>
</body>
</html>
body {
padding: 0 10px;
}
#qiita-posts {
h1 {
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: bold;
}
button {
margin-bottom: 10px;
padding: 4px 10px;
color: #fff;
font-size: 0.75rem;
background: #325d7c;
border: none;
border-radius: 2px;
box-shadow: 0 4px 0 darken( #325d7c, 4% );
cursor: pointer;
}
li {
margin-bottom: 15px;
line-height: 1.5;
.tag {
display: inline-block;
margin: 0 1px 6px;
padding: 2px 6px;
color: #fff;
font-size: 0.75rem;
background: #7daaca;
}
a {
color: darken( #7daaca, 24% );
}
}
}
'use strict';
import axios from 'axios';
let vm = new Vue( {
el: '#qiita-posts',
data: {
posts: void(0),
},
methods: {
request: () => {
axios.get( 'https://qiita.com/api/v2/users/[QiitaユーザID]/items' )
.then( ( res ) => {
vm.posts = res.data;
} )
.catch( ( res ) => {
console.error( res );
} );
}
},
} );
Vue.js의 공부 드디어에 실장해 보았습니다만, axios와 조합하면 Ajax 주위의 처리가 너무 간단해서 놀라울 뿐입니다.
Reference
이 문제에 관하여(Vue.js + axios에서 Qiita API v2를 두드려 게시물 얻기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/junsan50/items/af751532e6eeb1e2a987텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
