In this tutorials will teach you how to do the Restful API to add the records in to the mysql database.how to insert the records into mysql database step by step via spring boot layer architecture process using industrial standards.
Create the Package entity inside the package create the class Employee
Employee
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | package com.example.Registation.Entity; import javax.persistence.*; @Entity @Table(name="employee") public class Employee { @Id @Column(name="employee_id", length = 45) @GeneratedValue(strategy = GenerationType.AUTO) private int employeeid; @Column(name="employee_name", length = 255) private String employeename; @Column(name="address", length = 255) private String address; @Column(name="mobile", length = 20) private int mobile; public Employee(int employeeid, String employeename, String address, int mobile) { this.employeeid = employeeid; this.employeename = employeename; this.address = address; this.mobile = mobile; } public Employee() { } public int getEmployeeid() { return employeeid; } public void setEmployeeid(int employeeid) { this.employeeid = employeeid; } public String getEmployeename() { return employeename; } public void setEmployeename(String employeename) { this.employeename = employeename; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public int getMobile() { return mobile; } public void setMobile(int mobile) { this.mobile = mobile; } @Override public String toString() { return "Employee{" + "employeeid=" + employeeid + ", employeename='" + employeename + '\'' + ", address='" + address + '\'' + ", mobile=" + mobile + '}'; } } |
EmployeeDTO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | package com.example.Registation.Dto; import javax.persistence.Column; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; public class EmployeeDTO { private int employeeid; private String employeename; private String address; private int mobile; public EmployeeDTO(int employeeid, String employeename, String address, int mobile) { this.employeeid = employeeid; this.employeename = employeename; this.address = address; this.mobile = mobile; } public EmployeeDTO() { } public int getEmployeeid() { return employeeid; } public void setEmployeeid(int employeeid) { this.employeeid = employeeid; } public String getEmployeename() { return employeename; } public void setEmployeename(String employeename) { this.employeename = employeename; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public int getMobile() { return mobile; } public void setMobile(int mobile) { this.mobile = mobile; } @Override public String toString() { return "EmployeeDTO{" + "employeeid=" + employeeid + ", employeename='" + employeename + '\'' + ", address='" + address + '\'' + ", mobile=" + mobile + '}'; } } |
EmployeeController
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | package com.example.Registation.EmployeeController; import com.example.Registation.Dto.EmployeeDTO; import com.example.Registation.Service.EmployeeService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @RestController @CrossOrigin @RequestMapping("api/v1/employee") public class EmployeeController { @Autowired private EmployeeService employeeService; @PostMapping(path = "/save") public String saveEmployee(@RequestBody EmployeeDTO employeeDTO) { String id = employeeService.addEmployee(employeeDTO); return id; } } |
Employee Service
1 2 3 4 5 6 7 | package com.example.Registation.Service; import com.example.Registation.Dto.EmployeeDTO; public interface EmployeeService { String addEmployee(EmployeeDTO employeeDTO); } |
EmployeeServiceIMPL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | package com.example.Registation.Service.impl; import com.example.Registation.Dto.EmployeeDTO; import com.example.Registation.Entity.Employee; import com.example.Registation.Repo.EmployeeRepo; import com.example.Registation.Service.EmployeeService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class EmployeeIMPL implements EmployeeService { @Autowired private EmployeeRepo employeeRepo; @Override public String addEmployee(EmployeeDTO employeeDTO) { Employee employee = new Employee( employeeDTO.getEmployeeid(), employeeDTO.getEmployeename(), employeeDTO.getAddress(), employeeDTO.getMobile() ); employeeRepo.save(employee); return employee.getEmployeename(); } } |
EmployeeRepo
1 2 3 4 5 6 7 8 9 10 11 | package com.example.Registation.Repo; import com.example.Registation.Entity.Employee; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.config.EnableJpaRepositories; import org.springframework.stereotype.Repository; @EnableJpaRepositories @Repository public interface EmployeeRepo extends JpaRepository<Employee,Integer> { } |
then run the Back-end Spring Boot Application.
React
React is a single page frond-end application.
Install React
1 2 3 | npx create-react-app frontend-app cd my-app npm start |
create the folder components inside the components folders create the file EmployeeRegistation.js.
Install
axios use to manage the Api Requests.
1 | npm install axios |
EmployeeRegistation.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import axios from 'axios'; import {useState } from "react"; function EmployeeRegistation() { const [id, setId] = useState(''); const [name, setName] = useState(""); const [address, setAddress] = useState(""); const [mobile, setMobile] = useState(""); async function save(event) { event.preventDefault(); try { await axios.post("http://localhost:8085/api/v1/employee/save", { employeename: name, address : address, mobile : mobile }); alert("Employee Registation Successfully"); setId(""); setName(""); setAddress(""); setMobile(""); } catch(err) { alert("User Registation Failed"); } } return ( <div class="container mt-4" > <form> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" placeholder="Enter Name" value={name} onChange={(event) => { setName(event.target.value); }} /> </div> <div class="form-group"> <label>Address</label> <input type="text" class="form-control" placeholder="Enter Address" value={address} onChange={(event) => { setAddress(event.target.value); }} /> </div> <div class="form-group"> <label>Mobile</label> <input type="text" class="form-control" placeholder="Enter Mobile" value={mobile} onChange={(event) => { setMobile(event.target.value); }} /> </div> <button class="btn btn-primary mt-4" onClick={save}>Register</button> </form> </div> ); } export default EmployeeRegistation; |
i have attached the video link below. which will do this tutorials step by step