Vue.js 및 axios로 API에서 데이터를 검색하고 표시
이 기사에서 할 일
정적 HTML에서 검색 조건을 지정하여 API에 연결하여 데이터를 검색하고 표시합니다. 기사에서는 손쉽게 로컬 PC에 저장한 HTML에서 API에 연결합니다.
연결할 API
사용자 ID를 지정하고 쿼리하면 사용자 이름과 타임 스탬프를 JSON으로 반환하는 API를 AWS에 준비했습니다.
이전에 쓴 이쪽의 기사
Raspberry Pi와 PasoRi에서 Felica의 NFC 태그를 읽어보십시오.
계속해서 터치 정보를 IFTTT 대신 AWS DynamoDB에 축적하도록 변경. 사용자 정보를 끌어 이름과 최근 터치 시간을 Rambda와 API Gateway를 통해 얻을 수 있습니다.
이쪽에 대해서는 다시 기사로 할 예정입니다.
HTML 소스
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NFC demo</title>
</head>
<body>
<div id="app">
<input v-model="userid" placeholder="User ID">
<button v-on:click="query">Query</button><br>
<dl v-if="info">
<dt>ID</dt><dd>{{info.id}}</dd>
<dt>Name</dt><dd>{{info.name}}</dd>
<dt>Date</dt><dd>{{info.timestamp|dateformat}}</dd>
</dl>
<div v-else="info">No touch data.</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
JavaScript 소스
app.jsconst apiUrl = "https://********.********.amazonaws.com/default/nfcDemoGetTouchTime"
const apiKey = "{APIキー}"
const config = {headers: {
'Content-Type': 'application/json',
'x-api-key': apiKey
}}
Vue.filter('dateformat', function(value){
if (!value) return ''
var zp = function(num){
return (num < 10) ? '0'+ num: num
}
var dt = new Date(value * 1000)
var dtstr = dt.getFullYear() + '-' + zp(dt.getMonth() + 1) + '-' + zp(dt.getDate()) + ' '
+ zp(dt.getHours()) + ':' + zp(dt.getMinutes())
return dtstr
})
var app = new Vue({
el: "#app",
data:{
info: null,
userid: null
},
methods:{
query: function(event){
var querydata = {'id': this.userid}
axios
.post(apiUrl, querydata, config)
.then(response => {
this.info = response.data
console.log(this.info)
})
.catch(error => console.log(error))
}
}
})
움직여 보자
index.html과 app.js를 적절한 폴더에 저장하고 브라우저에서 index.html을 엽니 다.
사용자 ID를 양식에 입력하고 Query 버튼을 누르면 ...
API에서 JSON으로 쿼리 결과가 반환됩니다.
{"id": "test1", "name": "\u30c6\u30b9\u30c8\u30e6\u30fc\u30b6\u30fc\uff11", "timestamp": 1557545262.413307}
문의 결과가 화면에 반영되었습니다.
참고한 문서
Vue.js는 일본어판의 공식 문서가 충실하기 때문에 여러가지 도움이 됩니다.
axios를 사용하여 API 사용
필터 — Vue.js
남은 과제
API 키가 소스에서 원형으로 보이므로 외부에서 호스팅할 때 Cognito로 인증하거나 액세스 제어 메커니즘이 필요합니다.
Reference
이 문제에 관하여(Vue.js 및 axios로 API에서 데이터를 검색하고 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kikuyan8540/items/d0adcdc4016be73c90ad
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NFC demo</title>
</head>
<body>
<div id="app">
<input v-model="userid" placeholder="User ID">
<button v-on:click="query">Query</button><br>
<dl v-if="info">
<dt>ID</dt><dd>{{info.id}}</dd>
<dt>Name</dt><dd>{{info.name}}</dd>
<dt>Date</dt><dd>{{info.timestamp|dateformat}}</dd>
</dl>
<div v-else="info">No touch data.</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
const apiUrl = "https://********.********.amazonaws.com/default/nfcDemoGetTouchTime"
const apiKey = "{APIキー}"
const config = {headers: {
'Content-Type': 'application/json',
'x-api-key': apiKey
}}
Vue.filter('dateformat', function(value){
if (!value) return ''
var zp = function(num){
return (num < 10) ? '0'+ num: num
}
var dt = new Date(value * 1000)
var dtstr = dt.getFullYear() + '-' + zp(dt.getMonth() + 1) + '-' + zp(dt.getDate()) + ' '
+ zp(dt.getHours()) + ':' + zp(dt.getMinutes())
return dtstr
})
var app = new Vue({
el: "#app",
data:{
info: null,
userid: null
},
methods:{
query: function(event){
var querydata = {'id': this.userid}
axios
.post(apiUrl, querydata, config)
.then(response => {
this.info = response.data
console.log(this.info)
})
.catch(error => console.log(error))
}
}
})
{"id": "test1", "name": "\u30c6\u30b9\u30c8\u30e6\u30fc\u30b6\u30fc\uff11", "timestamp": 1557545262.413307}
Reference
이 문제에 관하여(Vue.js 및 axios로 API에서 데이터를 검색하고 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kikuyan8540/items/d0adcdc4016be73c90ad텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
