Tu baza, tu baza, słyszycie mnie?

Nastał ten przełomowy moment w projekcie kiedy dwa jego elementy dowiedziały się o swoim istnieniu. Część frontendowa odebrała wiadomość od części backendowej. Bardzo mnie to cieszy.

Żeby jednak nie było tak optymistycznie to powiem tylko, że wiadomość była na stałe wpisana w serwerze i jest testowa tak jak cały serwer. Jednak mimo wszystko uważam to za przełom ponieważ po 2 miesiącach pracy wysłałem zapytanie z poziomu Reacta.

Serwer

W tym momencie mój serwer jest bardzo prosty. Ma on jednak dwie ważne funkcje – pozwala wejść na dowolną podstronę bez przechodzenia przez stronę główną i umożliwia odebranie zapytania, dla którego zwróci predefiniowany błąd.

Testowy kod wygląda tak:

Backend jest napisany w NodeJS z pomocą biblioteki Express, która ułatwia budowanie aplikacji HTTP.

Linia  server.use(express.static(path.resolve(__dirname + '/../web/'))); Odpowiada za obsługę statycznych treści. Jeśli na stronie mam jakieś obrazki to będą one szukane w podanym tutaj katalogu.

Następnie jest część odpowiedzialna za odebranie zapytania POST na wpisany adres. Funkcja dla takiego zapytania zwraca response ze statusem 404 i obiektem reprezentującym błąd. Jak widać „dupa-debugging” musi być :P

Później mam część zwracającą nasz główny plik frontendu dla dowolnego adresu w domenie (poza adresami obsłużonymi powyżej). Dzięki temu mogę wpisać w przeglądarce  http://localhost/login  i od razu przejść na stronę logowania zamiast wchodzić na stronę główną i dopiero wybierać logowanie z menu. Przyśpiesza to testowanie. Będzie też obecne (zapewne w ulepszonej wersji) w ostatecznej aplikacji bo mniej więcej tego wymagają aplikacje SPA.

Na koniec jest wybranie portu na jakim będzie dział serwer i wypisanie w konsoli informacji o jego uruchomieniu.

Uderz serwer, a odpowie

W tym momencie walczę z komunikacją przy logowaniu. Korzystam z tego przykładu: https://github.com/rajaraodv/react-redux-blog/.

W skrócie – doszło sporo typów akcji. Dla samego logowania mam jednak takie trzy:

Pierwsza rzecz jest taka, że korzystam z biblioteki axios do ajaxowych zapytań.

ROOT_URL to mój bazowy adres, różny dla aplikacji uruchomionej lokalnie i w przyszłości na serwerze.

Najciekawszą z akcji jest ta pierwsza. Tworzy ona zapytanie typu POST do serwera i przekazuje jego odpowiedź do reducera. Przy okazji poznałem kolejny element JavaScriptu. Widzicie ten string z adresem? Tam nie ma apostrofu tylko grawis (tak to nazywa Wikipedia). Dzięki temu mogę w tekście wstawiać bezpośrednio zmienne. W przykładzie powyżej widzicie jak wstawiony jest bazowy URL.

Reducer

Dla powyższych akcji mam również reducer. Tutaj pokażę tylko jego fragment obsługujący te właśnie akcje:

Dla akcji logowania ustawia on odpowiedni status użytkownika i włącza flagę mówiącą, że dane są w trakcie ładowania (w tym momencie jej nie używam).

Następnie jest przypadek kiedy udało się zalogować. Status użytkownika się zmienia, a jego obiekt jest ustawiany w state.

Ostatni z pokazanych przypadków obsługuje sytuację błędu logowania. Ustawia on wartość zwróconego błędu.

Kontener

Ostatni element, który pokażę to metoda wywoływana przy submitowaniu formularza logowania:

Wywołuje ona najpierw akcji logowania, a kiedy ta się wykona odpowiedź jest odpowiednio obsługiwana i w zależności od statusu wywoływana jest akcja powodzenia lub błędu logowania.

W tym miejscu się zatrzymałem, walczę z wyświetlaniem zwróconego błędu na ekranie.

 

Cały aktualny kod (poza serwerem, który mam w tym momencie w złym katalogu) dostępny jest na GitHubie.

 

 

Dodaj komentarz

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