Spring boot with React Full Stack Project

Posted on December 19, 2022

20 min read

327

This tutorial will teach you how to do the full stack development application using Spring boot with React that are CREATE, RETIEVE, UPDATE and DELETE and SEARCH using mysql Database. The INSERT, SELECT, UPDATE and DELETE statements can be used in any database system, because this is support by all relational database systems.

Crud function how to perform the RESTful Web Service let discuss with following annotations.

@PostMapping: annotation which used to create new record.
@GetMapping: annotation which used to reads a record.
@RequestMapping: annotation which used to search the record.
@PutMapping: annotation which used to update the existing record.
@DeleteMapping: annotation which used to delete the record.

Lets Started Project

Spring Boot – Back End Application

Angular – Front End Application

Spring Boot

Create the Package Customer Controller

Inside the Package create the class CustomerController.java

CustomerController.java

package com.Project.SpringAngular.CustomerController;
import com.Project.SpringAngular.DTO.CustomerDTO;
import com.Project.SpringAngular.DTO.CustomerSaveDTO;
import com.Project.SpringAngular.DTO.CustomerUpdateDTO;
import com.Project.SpringAngular.Service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("api/v1/customer")
public class CustomerController
{
    @Autowired
    private CustomerService customerService;

    @PostMapping(path = "/save")

    public String saveCustomer(@RequestBody CustomerSaveDTO customerSaveDTO)
    {
        String id = customerService.addCustomer(customerSaveDTO);
        return id;
    }

    @GetMapping(path = "/getAllCustomer")
    public List<CustomerDTO> getAllCustomer()
    {
       List<CustomerDTO>allCustomers = customerService.getAllCustomer();
       return allCustomers;
    }

    @PutMapping(path = "/update")

    public String updateCustomer(@RequestBody CustomerUpdateDTO customerUpdateDTO)
    {
        String id = customerService.updateCustomers(customerUpdateDTO);
        return id;
    }

    @DeleteMapping(path = "/deletecustomer/{id}")
    public String deleteCustomer(@PathVariable(value = "id") int id)
    {
        boolean deletecustomer = customerService.deleteCustomer(id);
        return "deleted";
    }

}

package com.Project.SpringAngular.CustomerController;

import com.Project.SpringAngular.DTO.CustomerDTO;

import com.Project.SpringAngular.DTO.CustomerSaveDTO;

import com.Project.SpringAngular.DTO.CustomerUpdateDTO;

import com.Project.SpringAngular.Service.CustomerService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController

@CrossOrigin

@RequestMapping("api/v1/customer")

public class CustomerController

{

@Autowired

private CustomerService customerService;

@PostMapping(path = "/save")

public String saveCustomer(@RequestBody CustomerSaveDTO customerSaveDTO)

{

String id = customerService.addCustomer(customerSaveDTO);

return id;

}

@GetMapping(path = "/getAllCustomer")

public List<CustomerDTO> getAllCustomer()

{

List<CustomerDTO>allCustomers = customerService.getAllCustomer();

return allCustomers;

}

@PutMapping(path = "/update")

public String updateCustomer(@RequestBody CustomerUpdateDTO customerUpdateDTO)

{

String id = customerService.updateCustomers(customerUpdateDTO);

return id;

}

@DeleteMapping(path = "/deletecustomer/{id}")

public String deleteCustomer(@PathVariable(value = "id") int id)

{

boolean deletecustomer = customerService.deleteCustomer(id);

return "deleted";

}

Create the Package entity

Inside the Package create the class Customer

package com.Project.SpringAngular.entity;

import javax.persistence.*;
@Entity
@Table(name = "customer")
public class Customer {
    @Id
    @Column(name = "customer_id", length = 50)
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int customerid;

    @Column(name = "customer_name", length = 50)
    private String customername;

    @Column(name = "customer_address", length = 60)
    private String customeraddress;

    @Column(name = "mobile", length = 12)
    private int mobile;

    public Customer(int customerid, String customername, String customeraddress, int mobile) {
        this.customerid = customerid;
        this.customername = customername;
        this.customeraddress = customeraddress;
        this.mobile = mobile;
    }

    public Customer() {
    }

    public Customer(String customername, String customeraddress, int mobile) {
        this.customername = customername;
        this.customeraddress = customeraddress;
        this.mobile = mobile;
    }

    public int getCustomerid() {
        return customerid;
    }

    public void setCustomerid(int customerid) {
        this.customerid = customerid;
    }

    public String getCustomername() {
        return customername;
    }

    public void setCustomername(String customername) {
        this.customername = customername;
    }

    public String getCustomeraddress() {
        return customeraddress;
    }

    public void setCustomeraddress(String customeraddress) {
        this.customeraddress = customeraddress;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "Customer{" +
                "customerid=" + customerid +
                ", customername='" + customername + '\'' +
                ", customeraddress='" + customeraddress + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

package com.Project.SpringAngular.entity;

import javax.persistence.*;

@Entity

@Table(name = "customer")

public class Customer {

@Id

@Column(name = "customer_id", length = 50)

@GeneratedValue(strategy = GenerationType.AUTO)

private int customerid;

@Column(name = "customer_name", length = 50)

private String customername;

@Column(name = "customer_address", length = 60)

private String customeraddress;

@Column(name = "mobile", length = 12)

private int mobile;

public Customer(int customerid, String customername, String customeraddress, int mobile) {

this.customerid = customerid;

this.customername = customername;

this.customeraddress = customeraddress;

this.mobile = mobile;

}

public Customer() {

}

public Customer(String customername, String customeraddress, int mobile) {

this.customername = customername;

this.customeraddress = customeraddress;

this.mobile = mobile;

}

public int getCustomerid() {

return customerid;

}

public void setCustomerid(int customerid) {

this.customerid = customerid;

}

public String getCustomername() {

return customername;

}

public void setCustomername(String customername) {

this.customername = customername;

}

public String getCustomeraddress() {

return customeraddress;

}

public void setCustomeraddress(String customeraddress) {

this.customeraddress = customeraddress;

}

public int getMobile() {

return mobile;

}

public void setMobile(int mobile) {

this.mobile = mobile;

}

@Override

public String toString() {

return "Customer{" +

"customerid=" + customerid +

", customername='" + customername + '\'' +

", customeraddress='" + customeraddress + '\'' +

", mobile=" + mobile +

'}';

}

Create the Package DTO

Inside the Package create the class CustomerDTO and CustomerSaveDTO and
CustomerUpdateDTO

CustomerDTO .java

package com.Project.SpringAngular.DTO;

import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

public class CustomerDTO {


    private int customerid;
    private String customername;
    private String customeraddress;
    private int mobile;

    public CustomerDTO(int customerid, String customername, String customeraddress, int mobile) {
        this.customerid = customerid;
        this.customername = customername;
        this.customeraddress = customeraddress;
        this.mobile = mobile;
    }

    public CustomerDTO() {
    }

    public int getCustomerid() {
        return customerid;
    }

    public void setCustomerid(int customerid) {
        this.customerid = customerid;
    }

    public String getCustomername() {
        return customername;
    }

    public void setCustomername(String customername) {
        this.customername = customername;
    }

    public String getCustomeraddress() {
        return customeraddress;
    }

    public void setCustomeraddress(String customeraddress) {
        this.customeraddress = customeraddress;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "CustomerDTO{" +
                "customerid=" + customerid +
                ", customername='" + customername + '\'' +
                ", customeraddress='" + customeraddress + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

package com.Project.SpringAngular.DTO;

import javax.persistence.Column;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

public class CustomerDTO {

private int customerid;

private String customername;

private String customeraddress;

private int mobile;

public CustomerDTO(int customerid, String customername, String customeraddress, int mobile) {

this.customerid = customerid;

this.customername = customername;

this.customeraddress = customeraddress;

this.mobile = mobile;

}

public CustomerDTO() {

}

public int getCustomerid() {

return customerid;

}

public void setCustomerid(int customerid) {

this.customerid = customerid;

}

public String getCustomername() {

return customername;

}

public void setCustomername(String customername) {

this.customername = customername;

}

public String getCustomeraddress() {

return customeraddress;

}

public void setCustomeraddress(String customeraddress) {

this.customeraddress = customeraddress;

}

public int getMobile() {

return mobile;

}

public void setMobile(int mobile) {

this.mobile = mobile;

}

@Override

public String toString() {

return "CustomerDTO{" +

"customerid=" + customerid +

", customername='" + customername + '\'' +

", customeraddress='" + customeraddress + '\'' +

", mobile=" + mobile +

'}';

}

CustomerSaveDTO

package com.Project.SpringAngular.DTO;

public class CustomerSaveDTO {

    private String customername;
    private String customeraddress;
    private int mobile;

    public CustomerSaveDTO(String customername, String customeraddress, int mobile) {
        this.customername = customername;
        this.customeraddress = customeraddress;
        this.mobile = mobile;
    }

    public CustomerSaveDTO() {
    }

    public String getCustomername() {
        return customername;
    }

    public void setCustomername(String customername) {
        this.customername = customername;
    }

    public String getCustomeraddress() {
        return customeraddress;
    }

    public void setCustomeraddress(String customeraddress) {
        this.customeraddress = customeraddress;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "CustomerSaveDTO{" +
                "customername='" + customername + '\'' +
                ", customeraddress='" + customeraddress + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

package com.Project.SpringAngular.DTO;

public class CustomerSaveDTO {

private String customername;

private String customeraddress;

private int mobile;

public CustomerSaveDTO(String customername, String customeraddress, int mobile) {

this.customername = customername;

this.customeraddress = customeraddress;

this.mobile = mobile;

}

public CustomerSaveDTO() {

}

public String getCustomername() {

return customername;

}

public void setCustomername(String customername) {

this.customername = customername;

}

public String getCustomeraddress() {

return customeraddress;

}

public void setCustomeraddress(String customeraddress) {

this.customeraddress = customeraddress;

}

public int getMobile() {

return mobile;

}

public void setMobile(int mobile) {

this.mobile = mobile;

}

@Override

public String toString() {

return "CustomerSaveDTO{" +

"customername='" + customername + '\'' +

", customeraddress='" + customeraddress + '\'' +

", mobile=" + mobile +

'}';

}

CustomerUpdateDTO

package com.Project.SpringAngular.DTO;

public class CustomerUpdateDTO {
    private int customerid;
    private String customername;
    private String customeraddress;
    private int mobile;

    public CustomerUpdateDTO(int customerid, String customername, String customeraddress, int mobile) {
        this.customerid = customerid;
        this.customername = customername;
        this.customeraddress = customeraddress;
        this.mobile = mobile;
    }

    public CustomerUpdateDTO() {
    }

    public int getCustomerid() {
        return customerid;
    }

    public void setCustomerid(int customerid) {
        this.customerid = customerid;
    }

    public String getCustomername() {
        return customername;
    }

    public void setCustomername(String customername) {
        this.customername = customername;
    }

    public String getCustomeraddress() {
        return customeraddress;
    }

    public void setCustomeraddress(String customeraddress) {
        this.customeraddress = customeraddress;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "CustomerDTO{" +
                "customerid=" + customerid +
                ", customername='" + customername + '\'' +
                ", customeraddress='" + customeraddress + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

package com.Project.SpringAngular.DTO;

public class CustomerUpdateDTO {

private int customerid;

private String customername;

private String customeraddress;

private int mobile;

public CustomerUpdateDTO(int customerid, String customername, String customeraddress, int mobile) {

this.customerid = customerid;

this.customername = customername;

this.customeraddress = customeraddress;

this.mobile = mobile;

}

public CustomerUpdateDTO() {

}

public int getCustomerid() {

return customerid;

}

public void setCustomerid(int customerid) {

this.customerid = customerid;

}

public String getCustomername() {

return customername;

}

public void setCustomername(String customername) {

this.customername = customername;

}

public String getCustomeraddress() {

return customeraddress;

}

public void setCustomeraddress(String customeraddress) {

this.customeraddress = customeraddress;

}

public int getMobile() {

return mobile;

}

public void setMobile(int mobile) {

this.mobile = mobile;

}

@Override

public String toString() {

return "CustomerDTO{" +

"customerid=" + customerid +

", customername='" + customername + '\'' +

", customeraddress='" + customeraddress + '\'' +

", mobile=" + mobile +

'}';

}

Create the Package Customer Service

Inside the Package create the interface CustomerService.java and CustomerServiceIMPL

CustomerService.java

package com.Project.SpringAngular.Service;

import com.Project.SpringAngular.DTO.CustomerDTO;
import com.Project.SpringAngular.DTO.CustomerSaveDTO;
import com.Project.SpringAngular.DTO.CustomerUpdateDTO;

import java.util.List;

public interface CustomerService {
    String addCustomer(CustomerSaveDTO customerSaveDTO);

    List<CustomerDTO> getAllCustomer();

    String updateCustomers(CustomerUpdateDTO customerUpdateDTO);

    boolean deleteCustomer(int id);
}

package com.Project.SpringAngular.Service;

import com.Project.SpringAngular.DTO.CustomerDTO;

import com.Project.SpringAngular.DTO.CustomerSaveDTO;

import com.Project.SpringAngular.DTO.CustomerUpdateDTO;

import java.util.List;

public interface CustomerService {

String addCustomer(CustomerSaveDTO customerSaveDTO);

List<CustomerDTO> getAllCustomer();

String updateCustomers(CustomerUpdateDTO customerUpdateDTO);

boolean deleteCustomer(int id);

}

CustomerServiceIMPL.java

package com.Project.SpringAngular.Service;

import com.Project.SpringAngular.CustomerRepo.CustomerRepo;
import com.Project.SpringAngular.DTO.CustomerDTO;
import com.Project.SpringAngular.DTO.CustomerSaveDTO;
import com.Project.SpringAngular.DTO.CustomerUpdateDTO;
import com.Project.SpringAngular.entity.Customer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

@Service
public class CustomerServiceIMPL implements CustomerService
{
    @Autowired
    private CustomerRepo customerRepo;

    @Override
    public String addCustomer(CustomerSaveDTO customerSaveDTO)
    {
        Customer customer = new Customer(

                customerSaveDTO.getCustomername(),
                customerSaveDTO.getCustomeraddress(),
                customerSaveDTO.getMobile()
        );
        customerRepo.save(customer);
        return customer.getCustomername();
    }

    @Override
    public List<CustomerDTO> getAllCustomer() {
       List<Customer> getCustomers = customerRepo.findAll();
       List<CustomerDTO> customerDTOList = new ArrayList<>();
       for(Customer a:getCustomers)
       {
           CustomerDTO customerDTO = new CustomerDTO(

                   a.getCustomerid(),
                   a.getCustomername(),
                   a.getCustomeraddress(),
                   a.getMobile()
           );
           customerDTOList.add(customerDTO);
       }

       return  customerDTOList;
    }

    @Override
    public String updateCustomers(CustomerUpdateDTO customerUpdateDTO)
    {
        if (customerRepo.existsById(customerUpdateDTO.getCustomerid())) {
            Customer customer = customerRepo.getById(customerUpdateDTO.getCustomerid());


            customer.setCustomername(customerUpdateDTO.getCustomername());
            customer.setCustomeraddress(customerUpdateDTO.getCustomeraddress());
            customer.setMobile(customerUpdateDTO.getMobile());
            customerRepo.save(customer);
        }
            else
            {
                System.out.println("Customer ID do not Exist");
            }

                return null;
        }

    @Override
    public boolean deleteCustomer(int id) {

        if(customerRepo.existsById(id))
        {
            customerRepo.deleteById(id);
        }
        else
        {
            System.out.println("customer id not found");
        }

        return true;
    }
}

package com.Project.SpringAngular.Service;

import com.Project.SpringAngular.CustomerRepo.CustomerRepo;

import com.Project.SpringAngular.DTO.CustomerDTO;

import com.Project.SpringAngular.DTO.CustomerSaveDTO;

import com.Project.SpringAngular.DTO.CustomerUpdateDTO;

import com.Project.SpringAngular.entity.Customer;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import java.util.ArrayList;

import java.util.List;

@Service

public class CustomerServiceIMPL implements CustomerService

{

@Autowired

private CustomerRepo customerRepo;

@Override

public String addCustomer(CustomerSaveDTO customerSaveDTO)

{

Customer customer = new Customer(

customerSaveDTO.getCustomername(),

customerSaveDTO.getCustomeraddress(),

customerSaveDTO.getMobile()

);

customerRepo.save(customer);

return customer.getCustomername();

}

@Override

public List<CustomerDTO> getAllCustomer() {

List<Customer> getCustomers = customerRepo.findAll();

List<CustomerDTO> customerDTOList = new ArrayList<>();

for(Customer a:getCustomers)

{

CustomerDTO customerDTO = new CustomerDTO(

a.getCustomerid(),

a.getCustomername(),

a.getCustomeraddress(),

a.getMobile()

);

customerDTOList.add(customerDTO);

}

return customerDTOList;

}

@Override

public String updateCustomers(CustomerUpdateDTO customerUpdateDTO)

{

if (customerRepo.existsById(customerUpdateDTO.getCustomerid())) {

Customer customer = customerRepo.getById(customerUpdateDTO.getCustomerid());

customer.setCustomername(customerUpdateDTO.getCustomername());

customer.setCustomeraddress(customerUpdateDTO.getCustomeraddress());

customer.setMobile(customerUpdateDTO.getMobile());

customerRepo.save(customer);

}

else

{

System.out.println("Customer ID do not Exist");

}

return null;

}

@Override

public boolean deleteCustomer(int id) {

if(customerRepo.existsById(id))

{

customerRepo.deleteById(id);

}

else

{

System.out.println("customer id not found");

}

return true;

}

Create the Package Customer Controller

Inside the Package create the interface CustomerRepo.java

CustomerRepo.java

package com.Project.SpringAngular.CustomerRepo;

import com.Project.SpringAngular.entity.Customer;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.stereotype.Repository;

@EnableJpaRepositories
@Repository
public interface CustomerRepo extends JpaRepository<Customer,Integer> {
}

package com.Project.SpringAngular.CustomerRepo;

import com.Project.SpringAngular.entity.Customer;

import org.springframework.data.jpa.repository.JpaRepository;

import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

import org.springframework.stereotype.Repository;

@EnableJpaRepositories

@Repository

public interface CustomerRepo extends JpaRepository<Customer,Integer> {

}

Do the Database Configuration in application.properties

spring.application.name=crudnew

server.port=8084

spring.jpa.hibernate.ddl-auto=update
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost:3306/gmsschool?createDatabaseIfNotExist=true
spring.datasource.username=root
spring.datasource.password=root

#jpa vendor adapter configuration
spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect
spring.jpa.generate-ddl=true
spring.jpa.show-sql=true

spring.application.name=crudnew

server.port=8084

spring.jpa.hibernate.ddl-auto=update

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost:3306/gmsschool?createDatabaseIfNotExist=true

spring.datasource.username=root

spring.datasource.password=root

#jpa vendor adapter configuration

spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect

spring.jpa.generate-ddl=true

spring.jpa.show-sql=true

React

Installing React

npx create-react-app front-end

1	npx create-react-app front-end

After complete the installation and run the project using following command.

npm start run

1	npm start run

Now you see the React Welcome Page.

After that open the React project into VS code editor.

now you can see the following file structure

After that install the Bootstrap by typing the following command

npm i bootstrap

1	npm i bootstrap

After that install the axios by typing the following command

npm i axios

1	npm i axios

Creating a new Component CustomerCrud.js

import axios from 'axios';
import {useEffect, useState } from "react";

function CustomerCrud()
{
  const [customerid, setId] = useState('');
  const [customername, setName] = useState("");
  const [customeraddress, setAddress] = useState("");
  const [mobile, setMobile] = useState("");
  const [customers, setUsers] = useState([]);

useEffect(() => {
  (async () => await Load())();
  }, []);


  async function  Load()
  {
     const result = await axios.get(
         "http://localhost:8084/api/v1/customer/getAllCustomer");
         setUsers(result.data);
         console.log(result.data);
  }
 
     async function save(event)
    {
        event.preventDefault();
    try
        {
         await axios.post("http://localhost:8084/api/v1/customer/save",
        {
          customername: customername,
          customeraddress: customeraddress,
          mobile: mobile
        });
          alert("Customer Registation Successfully");
          setId("");
          setName("");
          setAddress("");
          setMobile("");
          Load();
        }
    catch(err)
        {
          alert("User Registation Failed");
        }
   }

   async function editCustomer(customers)
   {
    setName(customers.customername);
    setAddress(customers.customeraddress);
    setMobile(customers.mobile); 
    setId(customers.customerid);
   }

   async function DeleteCustomer(customerid)
   {
        await axios.delete("http://localhost:8084/api/v1/customer/deletecustomer/" + customerid); 
        alert("Employee deleted Successfully");
        Load();
   }

   async function update(event)
   {
    event.preventDefault();

   try
       {
        await axios.put("http://localhost:8084/api/v1/customer/update/",
       {
        customerid: customerid,
        customername: customername,
        customeraddress: customeraddress,
         mobile: mobile
       
       });
         alert("Registation Updateddddd");
         setId("");
         setName("");
         setAddress("");
         setMobile("");
         Load();
       }
   catch(err)
       {
         alert("User Registation Failed");
       }
  }
  return (
    <div>
       <h1>Customer Details</h1>
       <div class="container mt-4" >
          <form>
              <div class="form-group">
               <input  type="text" class="form-control" id="customerid" hidden
               value={customerid}
               onChange={(event) =>
                {
                  setId(event.target.value);      
                }} 
               />
                <label>Customer Name</label>
                <input  type="text" class="form-control" id="customername"
                value={customername}
                onChange={(event) =>
                  {
                    setName(event.target.value);      
                  }}
                />
              </div>
              <div class="form-group">
                <label>Customer Address</label>
                <input  type="text" class="form-control" id="customeraddress" 
                 value={customeraddress}
                  onChange={(event) =>
                    {
                      setAddress(event.target.value);      
                    }}
                />
              </div>

              <div class="form-group">
                <label>Mobile</label>
                <input type="text" class="form-control" id="mobile" 
                  value={mobile}
                onChange={(event) =>
                  {
                    setMobile(event.target.value);      
                  }}
                />
              </div>
              <div>
              <button   class="btn btn-primary mt-4"  onClick={save}>Register</button>
              <button   class="btn btn-warning mt-4"  onClick={update}>Update</button>
              </div>   
            </form>
          </div>

<table class="table table-dark" align="center">
  <thead>
    <tr>
      <th scope="col">Customer Id</th>
      <th scope="col">Customer Name</th>
      <th scope="col">Customer Address</th>
      <th scope="col">Customer Mobile</th>
      
      <th scope="col">Option</th>
    </tr>
  </thead>
       {customers.map(function fn(customer)
       {
            return(
            <tbody>
                <tr>
                <th scope="row">{customer.customerid} </th>
                <td>{customer.customername}</td>
                <td>{customer.customeraddress}</td>
                <td>{customer.mobile}</td>        
                <td>
                    <button type="button" class="btn btn-warning"  onClick={() => editCustomer(customer)} >Edit</button>  
                    <button type="button" class="btn btn-danger" onClick={() => DeleteCustomer(customer.customerid)}>Delete</button>
                </td>
                </tr>
            </tbody>
            );
            })}
            </table>
       </div>
            );
        }
 
export default CustomerCrud;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

import axios from 'axios';

import {useEffect, useState } from "react";

function CustomerCrud()

{

const [customerid, setId] = useState('');

const [customername, setName] = useState("");

const [customeraddress, setAddress] = useState("");

const [mobile, setMobile] = useState("");

const [customers, setUsers] = useState([]);

useEffect(() => {

(async () => await Load())();

}, []);

async function Load()

{

const result = await axios.get(

"http://localhost:8084/api/v1/customer/getAllCustomer");

setUsers(result.data);

console.log(result.data);

}

async function save(event)

{

event.preventDefault();

try

{

await axios.post("http://localhost:8084/api/v1/customer/save",

{

customername: customername,

customeraddress: customeraddress,

mobile: mobile

});

alert("Customer Registation Successfully");

setId("");

setName("");

setAddress("");

setMobile("");

Load();

}

catch(err)

{

alert("User Registation Failed");

}

async function editCustomer(customers)

{

setName(customers.customername);

setAddress(customers.customeraddress);

setMobile(customers.mobile);

setId(customers.customerid);

}

async function DeleteCustomer(customerid)

{

await axios.delete("http://localhost:8084/api/v1/customer/deletecustomer/" + customerid);

alert("Employee deleted Successfully");

Load();

}

async function update(event)

{

event.preventDefault();

try

{

await axios.put("http://localhost:8084/api/v1/customer/update/",

{

customerid: customerid,

customername: customername,

customeraddress: customeraddress,

mobile: mobile

});

alert("Registation Updateddddd");

setId("");

setName("");

setAddress("");

setMobile("");

Load();

}

catch(err)

{

alert("User Registation Failed");

}

return (

<div>

<h1>Customer Details</h1>

<form>

<input type="text" class="form-control" id="customerid" hidden

value={customerid}

onChange={(event) =>

{

setId(event.target.value);

}}

<label>Customer Name</label>

<input type="text" class="form-control" id="customername"

value={customername}

onChange={(event) =>

{

setName(event.target.value);

}}

</div>

<label>Customer Address</label>

<input type="text" class="form-control" id="customeraddress"

value={customeraddress}

onChange={(event) =>

{

setAddress(event.target.value);

}}

</div>

<label>Mobile</label>

<input type="text" class="form-control" id="mobile"

value={mobile}

onChange={(event) =>

{

setMobile(event.target.value);

}}

</div>

<div>

<button class="btn btn-primary mt-4" onClick={save}>Register</button>

<button class="btn btn-warning mt-4" onClick={update}>Update</button>

</div>

</form>

</div>

<thead>

<tr>

<th scope="col">Customer Id</th>

<th scope="col">Customer Name</th>

<th scope="col">Customer Address</th>

<th scope="col">Customer Mobile</th>

<th scope="col">Option</th>

</tr>

</thead>

{customers.map(function fn(customer)

{

return(

<tbody>

<tr>

<th scope="row">{customer.customerid} </th>

<td>{customer.customername}</td>

<td>{customer.customeraddress}</td>

<td>{customer.mobile}</td>

<td>

<button type="button" class="btn btn-warning" onClick={() => editCustomer(customer)} >Edit</button>

<button type="button" class="btn btn-danger" onClick={() => DeleteCustomer(customer.customerid)}>Delete</button>

</td>

</tr>

</tbody>

);

})}

</table>

</div>

);

}

export default CustomerCrud;

Spring boot with React Full Stack Project

Crud function how to perform the RESTful Web Service let discuss with following annotations.

Lets Started Project

Spring Boot

CustomerController.java

CustomerDTO .java

CustomerService.java

CustomerRepo.java

React

i have attached the video link below. which will do this tutorials step by step.

Node js React Mongodb Search Functionality

Node js Angular Mongodb Search Functionality

How to Search Records Node js Express Mongodb

Node js React Mongodb Search Functionality

Inventory Management App in React

Leave a Reply Cancel reply

Check Also

Node js React Mongodb Search Functionality

Recent Posts