Day-4 - Project Using Spring Web MVC + React

Introduction

In Day 3 I Added Spring Boot And Data JPA to get Data From MySQL Database. It is Console Base App means we can only see output in console. In Day 4 I took my Product Management app to the next level by integrating React!

Important Links:

Video Session Link: Link

Frontend(React) Code Link: Link

Backend(Spring Web MVC) Code Link: Link

Complete Project Video(Must Watch): Link

Spring Web MVC

A Spring MVC is a Java framework which is used to build web applications. It follows the Model-View-Controller design pattern.

1. Model:

The Model represents the data and business logic of the application. It encapsulates the state and behavior of the application's objects. The Model layer is responsible for data manipulation, validation, and storage. It interacts with the database or any other data sources, ensuring the integrity and consistency of the data.

2. View:

The View is responsible for the presentation and visualization of the application's data. It displays information to the users in a user-friendly format. The View layer receives input from the users and sends it to the Controller for processing. It can include HTML templates, user interfaces, or any other means of presenting data to the user.

3. Controller:

The Controller acts as an intermediary between the Model and the View. It receives input from the users via the View and processes it accordingly. The Controller updates the Model based on the user's actions and decides which View to render in response. It handles the flow of data between the Model and the View, ensuring proper communication and synchronization.

I Created ProductController to handle navigation and flow.

@RestController
@CrossOrigin("http://localhost:3000/")

public class ProductController {
    
    @Autowired
    ProductService service;


    @GetMapping("/products")
    public List<Product> getAllProducts(){
        return service.getAllProducts();
    }


    @GetMapping("/products/{name}")
    public  List<Product> getProduct(@PathVariable String name)
    {
        return service.getProductByName(name);
    }


    @GetMapping("/products/findall/{name}")
    public  List<Product> getByText(@PathVariable String name)
    {
        return service.getProductWithText(name);
    }


    @GetMapping("/products/place/{place}")
    public  List<Product> getPlace(@PathVariable String place)
    {
        return service.getByPlace(place);
    }


    @GetMapping("/products/outwarranty")
    public  List<Product> getOutOfWarranty()
    {
        return service.getOutOfWarranty();
    }


    @GetMapping("/products/countoutwarranty")
    public  int countOutOfWarranty()
    {
        return service.countOutOfWarranty();
    }


    @GetMapping("/products/countproducts")
    public  int countproducts()
    {
        return service.countproducts();
    }


    @GetMapping("/products/counttypes")
    public  int counttypes()
    {
        return service.counttypes();
    }


    @GetMapping("/products/countplaces")
    public  int countplaces()
    {
        return service.countplaces();
    }


    @PostMapping("/product")
    public void addProduct(@RequestBody Product p)
    {
        service.addProduct(p);
    }        

@GetMapping:

@GetMapping is an annotation used to map HTTP GET requests to a specific method or endpoint in a controller class. When a GET request is made to the specified endpoint, the associated method is executed to handle the request and provide the appropriate response. It allows you to retrieve data or perform read operations.

For example, @GetMapping("/products"). When a GET request is made to the "/products" endpoint, this method will be invoked to retrieve and return a list of products.

@PostMapping:

@PostMapping is an annotation used to map HTTP POST requests to a specific method or endpoint in a controller class. POST requests are commonly used for creating or submitting data to the server. When a POST request is made to the specified endpoint, the associated method is executed to handle the request and perform the necessary actions, such as saving the data to a database.

For example, @PostMapping("/product/"). When a POST request is made to the "/product" endpoint with data containing product information, this method will be invoked to handle the request and save the product to the appropriate storage.

After, Backend I Started Work On Frontend Using React. Using axios library i send get and post request to Backend. For Example

    const loadProducts = async () => 
        const result = await axios.get("http://localhost:8080/products");
        setProducts(result.data);
    }{        

The loadProducts Function uses the axios library to send an HTTP GET request to the URL "http://localhost:8080/products" and retrieve data from the backend.

Checkout GitHub To View Code:

Thanks To  Navin Reddy  Sir To learn me this new concepts. In this article I tried my best to explain. Thanks!