lab-9-ro

Laborator 9 - [JS] - AJAX si redarea dinamica a continutului pe client - Partea a doua

Cuprins

• 🦉 Introducere
• 🎢 Exercitii

🦉 Introducere

In tabelul de mai jos avem operatiile CRUD (Create, Read, Update si Delete) asociate cu metodele HTTP corespunzatoare:

Operatii CRUD	Metode HTTP	URL	Parametrii URL	Request body	Exemple
Create	POST	/dogs		body: {...}	POST /dogs body: {...}
Read One	GET	/dogs/:id	:id		GET /dogs/123
Read All	GET	/dogs			GET /dogs
Update	PUT	/dogs/:id	:id	body: {...}	PUT /dogs/123 body:{...}
Delete	DELETE	/dogs/:id	:id		DELETE /dogs/123

Metodele POST si PUT trebuie sa contine in header Content-Type: application/json alaturi de informatiile din body.

🎢 Exercitii

💪 Exercitiul 9.1

Pornire mock server

• Porniti JSON Server folosind comanda de mai jos (fisierul db.json a fost creat in laboratorul trecut):

json-server --watch db.json

• Accesand link-ul http://localhost:3000/dogs/1, daca servarul este pornit corect, veti vedea:

{ "id": 1, "title": "json-server", "author": "typicode" }

💪 Exercitiul 9.2

Pornind de la codul scris in cadrul laboratorului precedent:

💪 Exercitiul 9.2.1

Adaugati in pagina voastra doua taguri input care sa contina informatiile name si img pentru a putea modifica lista de catei si, totodata, adaugati si butonul Add.

💪 Exercitiul 9.2.2

Salvati noi entitati pe server - actiune de tip POST - Create. folosind input-urile si butonul din exercitiul anterior.

💪 Exercitiul 9.2.3

Editati entitatile existente si salvati-le pe server - actiune de tip PUT - Update, folosind input-urile si doua butoane noi: Edit si Update.

💪 Exercitiul 9.2.4

Stergeti una din entitatile existente din lista, dar si de pe server - actiune de tip DELETE - Delete. folosind un nou buton: Delete.