1.
**Setup the Spring Boot Project**
Use Spring Initializr (https://start.spring.io/) to generate a new Spring Boot project with the
following dependencies:
- Spring Web
- Spring Data JPA
- H2 Database (for simplicity)
- Lombok (optional, for reducing boilerplate code)
2. **Configure the Application**
- `application.properties`
```properties
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.h2.console.enabled=true
3. **Define the Entity**
- `Employee.java`
```java
package com.example.employeemanagement.model;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
@Entity
public class Employee {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private String role;
// Getters and setters
```
4. **Create the Repository**
- `EmployeeRepository.java`
```java
package com.example.employeemanagement.repository;
import com.example.employeemanagement.model.Employee;
import org.springframework.data.jpa.repository.JpaRepository;
public interface EmployeeRepository extends JpaRepository<Employee, Long> {
5. **Implement the Service**
- `EmployeeService.java`
```java
package com.example.employeemanagement.se
@Service
public class EmployeeService {
@Autowired
private EmployeeRepository employeeRepository;
public List<Employee> getAllEmployees() {
return employeeRepository.findAll();
public Optional<Employee> getEmployeeById(Long id) {
return employeeRepository.findById(id);
}
public Employee saveEmployee(Employee employee) {
return employeeRepository.save(employee);
public void deleteEmployee(Long id) {
employeeRepository.deleteById(id);
6. **Create the Controller**
- `EmployeeController.java`
```java
package com.example.employeemanagement.controller;
import com.example.employeemanagement.model.Employee;
import com.example.employeemanagement.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Optional;
@RestController
@RequestMapping("/api/employees")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@GetMapping
public List<Employee> getAllEmployees() {
return employeeService.getAllEmployees();
@GetMapping("/{id}")
public ResponseEntity<Employee> getEmployeeById(@PathVariable Long id) {
Optional<Employee> employee = employeeService.getEmployeeById(id);
return employee.map(ResponseEntity::ok).orElseGet(() ->
ResponseEntity.notFound().build());
@PostMapping
public Employee createEmployee(@RequestBody Employee employee) {
return employeeService.saveEmployee(employee);
}
@PutMapping("/{id}")
public ResponseEntity<Employee> updateEmployee(@PathVariable Long id,
@RequestBody Employee employeeDetails) {
Optional<Employee> employeeOptional = employeeService.getEmployeeById(id);
if (employeeOptional.isPresent()) {
Employee employee = employeeOptional.get();
employee.setName(employeeDetails.getName());
employee.setRole(employeeDetails.getRole());
return ResponseEntity.ok(employeeService.saveEmployee(employee));
} else {
return ResponseEntity.notFound().build();
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteEmployee(@PathVariable Long id) {
employeeService.deleteEmployee(id);
return ResponseEntity.noContent().build();
```
7. **Run the Application**
Run the application by executing the main method in the
`EmployeeManagementApplication` class.
### Part 2: React Application
1. **Create a React Application**
Use `create-react-app` to set up the frontend.
```bash
npx create-react-app employee-management
cd employee-management
```
2. **Install Axios for HTTP Requests**
```bash
npm install axios
```
3. **Create a Service to Handle API Requests**
- `src/services/EmployeeService.js`
```javascript
import axios from 'axios';
const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/employees";
class EmployeeService {
getEmployees() {
return axios.get(EMPLOYEE_API_BASE_URL);
createEmployee(employee) {
return axios.post(EMPLOYEE_API_BASE_URL, employee);
getEmployeeById(employeeId) {
return axios.get(`${EMPLOYEE_API_BASE_URL}/${employeeId}`);
updateEmployee(employee, employeeId) {
return axios.put(`${EMPLOYEE_API_BASE_URL}/${employeeId}`, employee);
deleteEmployee(employeeId) {
return axios.delete(`${EMPLOYEE_API_BASE_URL}/${employeeId}`);
}
export default new EmployeeService();
```
4. **Create React Components**
- `src/components/EmployeeListComponent.js`
```javascript
import React, { useEffect, useState } from 'react';
import EmployeeService from '../services/EmployeeService';
const EmployeeListComponent = () => {
const [employees, setEmployees] = useState([]);
useEffect(() => {
EmployeeService.getEmployees().then((res) => {
setEmployees(res.data);
});
}, []);
return (
<div>
<h2 className="text-center">Employees List</h2>
<div className="row">
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>Employee Name</th>
<th>Employee Role</th>
</tr>
</thead>
<tbody>
{employees.map((employee) => (
<tr key={employee.id}>
<td>{employee.name}</td>
<td>{employee.role}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default EmployeeListComponent;
`src/components/CreateEmployeeComponent.js`,
`src/components/UpdateEmployeeComponent.js`, and
`src/components/ViewEmployeeComponent.js` will be similar to
`EmployeeListComponent`, making appropriate API calls using `EmployeeService`.
5. **Integrate Components into the Application**
- `src/App.js`
```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import EmployeeListComponent from './components/EmployeeListComponent';
import CreateEmployeeComponent from
'./components/CreateEmployeeComponent';
import UpdateEmployeeComponent from
'./components/UpdateEmployeeComponent';
import ViewEmployeeComponent from './components/ViewEmployeeComponent';
function App() {
return (
<div>
<Router>
<div className="container">
<Switch>
<Route path="/" exact
component={EmployeeListComponent}></Route>
<Route path="/employees"
component={EmployeeListComponent}></Route>
<Route path="/add-employee"
component={CreateEmployeeComponent}></Route>
<Route path="/edit-employee/:id"
component={UpdateEmployeeComponent}></Route>
<Route path="/view-employee/:id"
component={ViewEmployeeComponent}></Route>
</Switch>
</div>
</Router>
</div>
);
export default App;
```
6. **Run the React Application**
```bash
npm start
