La sélection de la pile de technologie Java Spring Boot React peut créer des applications Web complètes stables et efficaces, adaptées aux systèmes de petite et moyenne taille à de grandes entreprises. 2. Le backend utilise Spring Boot pour construire rapidement une API RESTful. Les composants principaux incluent Spring Web, Spring Data JPA, Spring Security, Lombok et Swagger. La séparation frontale est réalisée via @RestController renvoyant les données JSON. 3. Le front-end utilise React (avec Vite ou Create React App) pour développer une interface réactive, utilise Axios pour appeler l'API back-end, React Router gère le routage, combine Usestate ou Redux Toolkit pour la gestion de l'état et utilise CSS ou bootstrap de Tailwind pour embellir l'interface. 4. Pendant la phase de débogage conjointe, le problème du domaine croisé est résolu en configurant les COR ou en réagissant pour configurer le proxy proxy via Spring Boot, garantissant que les demandes frontales peuvent être correctement transmises vers le service back-end. 5. L'authentification adopte le schéma JWT. Une fois que l'utilisateur se connecte, le jeton est généré par Spring Security, et le frontal le stocke et porte l'en-tête d'autorisation pour compléter l'authentification dans les demandes suivantes. 6. La structure du projet recommandée est un répertoire indépendant séparé par les extrémités avant et arrière, ce qui facilite les responsabilités claires et le déploiement indépendant. 7. Déployer la solution facultative 1: Spring Boot est emballé sous forme de pot, et les fichiers statiques de construction React sont hébergés par NGINX et les demandes d'API proxy inverses; ou Solution 2: Mettez le produit React Build dans le répertoire statique de Spring Boot et est servi par le backend, adapté aux petits projets. La pile technologique est mature, a un écosystème parfait et est actif dans la communauté. La clé est de ma?triser la communication de repos, la gestion de l'état, l'authentification JWT et les mécanismes de déploiement NGINX, et de créer efficacement les applications au niveau de l'entreprise.

Si vous souhaitez créer une application Web complète avec une pile technologique moderne, Java Spring Boot React est une option très robuste et largement utilisée. Cette combinaison combine la stabilité du backend avec les fonctionnalités de niveau de l'entreprise (Java / Spring Boot) et l'expérience utilisateur réactive frontale (REACT), et convient au développement d'applications à partir de projets de petite et moyenne taille aux grandes entreprises.

Vous trouverez ci-dessous une route pratique de développement complet couvrant les étapes clés, les points techniques et les meilleures pratiques.

1. Backend: Spring Boot (Java)

Spring Boot simplifie le développement du backend Java, la configuration automatique, les serveurs embarqués et le développement de l'écosystème riche Make REST API Effectif.

Composants centraux:

• Web de printemps : créez une interface reposante
• Spring Data JPA : opérations de base de données (prend en charge MySQL, PostgreSQL, etc.)
• Spring Security : Certification and Authorization (JWT Common)
• Spring Boot Devtools : le déploiement à chaud améliore l'efficacité du développement
• Lombok : Réduisez le code du chauffeur (Getter / Setter / Constructeur)
• Swagger / OpenAPI : Génération de documentation API

Exemple: une API utilisateur simple

 @RestController
@RequestMapping ("/ api / utilisateurs")
classe publique UserController {

    @Autowired
    Service d'utilisateur privé UserService;

    @Getmapping
    Liste publique <Sentraire> getAlUsers () {
        return userservice.findall ();
    }

    @Postmapping
    Utilisateur public CreateUser (@Requestbody User utilisateur) {
        return userService.save (utilisateur);
    }
}

Connexion de la base de données (application.yml):

 printemps:
  DataSource:
    URL: JDBC: mysql: // localhost: 3306 / mydb
    Nom d'utilisateur: racine
    Mot de passe: mot de passe
  JPA:
    hiberner:
      DDL-Auto: mise à jour
    Show-SQL: True

Astuce: utilisez @RestController pour retourner JSON, et les extrémités avant et arrière communiquent via JSON.

2. Front-end: React (Vite ou Create React App)

React fournit un développement d'interface utilisateur composé et améliore la vitesse de construction avec des cha?nes d'outils modernes (comme VITE).

Pile technologique couramment utilisée:

• React JSX : créez une interface utilisateur
• Axios : Envoyez la demande HTTP au backend Spring Boot
• Routeur React : routage frontal
• Gestion de l'état : UseState / UseReducer, des projets complexes peuvent être utilisés avec une bo?te à outils Redux ou une API de contexte
• Tailwind CSS / bootstrap : embellit rapidement l'interface

Exemple: Obtenez la liste d'utilisateurs

 import {useEffecte, useState} de 'react';
importer axios à partir de ?Axios?;

fonction userList () {
  const [utilisateurs, SetUsers] = UseState ([]);

  useEFFECT (() => {
    axios.get ('http: // localhost: 8080 / api / utilisateurs')
      .Then (Response => SetUsers (réponse.data))
      .Catch (err => console.error (err));
  }, []);

  Retour (
    <div>
      <h2> utilisateurs </h2>
      <ul>
        {users.map (user => (
          <li key = {user.id}> {user.name} - {user.email} </li>
        ))}
      </ul>
    </div>
  ));
}

Remarque: Les problèmes de domaine croisé nécessitent que COR soit configuré dans Spring Boot ou pour utiliser un proxy.

3. Débogage conjoint frontal et déploiement

Résoudre le domaine croisé au stade de développement

Ajouter la classe d'application principale de démarrage Spring ou la classe de configuration:

 @Configuration
classe publique Corsconfig {
    @Haricot
    webmvcConfigurer publique CorsConfigurer () {
        renvoyer un nouveau webmvcConfigurer () {
            @Outrepasser
            public void addCorsMappings (Corsregistry Registry) {
                registry.addmapping ("/ api / **")
                        .Allowedorigins ("http: // localhost: 3000")
                        .AllowedMethods ("Get", "Post", "Put", "Delete");
            }
        };
    }
}

Ou utilisez un proxy ( package.json ) dans React:

 "Proxy": "http: // localhost: 8080"

De cette fa?on, la demande frontale /api/users sera automatiquement procassée à http://localhost:8080/api/users .

4. Authentification et sécurité (exemple JWT)

Processus typique:

1. Connexion de l'utilisateur (post /login )
2. Mot de passe de vérification backend, générez un jeton JWT
3. Jetons de stockage frontaux (localstorage ou cookies)
4. Authorization: Bearer <token>

Points clés de Spring Security JWT:

• Personnaliser UserDetailsService
• Générer et vérifier les jetons à l'aide de la classe d'outils JwtUtil
• Ajouter JwtRequestFilter pour intercepter les demandes et analyser les jetons

Exemple de connexion React:

 const handlelogine = () => {
  axios.post ('/ api / ligin', {nom d'utilisateur, mot de passe})
    .Then (res => {
      LocalStorage.SetItem (?Token?, res.data.token);
      // Jump ou mise à jour de statut});
};

5. Suggestions de structure du projet (séparation avant et arrière)

Structure du répertoire de projet recommandé:

 myApp /
├── Backend / <- Spring Boot Project│ ├fique
│ └fique
├fiques frontend / <- React Project│ ├fique
│ ├fiques
│ └fiques
└fiques

Avantages: Responsabilités distinctes, peuvent être déployées indépendamment et clairement le travail d'équipe.

6. Plan de déploiement

Solution 1: déploiement de séparation frontale et back-end

• Spring Boot est transformé en package de pot et exécuté sur le serveur (comme un h?te cloud): java -jar app.jar
• React Build Files statiques: npm run build
• Utilisez Nginx pour héberger les demandes de l'API proxy avant et inversé au backend

Fragment de configuration Nginx:

 serveur {
    écoutez 80;
    root / var / www / myapp-frontend;
    index index.html;

    emplacement / {
        try_files $ uri $ uri / /index.html;
    }

    Emplacement / API / {
        proxy_pass http: // localhost: 8080;
        proxy_set_header host $ host;
    }
}

Solution 2: intégrer frontal (facultatif)

Mettez dist construit par React dans src/main/resources/static de Spring Boot, et le service est fourni par le backend. Convient pour les petits projets.

Résumer

Cette pile technologique est mature, riche en documents et active dans la communauté, et est très adapté à la création d'applications complètes au niveau de l'entreprise. La clé est de comprendre le mécanisme de communication (REST JSON), la gestion de l'état, les processus d'authentification et les méthodes de déploiement qui sont séparées des avant et de l'arrière.

Fondamentalement, tout est, pas compliqué, mais il est facile d'ignorer les détails.

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!