28. Kết Nối React Js Với Backend Spring Mvc

Kết nối ReactJS với backend Spring MVC có thể thực hiện thông qua giao thức HTTP, thường là sử dụng REST API. Dưới đây là các bước cơ bản để kết nối hai phần này với nhau:

Xây dựng REST API bằng Spring MVC:
- Đảm bảo bạn đã xây dựng các Controller trong Spring MVC để xử lý các yêu cầu từ phía React.
- Sử dụng các annotation như @RestController, @RequestMapping, @GetMapping, @PostMapping, v.v. để xác định các endpoint API và phương thức xử lý yêu cầu.
Frontend React:
- Sử dụng thư viện như axios hoặc fetch để thực hiện các yêu cầu HTTP từ React tới API của Spring MVC.
- Đối với ví dụ, tạo một component React để gửi yêu cầu và nhận dữ liệu từ backend:

jsx

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Gửi yêu cầu GET đến endpoint của Spring MVC API
    axios.get('/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from Backend</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Cấu hình CORS (Cross-Origin Resource Sharing):
- CORS là cơ chế cho phép các trang web trong một tên miền khác gửi yêu cầu đến tài nguyên ở một tên miền khác.
- Trong ứng dụng Spring, bạn cần cấu hình CORS để cho phép React gửi yêu cầu đến backend. Điều này thường thực hiện thông qua cấu hình trong file WebMvcConfigurer hoặc bằng cách sử dụng @CrossOrigin annotation trên các controller.
Xử lý dữ liệu ở backend:
- Trong controller của Spring MVC, xử lý yêu cầu từ React và trả về dữ liệu theo đúng định dạng (thường là JSON).
- Sử dụng các service và repository để truy vấn dữ liệu từ cơ sở dữ liệu (nếu cần).
Thực hiện các yêu cầu khác:
- Ngoài yêu cầu GET, bạn có thể thực hiện các yêu cầu POST, PUT, DELETE từ React tới Spring MVC bằng cách sử dụng thư viện như axios.

Lưu ý rằng việc kết nối React với Spring MVC yêu cầu bạn hiểu về cách làm việc của REST API và cách cấu hình trong cả hai phía.

Dưới đây là một ví dụ cụ thể về cách kết nối ReactJS với backend Spring MVC bằng việc tạo một ứng dụng đơn giản để hiển thị danh sách sản phẩm từ backend:

Backend Spring MVC:

Đầu tiên, chúng ta cần xây dựng một REST API để cung cấp danh sách sản phẩm. Dưới đây là một ví dụ về cách làm điều này:

java

@RestController
@RequestMapping("/api/products")
public class ProductController {
    private List<Product> productList = new ArrayList<>();

    @GetMapping
    public List<Product> getProducts() {
        return productList;
    }

    @PostMapping
    public void addProduct(@RequestBody Product product) {
        productList.add(product);
    }
}

Frontend React:

Tiếp theo, chúng ta sẽ tạo một ứng dụng React để hiển thị danh sách sản phẩm từ API:

jsx

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

function App() {
  const [products, setProducts] = useState([]);
  const [productName, setProductName] = useState('');

  useEffect(() => {
    // Gửi yêu cầu GET đến API để lấy danh sách sản phẩm
    axios.get('/api/products')
      .then(response => {
        setProducts(response.data);
      })
      .catch(error => {
        console.error('Error fetching products:', error);
      });
  }, []);

  const handleAddProduct = () => {
    // Gửi yêu cầu POST để thêm sản phẩm mới
    axios.post('/api/products', { name: productName })
      .then(response => {
        setProducts([...products, response.data]);
        setProductName('');
      })
      .catch(error => {
        console.error('Error adding product:', error);
      });
  };

  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          placeholder="Enter product name"
          value={productName}
          onChange={e => setProductName(e.target.value)}
        />
        <button onClick={handleAddProduct}>Add Product</button>
      </div>
    </div>
  );
}

export default App;

Trong ví dụ này, chúng ta sử dụng axios để thực hiện các yêu cầu GET và POST tới API của Spring MVC. Khi người dùng nhập tên sản phẩm và nhấn nút “Add Product”, ứng dụng sẽ gửi yêu cầu POST để thêm sản phẩm mới và sau đó cập nhật danh sách sản phẩm. Trên đây là ví dụ về kết nối react js với backend spring mvc.

Leave a Comment Cancel Reply