웹 초보자가 기분 전환 트리비아 버튼을 만들어 보았다 (Vue.js + Trivia API)
개요
평소에는 임베디드 소프트 엔지니어를 하고 있어 설계나 디버그가 생각하도록 진행하지 않고, 집중이 계속되지 않거나 뇌를 리프레쉬하고 싶은 것이 많이 있습니다.
따라서 뇌를 새로 고치기 위해 브라우저를 사용하면 기분 전환이 가능합니다.
"트리비아 버튼"
를 만들어 보았습니다.
데모
「기분 전환 트리비아 버튼」을 공개했습니다! 머리가 지쳤을 때나, 전철 이동중의 틈새 시간에 보면 기분 전환이 될까라고 생각 만들었습니다! 나는 프런트 엔드의 도 아마추어이기 때문에 HTML이 어색한 것은 눈에 띄게 주시면 기쁩니다. 여기에서 놀 수 있습니다 ☺ htps // t. 코 / bvl25 A D 9 #protoout 피 c. 라고 r. 코 m / nse C9 치와 — 마에푸@출창채원 티스트 (@kmaepu) May 20, 2020
여기 에서 사용할 수 있으므로 사용해보세요~
※2020/5/20 현재, 이스케이프 문자가 이상한 표시가 되어 있는 버그가 있습니다.
내용은 어떻게 되는가
구성
굉장합니다만, 다음과 같은 구성으로 되어 있습니다.
트리비아의 데이터는 「OPEN TRIVIA DATABASE」의 Trivia API에서 취득하여 이용하고 있습니다.
알고 계신 분도 계실지도 모르지만 도메인이 heroku가 아닙니다. 이것은 "freenom"이라는 무료로 도메인 취득을 할 수 있는 서비스를 이용하고 있습니다.
개발 환경
2020/5/20 현재의 개발 환경입니다.
- Windows10
- VS 코드 1.45.0
- Node.js v10.15.3
소스 코드 해설
<html>
<head>
<title>Refreshing trivia</title>
</head>
<body>
<p>Refreshing trivia</p>
<div id="app">
Question：<br>
<br>
{{ message }}<br>
<br>
Answer：<br>
{{ ans }}<br>
<br>
<button v-on:click="getData();">次のトリビア</button>
<br>
※ネット環境によりロードに数秒かかる事があります。
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '',
ans: ''
},
methods: {
getData: async function () {
const response = await axios.get('/api')
console.log(response.data);
this.message = response.data.results[0].question;
this.ans = response.data.results[0].correct_answer;
},
},
mounted: function () {
this.getData();
}
})
</script>
</body>
</html>
index.html에서는 Vue.js에서 버튼을 눌렀을 때의 처리를 구현하고 있습니다. 이렇게 함으로써 싱글 페이지 애플리케이션(SPA)을 실현하고 있습니다.
// expressライブラリを呼び出す
var express = require('express');
var app = express();
// axiosライブラリを呼び出す
const axios = require('axios');
// public というフォルダに入れられた静的ファイル（HTMLファイル・CSSファイル・ブラウザ上のJavaScriptファイル）はそのまま表示
app.use(express.static(__dirname + '/public'));
app.get('/api', async function(req, res) {
let response;
try {
// Trivia APIにリクエストして、データを取得する
response = await axios.get('https://opentdb.com/api.php?amount=1');
console.log(response.data);
} catch (error) {
console.error(error);
}
// 結果をJSONに割り当てる
res.json(response.data);
});
//app.listen(8080);
app.listen(process.env.PORT || 8080);
app.js에서는 Trivia API에 요청을 보내 데이터를 검색하고 index.html로 전달합니다.
문제 발각!
여기서 Trivia API의 버릇이 발견되었습니다. Trivia API에서 가져온 데이터를 그대로 이용하면 다음과 같이 이스케이프 문자가 변환되어 버립니다.
결론
트리비아는 영어 한정이므로 번역 기능이 있으면 기쁘네요. 이것이라도 영어 공부가 되는...? 에서 좋아합니다.
참고
Reference
이 문제에 관하여(웹 초보자가 기분 전환 트리비아 버튼을 만들어 보았다 (Vue.js + Trivia API)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kmaepu/items/94727bfbabfd0c3eba89텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
