World of Tanks REST API w VueJS

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.

Demo online | kod źródłowy

Więcej informacji:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *