Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:07 [2022/05/13 20:49] alexandru.hogea [4. Folosirea instantei pentru a face cereri] |
pw:laboratoare:07 [2022/05/13 21:01] (current) alexandru.hogea [Formulare] |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| ===== Ce veti invata la acest laborator? ===== | ===== Ce veti invata la acest laborator? ===== | ||
| Cum sa interactionati cu un server, cum sa folositi Axios pentru a face cereri si cum sa manipulam raspunsul. | Cum sa interactionati cu un server, cum sa folositi Axios pentru a face cereri si cum sa manipulam raspunsul. | ||
| + | |||
| + | ===== Inainte de integrarea frontend-backend ===== | ||
| + | ==== Actualizarea formularelor ==== | ||
| + | <note important>Au fost actualizate formularele astfel incat sa foloseasca biblioteca[[https://react-hook-form.com/|react-hook-form]]. Aceasta biblioteca ne scuteste de gestionarea fiecarui input din cadrul formularelor.</note> | ||
| + | |||
| + | Mai jos puteti vedea un exemplu din documentatia celor de la react-hook-form. Cel mai important feature este **register** care paseaza urmatoarele proprietati fiecarui input: | ||
| + | * onChange | ||
| + | * name | ||
| + | * onBlur | ||
| + | * ref | ||
| + | |||
| + | Prin aceste proprietati, se vor actualiza campurile, valorile finale fiind returnate de **getValues()**. | ||
| + | <code> | ||
| + | import React from "react"; | ||
| + | import { useForm } from "react-hook-form"; | ||
| + | |||
| + | export default function App() { | ||
| + | const { register, handleSubmit, watch, formState: { errors } } = useForm(); | ||
| + | const onSubmit = data => console.log(data); | ||
| + | |||
| + | console.log(watch("example")); // watch input value by passing the name of it | ||
| + | |||
| + | return ( | ||
| + | /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ | ||
| + | <form onSubmit={handleSubmit(onSubmit)}> | ||
| + | {/* register your input into the hook by invoking the "register" function */} | ||
| + | <input defaultValue="test" {...register("example")} /> | ||
| + | | ||
| + | {/* include validation with required or other standard HTML validation rules */} | ||
| + | <input {...register("exampleRequired", { required: true })} /> | ||
| + | {/* errors will return when field validation fails */} | ||
| + | {errors.exampleRequired && <span>This field is required</span>} | ||
| + | | ||
| + | <input type="submit" /> | ||
| + | </form> | ||
| + | ); | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | <note>Desi pentru aceasta aplicatie nu am pus mesajele de eroare, va recomandam sa aveti intotdeauna un raspuns pe care sa il dati utilizatorilor care nu completeaza corect. Greselile facute de oameni in interactiunea cu un program nu sunt 'human error', sunt bad design.</note> | ||
| ===== Ce este Axios? ===== | ===== Ce este Axios? ===== | ||
| Line 22: | Line 62: | ||
| ==== 2. Fisier de configurare rute ==== | ==== 2. Fisier de configurare rute ==== | ||
| Pentru a avea toate informatiile intr-un loc, vom crea un fisier in care sa tinem toate rutele. | Pentru a avea toate informatiile intr-un loc, vom crea un fisier in care sa tinem toate rutele. | ||
| + | |||
| + | <note>Daca am avea undeva hostat serverul, pur si simplu am inlocui base in acest fisier, in loc sa inlocuim oriunde folosim axios.</note> | ||
| + | <note>Am grupat rutele in functie de functionalitati, va recomandam sa tineti informatiile statice sub o forma cat mai ordonata.</note> | ||
| <code> | <code> | ||
| const base = "https://localhost:7002/api/v1/"; | const base = "https://localhost:7002/api/v1/"; | ||
