Spring Boot - Spring Boot + React + MySQL CRUD example
We will build two projects:
-
sprint boot-backend (server) To develop REST API
-
react-frontend (client) Consume REST API
SpringBoot Employee Backend Service
Configuring MySQL Database
application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/webapp?useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.hibernate.ddl-auto = update
`employee` (
`id` (11) ,
`name` (50) '0' 'latin1_swedish_ci',
`address` (50) '0' 'latin1_swedish_ci',
`salary` '0',
(`id`)
);
Model class Employee.java
springboot.emp.model;
javax.persistence.Column;
javax.persistence.Entity;
javax.persistence.GeneratedValue;
javax.persistence.GenerationType;
javax.persistence.Id;
javax.persistence.Table;
@Entity
@Table
Employee {
@Id
@GeneratedValue(strategy = GenerationType.)
Long id;
@Column
String name;
@Column
String address;
@Column
Double salary;
Employee(Long id, String name, String address, Double salary) {
();
.id = id;
.name = name;
.address = address;
.salary = salary;
}
}
Repository EmployeeRepository.java
springboot.emp.repository;
org.springframework.data.jpa.repository.JpaRepository;
org.springframework.stereotype.Repository;
springboot.emp.model.Employee;
@Repository
EmployeeRepository JpaRepository<Employee, Long>{
}
Exception EmployeeException
springboot.emp.exception;
EmployeeException RuntimeException{
EmployeeException(String message) {
(message);
}
}
Exception EmployeeController
springboot.emp.controller;
java.util.List;
@RestController
@RequestMapping("/api/v1/")
EmployeeController {
@Autowired
EmployeeRepository repository;
@GetMapping("/all")
List<Employee> getAllEmployees(){
repository.findAll();
}
}
Test Rest API
http://localhost:8080/api/v1/all
[
{
"name": "DILEEP",
"address": "XXXXXXXXX",
"salary": 0
},
{
"name": "DILEEP",
"address": "BANGLORE",
"salary": 0
}
]
React Employee Front End
1.Create EmployeeReactApp Empty Repo
Open Visual Studio Code > Terminal
employee-react-app
Start react app
cd employee-react-app
npm start
You can now view employee-react-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.105:3000
Main files
- public/index.html Single page appl n , contains
<div id="root"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
- src/App.js - Contains Component code to generate UI.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Hello, World!!!</h1>
</header>
</div>
);
}
export default App;
- src/index.js - get code from component & replace div content to render UI.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
3. Get All Employees React Code
employee-react-app\src\component\
import React, { Component } from 'react';
import EmployeeService from '../services/EmployeeService';
class ListAllEmployeesComponent extends Component {
constructor(props) {
super(props)
this.state = {
employees: []
}
}
componentDidMount(){
EmployeeService.getEmployees().then((res) => {
this.setState({ employees: res.data});
});
}
render() {
return (
<div>
<table className="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Salary</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{
this.state.employees.map(
employee =>
<tr key = {employee.id}>
<td> {employee.name} </td>
<td> {employee.address}</td>
<td> {employee.salary}</td>
<td>
Action
</td>
</tr>
)
}
</tbody>
</table>
</div>
);
}
}
export default ListAllEmployeesComponent;
employee-react-app\src\services\
import axios from 'axios';
const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/v1/all";
class EmployeeService {
getEmployees() {
return axios.get(EMPLOYEE_API_BASE_URL);
}
}
export default new EmployeeService()
Now if we open Root URL, it will display the Table Data.
3. Header & Footer
employee-react-app\src\component\
import React, { Component } from 'react';
class HeaderComponent extends Component {
render() {
return (
<div>
<nav class="navbar navbar-dark bg-dark" >
<div className="container">
<h3 style=color>EmployeeServices G </h3>
</div>
</nav>
</div>
);
}
}
export default HeaderComponent;
employee-react-app\src\component\
import React, { Component } from 'react';
class FooterComponent extends Component {
render() {
return (
<div>
<footer className="footer">
<div className="container">
<span className="text-muted">
?SatyaCodes 2020 , Satya Kaveti's Writing.
</span>
</div>
</footer>
</div>
);
}
}
export default FooterComponent;
employee-react-app\src\
import './App.css';
import HeaderComponent from './component/HeaderComponent';
import FooterComponent from './component/FooterComponent';
import ListAllEmployeesComponent from './component/ListAllEmployeesComponent';
function App() {
return (
<div>
</>
<div className="container">
</>
</div>
</>
</div>
);
}
export default App;
Routing
Install react-router-dom
npm install react-router-dom --save
import './App.css';
import HeaderComponent from './component/HeaderComponent';
import HomeComponent from './component/HomeComponent';
import FooterComponent from './component/FooterComponent';
import ListAllEmployeesComponent from './component/ListAllEmployeesComponent';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Employee from './component/Employee';
function App() {
return (
<div>
<HeaderComponent />
<BrowserRouter>
<div className="container">
<Switch>
<Route exact path="/" component={HomeComponent}></Route>
<Route exact path="/one" component={Employee}></Route>
<Route exact path="/all" component={ListAllEmployeesComponent}></Route>
<Route component={Error} />
</Switch>
</div>
</BrowserRouter>
<FooterComponent />
</div>
);
}
export default App;
Complete Code. Github
https://github.com/smlcodes/Books-Sync-Gitlab/tree/main/Codes/employee-react-app
Ref.
https://github.com/RameshMF/ReactJS-Spring-Boot-CRUD-Full-Stack-App
https://www.javaguides.net/2020/07/spring-boot-react-js-crud-example-tutorial.html
https://www.youtube.com/watch?v=n43h1eJ2EUE&list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr