SpringBoot Angular 10 PostgreSQL CRUD Example
Male avatar

loveprogramming viết ngày 17/12/2020

SpringBoot + Angular 10 + PostgreSQL CRUD Example

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

SpringBoot + Angular 10 + PostgreSQL CRUD Example

In the tutorial, I introduce how to create an “SpringBoot + Angular 10 + PostgreSQL CRUD RestAPIs Example” with POST/GET/PUT/DELETE requests:

– Design overview system with an Architecture Diagram that includes: Angular 10 Client, SpringBoot RestAPIs, and PostgreSQL database.
– Implement Angular 10 CRUD Client with Angular built-in HttpClient to communicate with server side.
– Implement SpringBoot RestAPIs that gets data from PostgreSQL using Spring Data JPA and returns back data as Json format to requested Angular 10 Client.

Overview Example – How to build SpringBoot Angular 10 PostgreSQL CRUD RestAPIs Example?

SpringBoot + Angular 10 + PostgreSQL CRUD RestAPIs Example Application – Architecture

  • We build a backend SpringBoot CRUD RestAPIs with Spring Data JPA for POST/GET/PUT/DELETE data and store them in PostgreSQL database.
  • We implement Angular 10 Application that use Angular HTTPClient to do CRUD requests(call/receive requests) with SpringBoot backend and display data on view.

SPRINGBOOT DESIGN – FLOW: SPRINGBOOT – POSTGRESQL

SPRINGBOOT DESIGN – FLOW: SPRINGBOOT – POSTGRESQL

  • For building RestAPIs in SpringBoot application, We use Spring MVC Web.
  • For interacting with PostgreSQL, We use Spring Data JPA.
  • We implement RestAPI’s URL in RestAPIController.java file to process bussiness logic.
  • For manipulating PostgreSQL’s records, we define a JPA model for mapping field data and use a Spring Data JPA repository to do CRUD operation with PostgreSQL database.

SpringBoot Project Structure

SpringBoot Project Structure

  • models package defines Customer model and Message response class.
  • repository package defines Spring Data JPA repository class CustomerRepository to do CRUD operation with database.
  • service package defines a middleware class CustomerServices between Controller and Repository.
  • controller package defines a RestAPI Controller RestAPIController to handle POST/GET/PUT/DELETE request.

ANGULAR 10 CRUD DESIGN – FLOW: ANGULAR – SPRINGBOOT RESTAPIS

ANGULAR 10 CRUD DESIGN – FLOW: ANGULAR – SPRINGBOOT RESTAPIS

Angular 10 CRUD Application is designed with 3 main layers:

  • Service Layer is used to define Angular Common Services and HttpClient Services to interact with RestAPIs
  • Component Layer is used to define Angular Components to show views in Browser for interacting with Users
  • Router Layer is used to route URLs mapping with the corresponding Angular Components

Angular 10 Project Structure

Angular 10 Project Structure

Angular 10 CRUD Application defines 3 components, 2 services, 1 routers, and 2 data models:

– Components:

add-customer component is used to add a new customer to system
list-customer component is used to show all customers on view pages, delete a customer and update a customer
message component is used to define a view to show logging message on browser
– Services:

customer.service.ts defines POST/GET/PUT/DELETE HTTP requests to SpringBoot RestAPIs with the built-in Angular HttpClient.
message.service.ts defines an array storage to log all messages when Angular CRUD App running

– Router: app-routing.module.ts defines how to map a corresponding Angular component with an URL.

– Models:

customer.ts defines the main data model of our application.
message.ts defines the response data model between SpringBoot and Angular application.

Goal Project: Angular 10 + SpringBoot + PostgreSQL

– Add new Customer:

Add new Customer

– List All Customers:
– List All Customers

– Details a Customer:

– Details a Customer:

– Update a Customer:

– Update a Customer:

– Delete a Customer:

Delete a Customer

– Check database records:

Check database records

SpringBoot PostgreSQL RestAPIs – Backend Development

SpringBoot PostgreSQL RestAPIs – Backend Development

Related post

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

30 bài viết.
32 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
30 bài viết.
32 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!