Frontend-zu-Backend-Verbindungen

Als Web-App-Entwickler finde ich es interessant, den Frontend-Flügel meiner Anwendung oder einer Anwendung mit dem Backend-Flügel meiner Anwendung zu verknüpfen. Als Entwickler, der schon immer gerne mit JavaScript gearbeitet hat; JavaScript hat sich im Laufe der Jahre stark weiterentwickelt. Das Verknüpfen des Frontends einer Anwendung mit dem Backend einer Anwendung kann durch Einrichten eines Kanals zwischen der Clientseite Ihres Codes (normalerweise in HTML, CSS und JavaScript) und der Serverseite Ihres Codes (möglicherweise) erfolgen geschrieben in einer Reihe von Sprachen, darunter Node.js, Python, Ruby, Java und dergleichen, um nur einige zu nennen). Im Folgenden werde ich die einfachen Schritte auflisten, die ich unternommen habe, als ich als Webentwickler angefangen habe, der sowohl auf der Backend-Seite einer Anwendung als auch auf der Frontend-Seite einer Anwendung arbeitet.

1. Normalerweise bevorzuge ich die Einrichtung meines Backends Erstens, und dadurch erhalte ich einen Backend-Server, der APIs bereitstellt, mit denen mein Frontend kommunizieren kann. Ein einfaches Beispiel für mich, wenn ich eine App mit dem MERN-Stack entwickle, ist die Verwendung von Node.js mit Express:

Mein grundlegendes Server-Setup ist (Node.js + Express):

Installieren Sie Node.js und npm (Node Package Manager).

Erstellen Sie ein neues Projekt und installieren Sie Express:

Wie mache ich das? Ich erstelle zunächst einen Ordner in meinem Projektordner.

mkdir myProjectApp
cd myProjectApp
npm init -y
npm install express

Dann erstelle ich einen einfachen Server oder eine JavaScript-Datei (z. B. server.js):

Javascript
Code kopieren
const express = require('express');
const app = express();
const port = 3000;

// Middleware zum Parsen von JSON
app.use(express.json());

// Beispielendpunkt
app.get('/api/data', (req, res) => {
res.json({ message: 'Hallo aus dem Backend!' });
});

app.listen(port, () => {
console.log(Server läuft unter http://localhost:${port});
});

Führen Sie den Server aus:

node server.js

1. Dann richte ich mein Frontend ein. Das Frontend ist normalerweise eine HTML-Datei mit JavaScript-Codes zum Durchführen der bevorzugten API-Aufrufe.

Ich erstelle eine index.html-Datei:

HTML-Code unten

8b05045a5be5764f313ed5b9168a17e6

Frontend-Backend-Interaktion

Frontend-zu-Backend-Kommunikation

Daten vom Backend abrufen

<script src="script.js"></script>

Erstellen Sie eine script.js-Datei für Ihr JavaScript:

Javascript
Geben Sie den Code unten ein
document.getElementById('fetchButton').addEventListener('click', () => {
fetch('http://localhost:3000/api/data')
.then(response => Response.json())
.then(data => {
document.getElementById('response').innerText = data.message;
})
.catch(error => {
console.error('Fehler beim Abrufen der Daten:', Fehler);
});
});

1. Ausführen der Anwendung
   Stellen Sie sicher, dass Ihr Backend-Server läuft, und öffnen Sie dann index.html in einem Browser. Klicken Sie auf die Schaltfläche, um Daten vom Backend abzurufen. Die Antwort sollte auf der Seite angezeigt werden.

2. Fortgeschritten: Verwenden von Frameworks und Bibliotheken
   Für komplexere Anwendungen können Sie an beiden Enden Frameworks und Bibliotheken verwenden:

Frontend: React, Vue.js, Angular usw.
Backend: Express (Node.js), Django (Python), Rails (Ruby) usw.
Beispiel mit React (Frontend):

Erstellen Sie eine React-Anwendung mit Create React App:

Geben Sie den Code unten ein
npx create-react-app my-react-app
cd my-react-app
Ersetzen Sie den Inhalt von App.js:

Javascript
Geben Sie den Code unten ein

React importieren, { useState } aus 'react';

Funktion App() {
const [message, setMessage] = useState('');

const fetchData = () => {
fetch('http://localhost:3000/api/data')
.then(response => Response.json())
.then(data => {
setMessage(data.message);
})
.catch(error => {
console.error('Fehler beim Abrufen der Daten:', Fehler);
});
};

zurück (

Frontend-zu-Backend-Kommunikation

Daten vom Backend abrufen

{Nachricht}

);
}

Standard-App exportieren;
Führen Sie die React-Anwendung aus:

Geben Sie den Code unten ein
npm start
Jetzt sollte Ihre React-App in der Lage sein, Daten vom Backend-Server abzurufen, wenn Sie auf die Schaltfläche klicken.

Zusammenfassung
Die Verbindung zwischen Frontend und Backend mithilfe von JavaScript kann einfach mithilfe der oben genannten Schritte erfolgen. Der Backend-Server stellt APIs bereit und das Frontend stellt HTTP-Anfragen an diese APIs, um Daten abzurufen oder zu senden. Dieser Ansatz kann je nach den spezifischen Anforderungen Ihres Projekts an verschiedene Frameworks und Umgebungen angepasst werden.

Das obige ist der detaillierte Inhalt vonFrontend-zu-Backend-Verbindungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!