Durch die Auswahl des Java Spring Boot React Technology Stack k?nnen stabile und effiziente Full-Stack-Webanwendungen für kleine und mittelgro?e Systeme für gro?e Systeme auf Unternehmensebene geeignet sein. 2. Der Backend verwendet Spring Boot, um schnell eine erholsame API zu erstellen. Zu den Kernkomponenten geh?ren Spring Web, Spring Data JPA, Spring Security, Lombok und Prahlerei. Die Front-End-Trennung wird durch @restController-Rückgabe von JSON-Daten erreicht. 3. Das Front-End verwendet React (mit vite oder create react App), um eine reaktionsschnelle Schnittstelle zu entwickeln, Axios zum Aufrufen der Back-End-API, React Router verwaltet das Routing, kombiniert Usestate oder Redux-Toolkit für die staatliche Verwaltung und verwendet Tailwind CSS oder BootStrap, um die Schnittstelle zu versch?nern. 4. W?hrend der gemeinsamen Debugging-Phase wird das Cross-Domain-Problem durch Feder-Boot-Konfiguration CORS oder React-Seting-Proxy-Proxy gel?st, um sicherzustellen, dass Front-End-Anforderungen korrekt an den Back-End-Dienst weitergeleitet werden k?nnen. 5. Authentifizierung übernimmt das JWT -Schema. Nachdem sich der Benutzer angemeldet hat, wird das Token von der Frühjahrssicherheit generiert, und das Front-End speichert es und tr?gt den Autorisierungs-Header, um die Authentifizierung in nachfolgenden Anfragen zu vervollst?ndigen. 6. Die empfohlene Projektstruktur ist ein unabh?ngiges Verzeichnis, das durch die vorderen und hinteren Enden getrennt ist, was eindeutige Verantwortlichkeiten und einen unabh?ngigen Einsatz erleichtert. 7. Optionale L?sung bereitstellen 1: Spring Boot ist als Glas verpackt, und die statischen Dateien von React Build werden von Nginx- und Reverse -Proxy -API -Anforderungen gehostet. oder L?sung 2: Stecken Sie das React Build -Produkt in das statische Verzeichnis des Spring Boots und werden vom Backend bedient, das für kleine Projekte geeignet ist. Der Technologiestapel ist ausgereift, hat ein perfektes ?kosystem und ist in der Community aktiv. Der Schlüssel besteht darin, die Mechanismen REST-Kommunikation, Staatsmanagement, JWT-Authentifizierung und NGINX-Bereitstellungsmechanismen zu beherrschen, und Sie k?nnen Anwendungen auf Unternehmensebene effizient erstellen.

Wenn Sie eine vollst?ndige Webanwendung mit einem modernen Technologiestapel erstellen m?chten, ist Java Spring Boot React eine sehr robuste und weit verbreitete Option. Diese Kombination kombiniert die Backend-Stabilit?t mit Funktionen auf Unternehmensebene (JAVA/FRING-KOST) und Responsive User Experience (React) und eignet sich für die Entwicklung von Anwendungen von kleinen und mittelgro?en Projekten bis zu gro?en Unternehmenssystemen.

Nachfolgend finden Sie einen praktischen Weg für die Full-Stack-Entwicklung, die wichtige Schritte, technische Punkte und Best Practices abdeckt.

1. Backend: Spring Boot (Java)

Spring Boot vereinfacht Java -Backend -Entwicklung, automatische Konfiguration, eingebettete Server und ein reiches ?kosystem.

Kernkomponenten:

• Spring Web : Erstellen Sie eine erholsame Schnittstelle
• Springdaten JPA : Datenbankoperationen (Unterstützt MySQL, PostgreSQL usw.)
• Frühlingssicherheit : Zertifizierung und Genehmigung (JWT Common)
• Spring Boot Devtools : Die Hot Deployment verbessert die Entwicklungseffizienz
• Lombok : Reduzieren Sie den Boilerplate -Code (Getter/Setter/Konstruktor)
• Swagger/OpenAPI : API -Dokumentationsgenerierung

Beispiel: Eine einfache Benutzer -API

 @Restcontroller
@RequestMapping ("/api/Benutzer")
?ffentliche Klasse UserController {

    @Autowired
    private UserService UserService;

    @Getmapping
    public list <Nutzern> getAllusers () {
        return userService.findall ();
    }

    @Postmapping
    ?ffentlicher Benutzer createUser (@RequestBody -Benutzer) {
        return UserService.save (Benutzer);
    }
}

Datenbankverbindung (application.yml):

 Frühling:
  DataSource:
    URL: JDBC: Mysql: // localhost: 3306/mydb
    Benutzername: Wurzel
    Passwort: Passwort
  JPA:
    überwintern:
      DDL-Auto: Update
    Show-SQL: True

Tipp: Verwenden Sie @RestController , um JSON zurückzugeben, und die vorderen und hinteren Enden kommunizieren durch JSON.

2. Front-End: React (vite oder erstellen react App)

React bietet eine komponentierte UI -Entwicklung und verbessert die Konstruktionsgeschwindigkeit mit modernen Toolchains (wie VITE).

Der h?ufig verwendete Technologiestapel:

• Reagieren Sie JSX : Erstellen Sie eine Benutzeroberfl?che
• AXIOS : Senden Sie die HTTP -Anfrage an Spring Boot Backend
• Reagieren Sie Router : Front-End-Routing
• Staatsmanagement : Usestate/Usereducer, komplexe Projekte k?nnen mit Redux -Toolkit oder Kontext -API verwendet werden
• Rückenwind -CSS / Bootstrap : Versch?nern Sie die Schnittstelle schnell

Beispiel: Holen Sie sich die Benutzerliste

 importieren {useEffect, usestate} aus 'react';
Axios aus 'Axios' importieren;

Funktion userList () {
  const [Benutzer, SetUsers] = Usestate ([]);

  useEffect (() => {
    axios.get ('http: // localhost: 8080/api/user'))
      .then (response => setUsers (response.data))
      .Catch (err => console.Error (err));
  }, []);

  Zurückkehren (
    <div>
      <h2> Benutzer </h2>
      <ul>
        {user.map (user => (
          <li key = {user.id}> {user.name} - {user.email} </li>
        ))}
      </ul>
    </div>
  );
}

HINWEIS: Cross-Dom?nen-Probleme erfordern, dass CORs im Spring-Boot konfiguriert werden oder einen Proxy verwenden.

3. gemeinsames Debugging und Bereitstellungsvorgang Front-End

L?sen Sie die Cross-Dom?ne im Entwicklungsstadium

Fügen Sie die Hauptanwendungsklasse oder Konfigurationsklasse für Spring -Start hinzu:

 @Konfiguration
?ffentliche Klasse Corsconfig {
    @Bohne
    public webmvcconfiger corsconfiger () {
        RECHTEN SIE NEUE WebMVCConFigurer () {
            @Override
            public void addCorsMappings (Corsregistry Registry) {
                Registry.addmapping ("/api/**")
                        .Alladerigins ("http: // localhost: 3000")
                        .allowedMethods ("Get", "Post", "put", "l?schen");
            }
        };
    }
}

Oder verwenden Sie einen Proxy ( package.json ) in React:

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

Auf diese Weise werden die Front-End-Anfrage /api/users automatisch auf http://localhost:8080/api/users .

4. Authentifizierung und Sicherheit (JWT -Beispiel)

Typischer Prozess:

1. Benutzeranmeldung (Post /login )
2. Backend -überprüfungskennwort, JWT -Token generieren
3. Front-End-Speicher-Token (LocalStorage oder Cookies)
4. Authorization: Bearer <token>

Frühlingssicherheit JWT -Schlüsselpunkte:

• Passen Sie UserDetailsService an
• Generieren und überprüfen Sie Token mithilfe JwtUtil -Werkzeugklasse
• Fügen Sie JwtRequestFilter hinzu, um Anforderungen abzufangen und Token zu analysieren

React Login -Beispiel:

 const handlelogin = () => {
  axios.post ('/api/login', {Benutzername, Passwort})
    .then (res => {
      localStorage.setItem ('token', res.data.token);
      // status springen oder aktualisieren});
};

5. Projektstruktur Vorschl?ge (Vorder- und Rückendtrennung)

Empfohlene Projektverzeichnisstruktur:

 myapp/
├── Backend/<- Spring Boot Project│ ├── SRC/Main/Java
│ └── pom.xml
├── Frontend/ <- React Project│ ├── SRC/
│ ├── ?ffentlich/
│ └── Paket.json
└── Readme.md

Vorteile: Separate Verantwortlichkeiten k?nnen unabh?ngig und klare Teamarbeit eingesetzt werden.

6. Einsatzplan

L?sung 1: Bereitstellung von Front-End- und Back-End-Trennung

• Spring Boot wird in ein JAR -Paket gemacht und auf dem Server ausgeführt (z. B. einen Cloud -Host): java -jar app.jar
• Reaktieren Sie statische Dateien: npm run build
• Verwenden Sie Nginx, um die API -Anfragen vorderster Ende und Proxy -API -Anfragen auf das Backend zu hosten

Nginx -Konfigurationsfragment:

 Server {
    H?ren Sie 80;
    root/var/www/myapp-Frontend;
    Index index.html;

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

    Ort / api / {
        proxy_pass http: // localhost: 8080;
        proxy_set_header host $ host;
    }
}

L?sung 2: Front-End einbetten (optional)

Setzen Sie dist -Datei ein, die von React in Spring Boots src/main/resources/static erstellt wurde, und der Dienst wird vom Backend bereitgestellt. Geeignet für kleine Projekte.

Zusammenfassen

Dieser Technologiestapel ist ausgereift, reich an Dokumenten und in der Community aktiv und ist sehr geeignet für den Aufbau von Vollstapelanwendungen auf Unternehmensebene. Der Schlüssel besteht darin, den Kommunikationsmechanismus (REST JSON), das Zustandsmanagement, die Authentifizierungsprozesse und die Bereitstellungsmethoden zu verstehen, die von vorderer und hinterer Enden getrennt sind.

Grunds?tzlich ist alles, nicht kompliziert, aber es ist leicht, Details zu ignorieren.

Das obige ist der detaillierte Inhalt vonFull-Stack-Webentwicklung mit Java, Spring Boot und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!