SpringBoot + React + MariaDB CRUD Example
Male avatar

loveprogramming viết ngày 20/05/2021

SpringBoot + React + MariaDB CRUD Example


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.

Related posts:

– 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 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 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 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 Project Goal - Home Page[/caption]

Reactjs add data:

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

Reactjs List all data:

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

Reactjs update data:

[caption id="attachment_3809" align="alignnone" width="524"]Project Goal - Update Customer 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 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 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 React project structure[/caption]

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

[caption id="attachment_3820" align="alignnone" width="800"]SpringBoot Get RestAPI 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 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


Bình luận

{{ comment.user.name }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa

Male avatar


545 bài viết.
97 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 1 năm trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 11 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/frontend/angular/angular6/kotlinspringbootangular6crudhttpclientmysqlexamplespringdatajparestapisexample Kotlin Spring Boot +...
loveprogramming viết 8 tháng trước
0 0
4 1
Maria Galera Cluster là gì Gần đây tôi có một task liên quan đến cấu hình Galera server cho MariaDB. Cho những bạn nào chưa biết thì MariaDB là mộ...
Trần Thành viết gần 6 năm trước
4 1


{{ comment_count }}

bình luận

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

Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 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á!