loizenai

Posted on May 20, 2021

SpringBoot + React + MariaDB CRUD Example

#springboot #mariadb #crud #react

https://loizenai.com/springboot-react-crud-mariadb/

In the tutorial, I introduce how to build an “SpringBoot React.js CRUD MariaDB Example” project with the help of SpringData JPA for POST/GET/PUT/DELETE requests with step by step coding examples:

– SpringBoot project produces CRUD RestAPIs with MariaDB database using the supporting of Spring Data JPA.
– React.js project will consume the SpringBoot CRUD RestAPIs by Ajax then show up on Reactjs component’s views.

– I draw a fullstack overview Diagram Architecture from React.js Frontend to MariaDB database through SpringBoot RestAPI backend.
– Develop SpringBoot CRUD RestAPIs with the supporting of SpringWeb Framework.
– Implement Reactjs CRUD application with Ajax fetching APIs to do CRUD request (Post/Get/Put/Delete) to SpringBoot Backend APIs.
– I create a testsuite with a number of integrative testcases with CRUD RestAPI requests from Reactjs to do CRUD requests to SpringBoot RestAPIs Server and save/retrieve data to MariaDB database.

Overview Diagram Architecture - SpringBoot React MariaDB (SpringBoot Reactjs CRUD Example)

Overall Architecture System: Reactjs + SpringBoot + MariaDB

[caption id="attachment_5036" align="alignnone" width="653"] React.js-SpringBoot-MSSQL-Diagram-Architecture[/caption]

We build a backend: SpringBoot CRUD Application with MariaDB that provides RestAPIs for POST/GET/PUT/DELETE data entities and store them in MariaDB database.
We implement React.js CRUD Application that use Ajax to interact (call/receive requests) with SpringBoot CRUD application and display corresponding data in Reactjs Component.

SpringBoot MariaDB CRUD Design Application

[caption id="attachment_5037" align="alignnone" width="614"] SpringBoot-MSSQL-CRUD-RestAPI-Fullstack-Diagram-Architecture[/caption]

I build a SpringBoot project that handle all Post/Get/Put/Delete requests from RestClient and do CRUD operations to MariaDB database to save/retrieve/update and delete entity from MariaDB and returns back to Restclient the corresponding messages.

We build a SpringBoot project with 2 layers:
– SpringJPA Repository is used to interact with MariaDB database by a set of CRUD operations.
– RestController layer is a web layer for SpringBoot project, it will directly handle all incomming requests and do the corressponding responses to the calling client.

Reactjs CRUD Application Design

[caption id="attachment_3805" align="alignnone" width="691"] Reactjs CRUD RestAPI Application Frontend Architecture Diagram[/caption]

– Reactjs CRUD Application is designed with 2 main layers:

React.js components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Ajax is used by Reactjs component to fetch (post/put/get/delete) data from remote restapi by http request

Reactjs CRUD Application defines 5 components:

Home.js is used serve as the landing page for your app.
AppNavbar.js is used to establish a common UI feature between components.
CustomerList.js is used to show all customers in the web-page
CustomerEdit.js is used to modify the existed customer
App.js uses React Router to navigate between components.

Integrative Project Goal

Reactjs Home page:

[caption id="attachment_3806" align="alignnone" width="481"] Project Goal - Home Page[/caption]

Reactjs add data:

[caption id="attachment_3807" align="alignnone" width="518"] Project Goal - Add a Customer[/caption]

Reactjs List all data:

[caption id="attachment_3808" align="alignnone" width="810"] Project Goal - Customer List[/caption]

Reactjs update data:

[caption id="attachment_3809" align="alignnone" width="524"] Project Goal - Update Customer[/caption]

Reactjs delete data:

-> Delete a customer Adam with id=2, after successfully, check the customer list again:

[caption id="attachment_3810" align="alignnone" width="759"] Project Goal - List Customer after Delete successfully[/caption]

Check MariaDB Database after do CRUD operations:

[caption id="attachment_3811" align="alignnone" width="805"] Check MariaDB records after do CRUD operation[/caption]

How to Integrate Reactjs with SpringBoot?

For starting to integrate Reactjs with SpringBoot project, I recommend you a previous post with detail steps to pratice:

How to Integrate Reactjs with SpringBoot Tutorial

[caption id="attachment_3818" align="alignnone" width="686"] React project structure[/caption]

[caption id="attachment_3819" align="alignnone" width="508"] SpringBoot integrate with Reactjs Production Build[/caption]

[caption id="attachment_3820" align="alignnone" width="800"] SpringBoot Get RestAPI[/caption]

SpringBoot MariaDB CRUD RestAPIs Example – Backend Development

Now it’s time for building the "SpringBoot MariaDB CRUD RestAPIs Example" project with a set of simple steps:

Create SpringBoot project
Configure MariaDB Database
Define SpringData JPA Entity Model
Define SpringBoot JPA Repository
Implement SpringBoot Controller CRUD RestAPIs

Let’s go!

How to build SpringBoot MariaDB CRUD RestAPI project

Create SpringBoot MariaDB project

We use SpringToolSuite to create a simple SpringBoot project with below structure:

[caption id="attachment_3821" align="alignnone" width="542"] SpringBoot project structure[/caption]

application.properties is used to add the SpringBoot application's configurations such as: database configuration (MongoDB, MariaDB, MariaDB), threadpool, Hibernate, JPA ...
repository package is used to define a SpringBoot JPA repository to do CRUD operations with MariaDB
controller package is used to implement a SpringBoot RestAPI controller to handle all incomming requests (post/get/put/delete) and response to rest-client.
model package is used to define a JPA entity model that maps with the record's format in MariaDB database

For handling the web-request and doing CRUD operations with MariaDB database, we need the supporting of 3 SpringBoot dependencies: spring-boot-starter-web and spring-boot-starter-data-jpa, postgresql. So adding it to pom.xml file:

More at:

SpringBoot + React + MariaDB CRUD Example

https://loizenai.com/springboot-react-crud-mariadb/