Intégration du framework Java et du framework front-end React

Intégration du framework Java et du framework React : Étapes : Mettre en place le framework Java back-end. Créer une structure de projet. Configurez les outils de construction. Créez une application React. Écrivez les points de terminaison de l'API REST. Configurez le mécanisme de communication. Cas pratique (Spring Boot + React) : Code Java : Définition d'un contrôleur API RESTful. Code React : obtenez et affichez les données renvoyées par l'API.

Intégration du framework Java et du framework Front-end React

Dans le développement Web moderne, les frameworks back-end sont souvent utilisés en conjonction avec les frameworks front-end pour créer des applications complexes et interactives. Les frameworks Java sont populaires pour leur stabilité et leur robustesse, tandis que les frameworks React sont connus pour leurs fonctionnalités de composantisation et de gestion d'état.

Étapes d'intégration

L'intégration d'un framework Java et d'un framework React implique généralement les étapes suivantes :

1. Configurer un framework Java backend : Configurer un framework Java sur le serveur, tel que Spring Boot ou Play Framework .
2. Créer une structure de projet : créez une structure de répertoires pour le projet afin de séparer le code Java du code React.
3. Configurer Maven ou Gradle : gérez les dépendances et configurez votre projet à l'aide des outils de build Maven ou Gradle.
4. Create React App : utilisez create-react-app ou des outils similaires pour créer une application React et l'intégrer dans votre projet.
5. Écrire l'API REST : utilisez un framework Java pour écrire les points de terminaison de l'API REST qui seront appelés par votre application React.
6. Configurer la communication : configurez le mécanisme de communication entre le framework Java et l'application React, comme l'utilisation du format JSON ou XML pour transmettre des données.

Cas pratique

Ce qui suit est un cas pratique utilisant l'intégration de Spring Boot et React :

Code Java (contrôleur Spring Boot) :

@RestController
@RequestMapping("/api")
public class UserController {

    @GetMapping("/users")
    public List<User> getAllUsers() {
        // 从数据库中获取所有用户
        return userService.getAllUsers();
    }

}

Code React (composant React) :

import React, { useState, useEffect } from "react";

const UsersList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 从后端获取用户列表
    fetch("/api/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h3 id="用户列表">用户列表</h3>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UsersList;

Démo

Exécutez le serveur Spring Boot et l'application React dans le projet et visitez http://localhost:8080. Cela affichera une application React contenant une liste d'utilisateurs récupérés sur le serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!