Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:10 [2020/04/20 20:38] ciprian.dobre [Exercitii] |
pw:laboratoare:10 [2020/04/23 10:42] (current) alexandru.hogea [2. Axios si Request-uri HTTP] |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| ===== Premisa ===== | ===== Premisa ===== | ||
| - | <note important>In cadrul acestui laborator, vom accesa backend-ul creat la [[https://gitlab.com/programareweb2020/pwebalexandruhogea/-/tree/master/lab%206| Laboratorul 6]].</note> | + | <note important>In cadrul acestui laborator, vom accesa backend-ul creat la [[https://gitlab.com/programareweb2020/pwebalexandruhogea/-/tree/master/lab%206| Laboratorul 6]]. Cel mai recomandat este sa il clonati din nou si sa dati docker-compose up. Atat serverul cat si baza de date ruleaza amandoua in Docker.</note> |
| ===== 1. React Router ===== | ===== 1. React Router ===== | ||
| Line 55: | Line 55: | ||
| {{ :pw:laboratoare:axios_headers.png?nolink&500 |}} | {{ :pw:laboratoare:axios_headers.png?nolink&500 |}} | ||
| + | |||
| + | <note important>Pe langa HOST (localhost in cazurile de mai sus), trebuie mentionat si portul si protocolul. Pentru lab 6 o sa fie http://localhost:3000</note> | ||
| ===== Exercitii ===== | ===== Exercitii ===== | ||
| - | - Creati o componenta **Login** care sa contina un formular cu **doua campuri text si un buton de Submit** respectiv **Register**. | + | 1. Creati o componenta **Autentificare** care sa contina un formular cu **doua campuri text si un buton de Submit** respectiv **Register**. |
| - | <note important>Componenta Login va fi responsabila de a trimite un request de tip POST catre API, avand in body datele necesare autentificarii respectiv inregistrarii utilizatorului. | + | <note important>Componenta Autentificare va fi responsabila de a trimite un request de tip POST catre API, avand in body datele necesare autentificarii respectiv inregistrarii utilizatorului. |
| <code> | <code> | ||
| Line 68: | Line 70: | ||
| </code> | </code> | ||
| - | Raspunsul primit de la server trebuie sa contina token-ul JWT. Stocarea token-ului se face in browser, folosind **localStorage**. | + | Raspunsul primit de la server, in cazul login, va contine token-ul JWT. Stocarea token-ului se face in browser, folosind **localStorage**. |
| Stocare token in **localStorage** | Stocare token in **localStorage** | ||
| Line 81: | Line 83: | ||
| </note> | </note> | ||
| - | - Creati doua componente, **Book** si **Author**, care sa afiseze detaliile despre fiecare carte, respectiv autor. | + | 2. Creati doua componente, **Book** si **Author**, care sa afiseze detaliile despre fiecare carte, respectiv autor. Stilizarea nu este momentan importanta, ne vom concentra pe acest aspect in laboratorul urmator. Este destul sa afiseze chiar si un simplu JSON. |
| - | - Creati o componenta **BooksList** care sa contina o lista cu toate cartile existente, respectiv **AuthorsList** care sa contina o lista cu toati autorii existenti in baza de date. Pentru afisarea tuturor cartilor, respectiv autorilor, se vor folosi componentele create anterior, **Book** si **Author**. Stilizarea nu reprezinta o prioritate, de aceea puteti sa fiti inventivi. | + | |
| - | - Componentele **BooksList** si **AuthorsList** trebuie sa trimita cate un request de HTTP Get pentru a aduce toate intrarile din baza de date. | + | |
| - | <note important>Componentele **Book** si **Author** vor raspunde la evenimentul de **click**. Dupa realizarea evenimentului de **click**, se va afisa pe pagina o noua componenta (la libera decizie) care sa contina detalii despre cartea sau autorul selectat.</note> | + | 3. Creati o componenta **BooksList** care sa contina o lista cu toate cartile existente, respectiv **AuthorsList** care sa contina o lista cu toati autorii existenti in baza de date. Pentru afisarea tuturor cartilor, respectiv autorilor, se vor folosi componentele create anterior, **Book** si **Author**. Din nou, stilizarea nu reprezinta o prioritate. |
| - | - In componenta creata anterior (vezi info) utilizatorul trebuie sa fie capabil sa editeze datele cartii / autorului selectat. | + | 4. Componentele **BooksList** si **AuthorsList** trebuie sa trimita cate un request de HTTP Get pentru a aduce toate intrarile din baza de date. |
| + | <note important>Cererile catre server pot fi date fie la apasarea pe un buton, fie atunci cand se incarca componenta (hint, useEffect)</note> | ||
| <note important>Pentru transmiterea unui parametru prin intermediul React Router se va folosi: | <note important>Pentru transmiterea unui parametru prin intermediul React Router se va folosi: | ||
| <code> | <code> | ||
| <Route path="/:id" component={Author} /> | <Route path="/:id" component={Author} /> | ||
| </code></note> | </code></note> | ||
