Trwa konkurs "Ogól naczelnego", w którym codziennie możecie wygrać najnowsze maszynki systemowe Hydro Connect 5 marki Wilkinson Sword.

Więcej informacji
Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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 [b]axios[/b] do odpytywania API i [b]Element UI[/b] 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 [b]v-model[/b] - 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. 

oprogramowanie internet programowanie

Komentarze

0 nowych
  #1 12.01.2017 23:14

JavaScript to brzydki relikt przeszłych czasów, a standard EcmaSCRIPT 6 jeszcze bardziej go komplikuje i udziwnia, to tak jak wprowadzona obiektowość na siłę do C = C++. Dlatego tyle powstaje tych frameworków i nakładek na niego. Bo taki to jest piękny dziwny język. Frameworki wyrastają jak grzyby po deszczu do JS a kończą po miesiącu i zostają porzucone i następne promowane. Wieczna nauka nowych technologii brak dopracowania, skrypty pisane brzydko że nikt nie chce tego utrzymywać po kimś. Teraz jest hype na Node.js, tylko co z tego jak Node jest pisany w fatalnym JS 5 i poniekąd ES6. Do front-endu już wolę CoffeScript z nakładek, a do back-endu nie pakować się w Node tylko Python/Django, Ruby on Rails.

HitcH   5 #2 13.01.2017 08:33

@Anonim (niezalogowany): a ja uważam że idzie w dobra strone. Co by nie mówić JS rozwija się bardzo szybko obecnie i jest językiem w którym można napisać i backend i front :)

foreste   15 #3 13.01.2017 12:11

@HitcH: Czy te vue jest znane czy to jest świeże ?.

flaszer   10 #4 13.01.2017 12:50

@foreste: Ze 3 lata już ma.

Dobry art, generalnie widzę dobre praktyki, w tym użycie BEM :)

  #5 13.01.2017 14:21

@Anonim (niezalogowany): No cóż, co kto lubi. Ja np. pisałem przez kilka lat w C/C++, potem przesiadłem się na PHP, a po kolejnych paru latach przeszedłem na Node.js. I w Node naprawdę odetchnąłem, rzeczy które w C były jak ściana, nie do przejścia i wymagały dużych nakładów pracy, w node idą jak po maśle.
Owszem, ma swoje wady, np. brak deklarowania zmiennych, niejasne typy danych. Ale te wady to i tak nic w porównaniu z możliwościami które mam w porównaniu z C i PHP. No i sporo też zależy od konkretnego zastosowania.

  #6 13.01.2017 15:20

@HitcH: No bo Google wpakowało w to tyle kasy co Oracle w Jave, to mają inne wyjście?

HitcH   5 #7 13.01.2017 16:12

@Anonim (niezalogowany): ale jaki google? Vue tworzy jedna osoba, która jest opłacana przez społeczność.

flaszer @flaszersię iść w dobrą stronę, aczkolwiek nigdy nie podobało mi się BEM, stąd tak trochę po mojemu robię.

Bum na vue zrobił się po wyjściu wersji 2.0

  #8 14.01.2017 00:56

@HitcH: Chodziło mi o JS i silnik V8.

  #9 14.01.2017 00:58

@Anonim (niezalogowany): C i JS ma tyle ze sobą wspólnego co piernik do wiatraka, a ty jeszcze PHP tu wtykasz. C piszesz kompilatory, systemy, JS frontend strony od niedawna backend Node. C to porównaj już prędzej do D, Rust, Go, Pascal.

Lawstorant   8 #10 14.01.2017 03:59

A ja trwam przy czystym JS. Sam robię sobie biblioteki animacji itp. To własnie jest problemem wielu domorosłych deweloperów. Uczą się frameworków tylko pobieżnie znając język podstawowy.

Frankfurterium   10 #11 14.01.2017 14:28

@Lawstorant: We frontendowym projekcie większym niż na 2-3 osoby takie podejście nie ma racji bytu. Frameworki/biblioteki całemu zespołowi narzucają konkretne rozwiązania i konwencje. Dodatkowo dramatycznie redukują bazę kodu do utrzymywania i debugowania. Kiedy 20 osób commituje do repozytorium kod napisany "po swojemu", kończy się albo totalnym zamtuzem, albo... powstaje z tego kolejny JS-owy framework.

Gratulacje!

znalezione maszynki:

Twój czas:

Ogól Naczelnego!
Znalazłeś(aś) 10 maszynek Wilkinson Sword
oraz ogoliłaś naszego naczelnego!
Przejdź do rankingu
Podpowiedź: Przyciśnij lewy przycisk myszki i poruszaj nią, aby ogolić brodę.