Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:10 [2020/02/12 18:02] 127.0.0.1 external edit |
pw:laboratoare:10 [2020/04/23 10:42] (current) alexandru.hogea [2. Axios si Request-uri HTTP] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 10. ===== | + | ===== Laboratorul 10: React Router & Request-uri HTTP ===== |
| + | ===== Premisa ===== | ||
| + | <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 ===== | ||
| + | React Router DOM este un API creat pentru React pentru a "simula" un browser history pentru aplicatia noastra. Deoarece aplicatia noastra este un Single Page Application (SPA), browser-ul nostru nu navigheaza prin fisiere html. | ||
| + | |||
| + | ==== 1.1. Instalare React Router ==== | ||
| + | Pentru a instala react-router-dom trebuie sa executam urmatoarea comanda: | ||
| + | <code>npm install react-router-dom</code> | ||
| + | |||
| + | ==== 1.2. Utilizarea React Router ==== | ||
| + | Utilizarea React Router-ului se realizeaza in 3 pasi: | ||
| + | * Adaugarea dependintelor din react-router-dom (**HashRouter**, **Switch** si **Route**) | ||
| + | |||
| + | {{ :pw:laboratoare:router-1.png?nolink&500 |}} | ||
| + | |||
| + | * Inglobarea tuturor componentelor din cadrul aplicatiei in **<HashRouter>** si **<Switch>** | ||
| + | * Definirea rutelor folosind **<Route>** | ||
| + | |||
| + | {{ :pw:laboratoare:router-2.png?nolink&500 |}} | ||
| + | |||
| + | Schimbarea continutului dinamic se realizeaza prin folosirea componentei **<Link>** din react-router-dom | ||
| + | |||
| + | {{ :pw:laboratoare:router-3.png?nolink&400 |}} | ||
| + | |||
| + | ===== 2. Axios si Request-uri HTTP ===== | ||
| + | Axios este o biblioteca JavaScript folosita pentru a face **Request-uri HTTP** din **Node.Js** sau **XMLHttpRequest** din browser, cerinta principala fiind compatibilitatea cu **ES6 Promise API**. | ||
| + | |||
| + | === 2.1. Caracteristici principale === | ||
| + | * **[[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest|XMLHttpRequests]]** din browser | ||
| + | * Request-uri **[[https://nodejs.org/api/http.html|HTTP]]** din **Node.JS** | ||
| + | * Suporta **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise|Promise API]]** | ||
| + | * Interceptare request-uri si responses | ||
| + | |||
| + | === 2.2. Instalare axios === | ||
| + | |||
| + | <code>npm install axios</code> | ||
| + | |||
| + | |||
| + | === 2.3. HTTP Get === | ||
| + | {{ :pw:laboratoare:axios_get.png?nolink&500 |}} | ||
| + | |||
| + | === 2.4. HTTP Post === | ||
| + | {{ :pw:laboratoare:axios_post.png?nolink&500 |}} | ||
| + | |||
| + | === 2.5. HTTP Put === | ||
| + | {{ :pw:laboratoare:axios_put.png?nolink&500 |}} | ||
| + | |||
| + | === 2.6. HTTP Delete === | ||
| + | {{ :pw:laboratoare:axios_delete.png?nolink&500 |}} | ||
| + | |||
| + | === 2.7. HTTP Request cu Headers === | ||
| + | {{ :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 ===== | ||
| + | |||
| + | 1. Creati o componenta **Autentificare** care sa contina un formular cu **doua campuri text si un buton de Submit** respectiv **Register**. | ||
| + | <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> | ||
| + | { | ||
| + | username: "admin", | ||
| + | password: "admin" | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | 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** | ||
| + | <code> | ||
| + | localStorage.setItem("token", jwt_token); | ||
| + | </code> | ||
| + | |||
| + | Citirea token-ului din **localStorage** | ||
| + | <code> | ||
| + | localStorage.getItem("token") | ||
| + | </code> | ||
| + | </note> | ||
| + | |||
| + | 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. | ||
| + | |||
| + | 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. | ||
| + | |||
| + | 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: | ||
| + | <code> | ||
| + | <Route path="/:id" component={Author} /> | ||
| + | </code></note> | ||
