blog

23 SIE
0
Laravel REST API, CORS, JWT #35

Wysłane 2017-08-23 10:06:32, w kategorii Kurs Laravel

W dzisiejszym odcinku dowiemy się jak pisałem API użyte w poprzednim odcinku z VUE. Nasze restowe api będzie obsługiwać requesty cross domenowe dzięki wtyczce do laravela CORS, dodatkowo zaimplementujemy autoryzację token JWT po stronie samego api.
  
 
Poniżej znajduje się lista wykonywanych poleceń:
 
Na początek tworzymy nowy projekt laravela.
composer create-project laravel/laravel api_08_001
 
Kolejnym elementem jest stworzenie bazy danych oraz uzupełnienie pliku env w nowo dodanym projekcie laravela
 
Kolejnym elementem jest stworzenie modeli i migracji
php artisan make:model Category -m
php artisan make:model Article -m
 
Wykonujemy migrację
php artisan migrate
 
Następnie dodajemy migrację modyfikującą tabele articles
php artisan make:migration alter_table_articles
 
Wykonujemy migrację
php artisan migrate
 
Kolejnym krokiem jest stworzenie kontrolera dla Kategorii
php artisan make:controller CategoriesController --resource
 
 
Dalej tworzymy routing zgodnie z instrukcją na filmie i instalujemy paczkę CORS.
 
 
 
Po zainstalowaniu paczki należy pamiętać o umieszczeniu providera oraz fasad paczki w pliku app/config.php. Dodatkowo rejestrujemy middleware paczki CORS w app/Http/Kernel.php.
 
Kolejnym elementem jest zainstalowanie paczki jwt-auth
 
Schemat postępowania jest dokładnie taki sam jak w przypadku paczki z CORS czyli, dodajemy informację o providerze oraz fasadach. Dodatkowo generujemy config dla jwt-auth:
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"
 
Oraz generujemy klucz
php artisan jwt:generate
 
Ostatnim elementem jest wygenerowanie kontrolera UsersController i implementacja metody login
php artisan make:controller UsersController
 
Kod z odcinka znajduje się na GitHub:
  
 
 
 
.

02 SIE
0
Tworzenie stron z vuejs, jak zacząć #34

Wysłane 2017-08-02 12:56:40, w kategorii JavaScript

W dzisiejszym odcinku dowiemy się jak rozpocząć pracę z vue i zrobimy prostą komunikację z REST API, wykonamy klasycznego CRUD-a czyli: wyświetlanie, dodawanie, edycja i usuwanie rekordów.
  
 
Poniżej znajduje się lista wykonywanych poleceń:
 
Na początek instalujemy vue-cli
npm install --global vue-cli
 
Kolejnym poleceniem jest stworznie projektu vue
vue init webpack NAZWA_TWOJEGO_PROJEKTRU
 
Kolejnym elementem jest wejście do katalogu z projektem i wykonanie komendy
npm install
 
Po zainstalowaniu projekt możemy uruchomić projekt wykonując polecenie
npm run dev
 
Przykład z vue jest dostępny na moim githubie:
 
Aby móc wykonać ćwiczenie należy pobrać moje api znajdujące się na githubie:
 
Po zrobieniu clona z githuba należy wygenerować plik .env
 
Uruchamiamy instalację zależności 
composer install
 
Uruchamiamy migrację
php artisan migrate
 
Uruchamiamy seedery
php artisan db:seed --class="UsersSeeder"
php artisan db:seed --class="PostsSeeder"
 
I na koniec serwujemy nasze api
php artisan serve
 
Runtime-Compiler-vs-Runtime-only
 
Wtyczka vue do chrome
 
 
.