Leitfaden zur React-Front-End- und Back-End-Trennung: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End

React Front-End- und Back-End-Trennungsleitfaden: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End. Es sind spezifische Codebeispiele erforderlich.

In der heutigen Webentwicklungsumgebung sind Front-End und Back-End Endtrennung ist zum Trend geworden. Durch die Trennung von Front-End- und Back-End-Code kann die Entwicklungsarbeit flexibler und effizienter gestaltet und die Zusammenarbeit im Team erleichtert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von React eine Front-End- und Back-End-Trennung erreichen und so die Ziele der Entkopplung und unabhängigen Bereitstellung erreichen.

Zunächst müssen wir verstehen, was Front-End- und Back-End-Trennung ist. Im traditionellen Webentwicklungsmodell sind Front-End und Back-End miteinander gekoppelt. Alle HTML-, CSS- und JavaScript-Codes werden vom Back-End generiert und die Front-End- und Back-End-Codes werden miteinander vermischt. Die Front-End- und Back-End-Trennung trennt den Front-End- und Back-End-Code, sodass Front-End und Back-End unabhängig voneinander entwickelt und bereitgestellt werden können.

React ist ein sehr beliebtes Front-End-Framework. Es bietet ein komponentenbasiertes Entwicklungsmodell, das die Front-End-Entwicklung modularer und einfacher zu warten macht. Wir werden React als Front-End-Framework verwenden, um eine Trennung von Front-End und Back-End zu erreichen.

Das Folgende ist ein spezifisches Codebeispiel, das zeigt, wie man mit React+Node.js eine Front-End- und Back-End-Trennung erreicht.

Zuerst müssen wir ein React-Projekt erstellen. Mit dem Create-React-App-Tool können Sie ein neues React-Projekt erstellen:

npx create-react-app frontend

Als nächstes erstellen wir eine einfache React-Komponente, um die vom Backend zurückgegebenen Daten anzuzeigen. Erstellen Sie eine neue Datei HelloWorld.js im Ordner src und fügen Sie den folgenden Code hinzu:

import React from 'react';

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
  }

  componentDidMount() {
    fetch('/api/helloworld')
      .then(response => response.json())
      .then(data => this.setState({ message: data.message }));
  }

  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default HelloWorld;

Diese Komponente verwendet die Fetch-API, um Daten vom Backend abzurufen und die Daten auf der Seite anzuzeigen.

Als nächstes müssen wir einen Backend-Server erstellen. Mit Node.js und dem Express-Framework kann ein einfacher Backend-Server erstellt werden. Erstellen Sie eine neue Datei server.js im Stammverzeichnis des Projekts und fügen Sie den folgenden Code hinzu:

const express = require('express');
const app = express();

app.get('/api/helloworld', (req, res) => {
  res.send({ message: 'Hello World from the backend!' });
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Dieser Server überwacht Port 5000 und stellt eine API-Schnittstelle von /api/helloworld bereit und gibt eine API zurück, die „Hello World from the backend!“ enthält. " "JSON-Objekt.

Schließlich müssen wir die Front-End- und Back-End-Projekte verbinden. Erstellen Sie eine neue Datei setupProxy.js im Stammverzeichnis des React-Projekts und fügen Sie den folgenden Code hinzu:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

Diese Datei wird verwendet, um API-Anfragen vom Frontend an die Backend-Adresse weiterzuleiten.

Jetzt können wir die Front-End- und Back-End-Projekte durchführen. Geben Sie im Terminal das Stammverzeichnis des React-Projekts und das Verzeichnis ein, in dem sich server.js befindet, und führen Sie dann die folgenden Befehle aus:

# React项目
npm start

# 后端服务器
node server.js

Durch den Zugriff auf http://localhost:3000 können wir eine Nachricht mit dem Inhalt „Hallo“ sehen Welt aus dem Backend!" Seite.

Durch die obigen Beispiele haben wir die Trennung von Reacts Front-End und Back-End erfolgreich erreicht, und Front-End und Back-End können unabhängig voneinander entwickelt und bereitgestellt werden. Durch die Entkopplung des Front-End- und Back-End-Codes können wir die Projektstruktur besser organisieren und die Entwicklungseffizienz verbessern. Gleichzeitig ermöglicht uns die unabhängige Bereitstellung auch eine größere Flexibilität bei der Projekteinführung und -wartung.

In der tatsächlichen Entwicklung können der geeignete Technologie-Stack und das entsprechende Framework entsprechend den spezifischen Anforderungen und der Architektur ausgewählt werden, um eine Front-End- und Back-End-Trennung zu erreichen. Reagieren ist nur eine der Optionen. Ich glaube, dass Sie durch die oben genannten Beispiele bereits die grundlegenden Ideen und Methoden beherrschen können.

Zusammenfassend sind die folgenden Schritte erforderlich, um das Front-End und das Back-End von React zu trennen: Erstellen Sie ein React-Projekt, implementieren Sie Front-End-Komponenten, erstellen Sie einen Back-End-Server und verbinden Sie Front-End- und Front-End-Projekte . Durch diese Schritte können wir eine Entkopplung und unabhängige Bereitstellung des Front-Ends und des Back-Ends erreichen.

Ich hoffe, dieser Artikel ist hilfreich für Sie und wünsche Ihnen viel Erfolg bei der Entwicklung der Front-End- und Back-End-Trennung!

Das obige ist der detaillierte Inhalt vonLeitfaden zur React-Front-End- und Back-End-Trennung: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!