Vue.js to mój ulubiony framework dla front-end'u, jest prosty w nauce, szybki i łatwo go wdrożyć na swojej stronie bez przepisywania wszystkiego. W tym mini wpisie pokaże prostą aplikację łączącą się z REST api napisaną w kilkanaście minut.
Skorzystamy z API gry World of Tanks, na początek musimy się zarejestrować i wygenerować klucz API: https://developers.wargaming.net/applications/.
Cała aplikacja mieści się w jednym komponencie VUE i jest super prosta, wyświetla ona statystyki gracza o wskazanym Id. Nie będę jej za bardzo opisywał bo jest żywcem wyjęta z dokumentacji 🙂
<template>
...
</template>
<script>
import axios from 'axios'
// Wot API Key
const API_KEY = 'YOUR_API_KEY'
// Wot API URL
const API_URL = 'https://api.worldoftanks.eu/wot/'
export default {
data () {
return {
user: null,
userId: null
}
},
created () {},
watch: {
userId: function () {
axios
.get(
API_URL + `account/info/?application_id=` + API_KEY + `&account_id=` + this.userId
)
.then(response => {
if (typeof response.data.data !== 'undefined' && response.data.data[this.userId]) {
this.user = response.data.data[this.userId]
} else {
this.user = false
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
...
</style>
Tworzenie aplikacji w VUE to czysta przyjemność, zachęcam każdego kto jeszcze nie próbował tego framework'a. Myślę że chociaż jest najmniej popularny z "wielkiej trójki" to może okazać się zwycięzcą wyścigu 😉
Jak zawsze dołączam źródła gdyby ktoś chciał się pobawić z tym oraz link do działającego dema. Gdyby ktoś potrzebował pomocy z bardziej zaawansowaną funkcjonalnością proszę pisać postaram się odpowiedzieć na wszystkie pytania.
Więcej informacji: