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.
– 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.
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 is designed with 2 main layers:
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-pageCustomerEdit.js
is used to modify the existed customerApp.js
uses React Router to navigate between components.[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 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]
Let’s go!
[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 MariaDBcontroller
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 databaseFor 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/
#springboot #crud #mariadb #react