PRÍKLAD SPRINGBOOT + ANGULAR 10 + POSTGRESQL CRUD - DIAGRAM ARCHITEKTÚRY - LOIZENAI.COM

SpringBoot + Angular 10 + Príklad CRUD PostgreSQL

https://loizenai.com/springboot-angular-10-postgresql-crud-restapi-example/

V tutoriále uvádzam, ako vytvoriť príklad SpringBoot + Angular 10 + PostgreSQL CRUD RestAPI s požiadavkami POST/GET/PUT/DELETE:

- Systém prehľadu návrhu s diagramom architektúry, ktorý obsahuje: klienta Angular 10, databázu SpringBoot RestAPI a databázu PostgreSQL.
-Implementujte klienta Angular 10 CRUD s vstavaným uhlom HttpClient na komunikáciu so serverovou stranou.
- Implementujte SpringBoot RestAPI, ktoré získava údaje z PostgreSQL pomocou Spring Data JPA a vracia údaje vo formáte Json požadovanému klientovi Angular 10.

Prehľad - Ako vytvoriť príklad SpringBoot Angular 10 CRAP RestAPI PostgreSQL?

Zostavujeme backendové SpringBoot CRUD RestAPI s Spring Data JPA pre dáta POST/GET/PUT/DELETE a ukladáme ich do databázy PostgreSQL.
Implementujeme aplikáciu Angular 10, ktorá používa Angular HTTPClient na vykonávanie požiadaviek CRUD (požiadavky na volanie/príjem) s backendom SpringBoot a zobrazovaním zobrazovaných údajov.

DIZAJN SPRINGBOOT - FLOW: SPRINGBOOT - POSTGRESQL

Na vytváranie RestAPI v aplikácii SpringBoot používame web Spring MVC.
Na interakciu s PostgreSQL používame Spring Data JPA.
Webovú adresu RestAPI implementujeme do súboru RestAPIController.java na spracovanie logiky podnikania.
Na manipuláciu so záznamami PostgreSQL definujeme model JPA na mapovanie údajov polí a pomocou úložiska Spring Data JPA vykonávame operáciu CRUD s databázou PostgreSQL.

Štruktúra projektu SpringBoot

lenkins cheat sheet pdf

models package definuje Customer model a Message response class.
balík úložiska definuje triedu úložiska Spring Data JPA CustomerRepository na vykonanie operácie CRUD s databázou.
balík služieb definuje triedu middleware CustomerServices medzi radičom a úložiskom.
balík ovládačov definuje nástroj RestAPI Controller RestAPIController na spracovanie požiadavky POST/GET/PUT/DELETE.

DESIGN ANGULAR 10 CRUD - FLOW: ANGULAR - RESTAPIS SPRINGBOOT

Aplikácia Angular 10 CRUD je navrhnutá s 3 hlavnými vrstvami:

Servisná vrstva sa používa na definovanie bežných angulárnych služieb a služieb HttpClient na interakciu s RestAPI
Komponentová vrstva sa používa na definovanie uhlových komponentov na zobrazovanie zobrazení v prehliadači na interakciu s používateľmi
Router Layer sa používa na smerovanie mapovania adries URL s príslušnými uhlovými komponentmi

Štruktúra projektu Uhlová 10

Aplikácia Angular 10 CRUD definuje 3 komponenty, 2 služby, 1 smerovač a 2 dátové modely:

js skontrolujte prázdny reťazec

- Komponenty:

komponent add-customer sa používa na pridanie nového zákazníka do systému
komponent zoznam-zákazník sa používa na zobrazenie všetkých zákazníkov na zobrazených stránkach, odstránenie zákazníka a aktualizáciu zákazníka
komponent správy sa používa na definovanie zobrazenia na zobrazenie protokolovanej správy v prehliadači
- Služby:

customer.service.ts definuje POST/GET/PUT/DELETE požiadavky HTTP na SpringBoot RestAPI so vstavaným uhlovým HttpClient.
message.service.ts definuje úložisko poľa na zaznamenávanie všetkých správ, keď je spustená aplikácia Angular CRUD

-Router: app-routing.module.ts definuje, ako mapovať zodpovedajúci uhlový komponent pomocou adresy URL.

- Modely:

customer.ts definuje hlavný dátový model našej aplikácie.
message.ts definuje dátový model odozvy medzi aplikáciou SpringBoot a Angular.

Cieľový projekt: Angular 10 + SpringBoot + PostgreSQL

- Pridať nového zákazníka:

- Zoznam všetkých zákazníkov:

- Podrobnosti o zákazníkovi:

- Aktualizujte zákazníka:

strojové učenie pre stredoškolákov

- Odstrániť zákazníka:

- Skontrolujte databázové záznamy:

SpringBoot PostgreSQL RestAPI - vývoj backendu

Súvisiaci príspevok

#angular #springboot #crud #postgresql

loizenai.com