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: