SpringBoot + React + MariaDB CRUD Example
Tags: springboot, mariadb, crud, react
Published: 2021-05-20 17:39:22

SpringBoot + React + MariaDB CRUD Example

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.

<div class="div-loizenai-pre-related-post">
Related posts:
<hr>
<ul class="ul-loizenai-pre-related-post">
<li><a href="https://loizenai.com/integrate-reactjs-springboot/">How to Integrate Reactjs with SpringBoot Tutorial</a></li>
<li><a href="https://loizenai.com/springboot-react-mysql-crud-example/">SpringBoot + React + MySQL: SpringBoot React.js CRUD Example</a></li>
<li><a href="https://loizenai.com/spring-boot-security-jwt-token-bsed-authentication-example-mysql-spring-jpa-restapis/">SpringBoot Token Based Authentication Example – MySQL + JWT+ Spring JPA + RestAPIs</a></li>
</ul>
</div>

<!--more-->

– 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.


<h2 id="overview-diagram-architecture-springboot-reactjs-crud-PostgreSQL">Overview Diagram Architecture - SpringBoot React MariaDB (SpringBoot Reactjs CRUD Example)</h2>
<h3 id="overall-architecture-system-reactjs-springboot-PostgreSQL">Overall Architecture System: Reactjs + SpringBoot + MariaDB</h3>
[caption id="attachment_5036" align="alignnone" width="653"]<img src="https://loizenai.com/wp-content/uploads/2021/05/React.js-SpringBoot-MSSQL-Diagram-Architecture.png" alt="React.js-SpringBoot-MSSQL-Diagram-Architecture" width="653" height="469" class="size-full wp-image-5036" /> React.js-SpringBoot-MSSQL-Diagram-Architecture[/caption]

<ul>
<li>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.</li>
<li>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.</li>
</ul>
<h3 id="springboot-PostgreSQL-crud-design-application">SpringBoot MariaDB CRUD Design Application</h3>
[caption id="attachment_5037" align="alignnone" width="614"]<img src="https://loizenai.com/wp-content/uploads/2021/05/SpringBoot-MSSQL-CRUD-RestAPI-Fullstack-Diagram-Architecture.png" alt="SpringBoot-MSSQL-CRUD-RestAPI-Fullstack-Diagram-Architecture" width="614" height="493" class="size-full wp-image-5037" /> 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.
<h3 id="reactjs-crud-application-design">Reactjs CRUD Application Design</h3>
[caption id="attachment_3805" align="alignnone" width="691"]<img src="https://loizenai.com/wp-content/uploads/2020/10/Reactjs-CRUD-RestAPI-Application-Frontend-Architecture-Diagram-2.png" alt="Reactjs CRUD RestAPI Application Frontend Architecture Diagram" width="691" height="461" class="size-full wp-image-3805" /> Reactjs CRUD RestAPI Application Frontend Architecture Diagram[/caption]

– Reactjs CRUD Application is designed with 2 main layers:
<ul>
<li>React.js components let you split the UI into independent, reusable pieces, and think about each piece in isolation.</li>
<li>Ajax is used by Reactjs component to fetch (post/put/get/delete) data from remote restapi by http request</li>
</ul>

Reactjs CRUD Application defines 5 components:

<ul>
<li><code>Home.js</code> is used serve as the landing page for your app.</li>
<li><code>AppNavbar.js</code> is used to establish a common UI feature between components.</li>
<li><code>CustomerList.js</code> is used to show all customers in the web-page</li>
<li><code>CustomerEdit.js</code> is used to modify the existed customer</li>
<li><code>App.js</code> uses React Router to navigate between components.</li>
</ul>
<h3 id="integrative-project-goal">Integrative Project Goal</h3>
Reactjs Home page:

[caption id="attachment_3806" align="alignnone" width="481"]<img src="https://loizenai.com/wp-content/uploads/2020/10/Project-Goal-Home-Page-3.png" alt="Project Goal - Home Page" width="481" height="292" class="size-full wp-image-3806" /> Project Goal - Home Page[/caption]

Reactjs add data:

[caption id="attachment_3807" align="alignnone" width="518"]<img src="https://loizenai.com/wp-content/uploads/2020/10/Project-Goal-Add-a-Customer-3.png" alt="Project Goal - Add a Customer" width="518" height="508" class="size-full wp-image-3807" /> Project Goal - Add a Customer[/caption]

Reactjs List all data:

[caption id="attachment_3808" align="alignnone" width="810"]<img src="https://loizenai.com/wp-content/uploads/2020/10/Project-Goal-Customer-List-3.png" alt="Project Goal - Customer List" width="810" height="516" class="size-full wp-image-3808" /> Project Goal - Customer List[/caption]

Reactjs update data:

[caption id="attachment_3809" align="alignnone" width="524"]<img src="https://loizenai.com/wp-content/uploads/2020/10/Project-Goal-Update-Customer-4.png" alt="Project Goal - Update Customer" width="524" height="512" class="size-full wp-image-3809" /> 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"]<img src="https://loizenai.com/wp-content/uploads/2020/10/Project-Goal-List-Customer-after-Delete-successfully-2.png" alt="Project Goal - List Customer after Delete successfully" width="759" height="379" class="size-full wp-image-3810" /> Project Goal - List Customer after Delete successfully[/caption]

Check MariaDB Database after do CRUD operations:

[caption id="attachment_3811" align="alignnone" width="805"]<img src="https://loizenai.com/wp-content/uploads/2020/10/Check-PostgreSQL-records-after-do-CRUD-operation.png" alt="Check MariaDB records after do CRUD operation" width="805" height="183" class="size-full wp-image-3811" /> Check MariaDB records after do CRUD operation[/caption]
<h2 id="how-to-integrate-reactjs-with-springboot">How to Integrate Reactjs with SpringBoot?</h2>
For starting to integrate Reactjs with SpringBoot project, I recommend you a previous post with detail steps to pratice:

<a href="https://loizenai.com/integrate-reactjs-springboot/">How to Integrate Reactjs with SpringBoot Tutorial</a>

[caption id="attachment_3818" align="alignnone" width="686"]<img src="https://loizenai.com/wp-content/uploads/2020/10/React-project-structure-3.png" alt="React project structure" width="686" height="480" class="size-full wp-image-3818" /> React project structure[/caption]

[caption id="attachment_3819" align="alignnone" width="508"]<img src="https://loizenai.com/wp-content/uploads/2020/10/SpringBoot-integrate-with-Reactjs-Production-Build-2.png" alt="SpringBoot integrate with Reactjs Production Build" width="508" height="481" class="size-full wp-image-3819" /> SpringBoot integrate with Reactjs Production Build[/caption]

[caption id="attachment_3820" align="alignnone" width="800"]<img src="https://loizenai.com/wp-content/uploads/2020/10/SpringBoot-Get-RestAPI-2.png" alt="SpringBoot Get RestAPI" width="800" height="79" class="size-full wp-image-3820" /> SpringBoot Get RestAPI[/caption]
<h2 id="springboot-PostgreSQL-crud-restapi-example-development">SpringBoot MariaDB CRUD RestAPIs Example – Backend Development</h2>
Now it’s time for building the "SpringBoot MariaDB CRUD RestAPIs Example" project with a set of simple steps:

<ul>
<li>Create SpringBoot project</li>
<li>Configure MariaDB Database</li>
<li>Define SpringData JPA Entity Model</li>
<li>Define SpringBoot JPA Repository</li>
<li>Implement SpringBoot Controller CRUD RestAPIs</li>
</ul>

Let’s go!
<h3 id="how-to-build-springboot-PostgreSQL-crud-restapi-project">How to build SpringBoot MariaDB CRUD RestAPI project</h3>
<h4 id="create-springboot-PostgreSQL-project">Create SpringBoot MariaDB project</h4>
We use SpringToolSuite to create a simple SpringBoot project with below structure:

[caption id="attachment_3821" align="alignnone" width="542"]<img src="https://loizenai.com/wp-content/uploads/2020/10/SpringBoot-project-structure-1.png" alt="SpringBoot project structure" width="542" height="401" class="size-full wp-image-3821" /> SpringBoot project structure[/caption]

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

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

More at:

SpringBoot + React + MariaDB CRUD Example

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