Piszemy aplikację w Vue.js — cz.3

Kolejny odcinek przed Tobą. Dziś poraz pierwszy pobierzesz dane z API. Zmieniamy trochę koncepcję aplikacji - pobierzemy graczy po nazwie użytkownika World of Tanks.

Jak zwykle wpis dostępny na moim blogu.

Do zrealizowania tej części użyjemy dostępnego za darmo API World of Tanks przygotowane przez Wargaming. Warunki - musisz posiadać konto i stworzyć aplikację, a następnie dodać swój adres IP do whitelisty, w przeciwnym wypadku każda próba będzie zakończona błędem.

Przygotowanie

Aby zacząć pobierać dane potrzebujemy wiedzieć co chcemy pobrać. W przypadku naszego API, żeby pobrać statystyki użytkownika potrzebujemy znać jego Account ID.

No dobra, ale skąd je wziąć? Prosta sprawa - znaleźć! I to będzie 1. krok.

Znajdowanie Account ID

W API mamy metodę, która pozwala wyszukać użytkowników po nazwie. Jak? Odpytujemy adres https://api.worldoftanks.eu/wot/account/list/ przekazując: - application_id, - search - nazwa użytkownika, - region, który jest domeną,

Przykład: https://api.worldoftanks.eu/wot/account/list/?application_id=demo&search=klamca pokaże mi:

    {"status":"ok","meta":{"count":12},"data":[{"nickname":"klamca","account_id":500134220},{"nickname":"Klamca1","account_id":514558859},{"nickname":"klamca123","account_id":503899550},{"nickname":"Klamca1410","account_id":519946431},{"nickname":"klamca15","account_id":533988706},{"nickname":"Klamca2015","account_id":527377372},{"nickname":"Klamca2414","account_id":503168447},{"nickname":"klamca310","account_id":502663725},{"nickname":"Klamca_","account_id":514298986},{"nickname":"klamcaa","account_id":514182564},{"nickname":"KLamcaWikas","account_id":536928408},{"nickname":"klamcawot","account_id":525726297}]}

Idealnie, wszystko czego potrzebujesz!

Fajnie, gdyby każdy mógł wpisać swoją nazwę użytkownika i wybrać region. Może przygotujemy prosty formularz? W stylu:

Do dzieła - formularzu zrób się!

Zanim napiszesz 1 linię kodu - w celu przyspieszenia pracy używam axios do odpytywania API i Element UI do komponentów UI (np. select).

W pliku Homepage.vue przygotowałem sobie prostą strukturę HTML:

	<main class="v-homepage">
        <section class="block__userFinder userFinder">
            <h3 class="userFinder__name">
               Znajdź ID użytkownika
            </h3>
            <div class="form form--userFinder">
                <div class="form__rowGroup form__rowGroup--bottom">
                    <div class="form__row form__row--mr15">
                        <label class="form__label">
                            Nazwa użytkownika
                        </label>
                        <div class="form__input">
                            <input type="search" class="form__text" v-model="user.name">
                        </div>
                    </div>
                    <div class="form__row form__row--mr15">
                        <el-select v-model="user.region" placeholder="Wybierz region">
                            <el-option
                                    v-for="item in region"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="form__row form__row--button">
                        <el-button type="info" @click.prevent="getUserList">Szukaj</el-button>
                    </div>
                </div>
            </div>
            <ul class="userFinder__list">
                <template v-for="user in userList">
                    <li class="userFinder__item">{{ user.nickname }}</li>
                </template>
            </ul>
        </section>
        <section class="block__userDetails">
            <h1 class="userDetails__name">
                Szczegóły użytkownika
            </h1>
            <el-alert
                    title="Najpierw wybierz użytkownika"
                    type="info"
                    show-icon>
            </el-alert>
        </section>
    </main>
    

Idąc od góry: Dwa bloki, w pierwszym input z wyszukiwarką, a w drugim statystyki użytkownika. Pewnie pierwszy raz widzisz v-model - służy do bindowania danych z formularza do zmiennych.

W naszym przypadku wpisujesz w input nazwę użytkownika i przypisuje się do zmiennej user.name, wybierasz region i dostępny będzie pod user.region.

Spraw by się szukało...

Ok, mamy nasz kod HTML, ale nic nie robi...jeszcze. Czas na 1 metodą, która pobierane dane i wyświetli listę pod formularzem.

		getUserList () {
                const self = this;
                if (self.user.name == '') {
                    this.$message.error('Oops, wpisz nazwę użytkownika.');
                } else if (self.user.region == '') {
                    this.$message.error('Oops, wybierz region.');
                } else {
                    self.loading = true;
                    axios({
                        method: 'get',
                        url: self.api + this.user.region + '/wot/account/list/?application_id=' + self.apiKey + '&search=' + self.user.name,
                    }).then(function (response) {
                        self.loading = false;
                        self.userList = response.data.data;
                    }).catch(function (error) {
                        console.log(error);
                        self.loading = false;
                    });
                }
            }

Dodałem prostą walidację na nazwę użytkownika i region, bo bez tych danych i tak nie możesz wysłać requestu. Jeśli wszystko się powiedzie to zobaczysz listę użytkowników pod formularzem.

Dla ułatwienia przygotowałem repozytorium na Githubie, a opisany etap znajdziesz na branch tutorial-get-users

W kolejnej części wyświetlimy szczegóły użytkownika w prawej kolumnie. Następnie pobierzemy listę czołgów, wraz ze statystykami.

Kolejny etap to dodanie routingu, tak, żeby nie pobierać dużych ilości danych na raz - zobaczysz, że chwilę to trwa. I tu zaczniemy wykorzystywać Vuex i stan aplikacji.