Posting Form data from ReactJS to MySQL database via Spring Boot Application: Part 3

6 min readJun 17, 2020

Introduction:

In continuation of my previous blogs, this is a tutorial for creating a simple application and a user interface using Spring Boot, MySQL, and ReactJS.

In the first part, we will create a Spring Boot Application and integrate this application with MySQL. In the second part we will create a simple Register Form using ReactJS, and then POST the data from Register form to MySQL database via Spring Boot Application using Axios.

Integrating SpringBoot with MySQL Database

1. Create and connect to your Database :

MySQL Configuration

Start MySQL Workbench and connect to local database.

Create a new schema from Workbench itself or you can create a new database through terminal also.

I’m using MySQL that is installed locally on my system to create a database. Using the terminal, you can log into MySQL with this command

sudo mysql -u root -p

Use the following command to create a database.

create database demo ;

There is no need to create table or define columns, it will be created automatically.

2. Starting with Spring Initializr :

To create a base for Spring Boot application, go to Spring Initializr, and enter options similar to below, or you can use other names according to your choice.

The dependency is added one at a time, for this project you need to add Spring Web, MySQL Driver, Spring Data JPA dependencies

Then click on GENERATE. After this, a zipped folder will be downloaded, unzip this folder and import it into your IDE.

3. Create an Application Class :

In the structure of your folder, you will see “FormsApplication” java class in src/main/java/com/idr/forms. No changes are to be done in this class.

This Java class contains the Main method and the annotation @SpringBootApplication

4. Setting Connection Properties :

The default database of Spring Boot is H2, so we need to change it to MySQL.

To connect the Spring Boot Application to the database, you need to provide a database URL (jdbc:mysql://hostname:port-number/schema-name), username, password.

Here we are using spring.jpa.hibernate.ddl-auto=none

You can also use -create, -update, -create-drop here.

Let’s go ahead and create other necessary entities.

5. Create an Entity Model :

Create a new class Field in src/main/java/com/idr/form/model . This class is a POJO. In this project, we require 4 variables namely firstName, lastName, email, password.

You need to generate Getters and Setters for all the variables as shown in the below code snippet.

The @Entity annotation specifies that the class is an entity and is mapped to a database table.

The primary key of an entity is specified with the @Id annotation. The @GeneratedValue annotation gives a strategy for generating the values of primary keys.

6. Create the Repository Interface :

Create an interface in src/main/java/com/idr/form/repository named RegistrationRepository.

We are extending the ‘JPA Repository’ here which contains methods for performing CRUD operations.

JPA Repository takes <T, ID>. In this case, ID represents the primary key of our entity class which is of Long type, and the generic type will be our Fields object (Representing Entity Model i.e Fields.java class)

7. Create a Controller :

The last step is to create a controller class. Create a class called RegistrationResource in src/main/java/com/idr/form/controller. This class handles the incoming HTTP requests to your application. The most common methods are GET, PUT, POST, DELETE.

Several annotations are used in this class :

@RestController: used to create RESTful web services using Spring MVC. It takes care of mapping request data to the defined request handler method.

@CrossOrigin: To handle Cross-Origin-Resource-Sharing (CORS).

@GetMapping: Maps HTTP GET requests onto specific handler methods. In our project, the URL for GET API will be http://localhost:8080/forms.

@PostMapping: Handle the HTTP POST requests matched with given URI expression. In our project, the URL for POST API will be http://localhost:8080/forms.

@DeleteMapping: For mapping HTTP DELETE requests onto specific handler methods. In our project, URL for DELETE API will be http://localhost:8080/forms/{id}

In the above code snippet, the code for only GET API is given, for POST and DELETE API, you can check out my GitHub Repository.

Starting our Spring Boot Application

Run the main class FormsApplication.java from Intellij, and make sure that you are connected with the MySQL database.

Now, when you see the database (that you have created)in your MySQL Workbench, you will find that in it the table is created and all the columns are defined based on our Entity model (Fields.java)

Testing with Postman :

POST Request — For Creating data

2. GET Request — For Retrieving/Fetching data

Testing with MySQL :

To be sure that your Spring Boot application is integrated correctly with MySQL, you can check from MySQL Workbench or through the terminal, that the data which we have added through Postman is also visible in MySQL table.

This comes to the end of PART 1, wherein we have integrated Spring Boot Application with MySQL database.

ReactJS and Spring Boot: How to integrate with Spring Boot

Create Register Form UI Template

We can consume REST APIs using two of the most popular methods known as Axios (a promise-based HTTP client) and Fetch API (a browser in-built web API).

Here, we are going to use the Axios module for sending a request to the backend. Making HTTP Requests with Axios is quite easy.

To make an HTTP request, we need to install Axios. To install, use this command in your terminal.

npm install axios --save

To use Axios in our project, we need to import it from our node modules.

import axios from “axios”;

Now create Register.js file in src/components, and add the following code in it :

Here, only a part of code is provided, i.e. only one field of Register Form is considered.

Finally, our application is ready and we are successfully able to post Register Form data from ReactJS to MySQL database via Spring Boot Application.

Here is the final Register Form Screen
Enter the data in Register Form, and click on Submit Button. Your data is registered.

To check whether the data is registered or not, you can go back to Postman and hit the GET API, and you will be able to see the list of all the registered users.