This is an old revision of the document!


Laboratorul 07: Integrare Frontend-Backend

Scopul laboratorului

Acest laborator reprezinta integrarea frontend-ului cu backend-ul creat pentru aceasta aplicatie. Vom introduce o biblioteca importanta: Axios, cu care vom putea face aceasta integrare.

Ce veti invata la acest laborator?

Cum sa interactionati cu un server, care sunt tipurile de cereri si cum sa manipulam raspunsul.

Configurarile necesare

1. Instalare Axios

npm install axios

2. Fisier de configurare rute

Pentru a avea toate informatiile intr-un loc, vom crea un fisier in care sa tinem toate rutele.

const base = "https://localhost:7002/api/v1/";
const routes = {
    books: {
        addBook: "Books/addBook",
        getAll: "Books/viewAllBooks",
        getBook: (id) => `Books/viewStatusAboutBook/${id}`,
        deleteBook: (id) => `Books/deleteBook/${id}`,
    },
    metrics: {
        getBook: (id) => `Metrics/metricsAboutBook/${id}`,
    },
    rentals: {
        rentBook: "Rentals/rentBook",
        myRentals: "Rentals/viewMyRentals",
        returnBook: (id) => `Rentals/returnBook/${id}`,
    },
    profile: {
        setupProfile: "Profiles/registerProfile",
        getProfile: "Profiles/viewProfile",
    },
};

export { base, routes };

3. Configurare instanta Axios

De ce o instanta de Axios? Pentru ca in diferite cazuri avem nevoie de o configurare mai specifica pentru interactiunea cu backend-ul. De asemenea, aceasta instanta ne ajuta pentru a folosi interceptori. Acesti interceptori ne pot ajuta in 2 moduri:

  1. Daca vrem sa modificam orice cerere inainte sa o trimitem (ex: sa atasam un header in plus)
  2. Daca vrem sa gestionam datele primite de la server

In cazul nostru, nu a trebuit sa folosim acesti interceptori.

import axios from "axios";
import { base } from "./Api";

const axiosInstance = axios.create({
    baseURL: base,
    timeout: 1000,
});

export default axiosInstance;
pw/laboratoare/07.1652445606.txt.gz ยท Last modified: 2022/05/13 15:40 by alexandru.hogea
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0