1.Entity:
package com.example.demo.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
@Entity
@NoArgsConstructor
@AllArgsConstructor
@Getter
@Table(name="product")
public class Product {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getImg() {
return img;
}
public void setImg(String img) {
this.img = img;
}
public Integer getRating() {
return rating;
}
public void setRating(Integer rating) {
this.rating = rating;
}
public Integer getStock() {
return stock;
}
public void setStock(Integer stock) {
this.stock = stock;
}
public Long getPrice() {
return price;
}
public void setPrice(Long price) {
this.price = price;
}
private String name, description, img;
private Integer rating, stock;
private Long price;
}
2.repository:
package com.example.demo.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.example.demo.entity.Product;
@Repository
public interface ProductRepository extends
JpaRepository<Product, Long>{
}
3.Service:
package com.example.demo.service;
import java.util.List;
import org.springframework.stereotype.Service;
import com.example.demo.entity.Product;
import com.example.demo.repository.ProductRepository;
@Service
public class ProductService {
private final ProductRepository repository;
public ProductService(ProductRepository repository)
{
this.repository = repository;
}
public List<Product> getAllProducts()
{
return repository.findAll();
}
public Product addProduct(Product product)
{
return repository.save(product);
}
}
4.Controller:
package com.example.demo.controller;
import java.util.List;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.example.demo.entity.Product;
import com.example.demo.service.ProductService;
@RestController
@RequestMapping("/api/products")
public class ProductController {
private final ProductService service;
public ProductController(ProductService service)
{
this.service = service;
}
@GetMapping
public List<Product> showAllProducts()
{
return service.getAllProducts();
}
@PostMapping
public Product addProduct(@RequestBody Product product)
{
return service.addProduct(product);
}
}
neelakandan@neelakandan-HP-Laptop-15s-eq2xxx:~$ sudo -i -u postgres
[sudo] password for neelakandan:
postgres@neelakandan-HP-Laptop-15s-eq2xxx:~$ psql
psql (16.8 (Ubuntu 16.8-0ubuntu0.24.04.1))
Type "help" for help.
postgres=# \c ecommerce
You are now connected to database "ecommerce" as user "postgres".
ecommerce=# \d
List of relations
Schema | Name | Type | Owner
--------+----------------+----------+-------
public | cart | table | ecom3
public | cart_id_seq | sequence | ecom3
public | payment | table | ecom3
public | payment_id_seq | sequence | ecom3
public | product | table | ecom3
public | product_id_seq | sequence | ecom3
(6 rows)
ecommerce=# \d product
ecommerce=# SELECT * FROM product
ecommerce-# SELECT * FROM product
ecommerce-# \l
ecommerce-# ^C
ecommerce=# SELECT * FROM product;
id | description | img | name | price | rating | stock
----+-------------+--------+--------+-------+--------+-------
1 | Good prod | link-1 | prod-1 | 10000 | 4 | 10
(1 row)
ecommerce=#
ERROR: database "ecommerce" is being accessed by other users
DETAIL: There are 10 other sessions using the database.
**
*Create file called APP.js and base below code *
import logo from './logo.svg';
import './App.css';
import ProductCard from './components/ProductCard';
import { getProducts } from './api';
import { useEffect, useState } from 'react';
function App() {
const [productList,setProductList] = useState([]);
useEffect(()=>{
getProducts()
.then((res)=>setProductList(res.data))
.catch((err)=>console.log(err));
},[])
return (
<div className="App">
<header className="App-header">
{
productList.map((prod)=><ProductCard items={prod}/>)
// <ProductCard items = {productList[3]}/>
}
</header>
</div>
);
}
export default App;
API Endpoint URL** :localhost:8084/api/products
In a React application, you can send data to a backend server (like a Spring Boot API) using a POST request. To do this, we use the fetch() method or a library like axios. In the example above, we created a simple form that accepts a product's name and price. When the form is submitted, the handleSubmit function is called. Inside handleSubmit, we send a POST request to http://localhost:8084/api/products, with the form data converted into JSON format. The server is expected to accept this data, save it (e.g., into a database), and return a response. To allow this, the Spring Boot backend must have a controller method with @PostMapping("/api/products") and accept the incoming JSON using @RequestBody. This setup allows the React frontend and Spring Boot backend to communicate, making it possible to add new products dynamically from the user interface.
*Create file called API.js and base below code *
import axios from "axios";
export const getProducts = ()=> axios.get("http://localhost:8084/api/products");
Create file component file and create file called name.jsx
function ProductCard({items})
{
return(
<div>
<img src={items.img} alt="" />
name : {items.name}
price : {items.price}
</div>
)
}
export default ProductCard;
Top comments (0)