Connexions frontend à backend

En tant que développeur d'applications Web, une chose que je trouve intéressante est de relier l'aile frontend de mon ou d'une application à l'aile backend de mon application. En tant que développeur ayant toujours aimé travailler avec JavaScript ; JavaScript a considérablement évolué au fil des années. La liaison du frontend d'une application au backend d'une application peut être effectuée en configurant un canal entre le côté client de votre code (qui est généralement en HTML, CSS et JavaScript) et le côté serveur de votre code (qui peut être écrit dans un certain nombre de langages allant de Node.js, Python, Ruby, Java et autres pour n'en nommer que quelques-uns). Ci-dessous, je vais énumérer les étapes simples que j'ai suivies lorsque j'ai débuté en tant que développeur Web qui travaille à la fois sur le côté backend d'une application et sur le côté frontend d'une application.

1. Je préfère généralement configurer mon Backend Tout d’abord, et grâce à cela, j’obtiens un serveur backend qui fournit des API avec lesquelles mon frontend peut communiquer. Un exemple de base pour moi lorsque je développe une application utilisant la pile MERN consiste à utiliser Node.js avec Express :

Ma configuration de base du serveur est (Node.js + Express) :

Installez Node.js et npm (Node Package Manager).

Créez un nouveau projet et installez Express :

Comment faire ? Je crée d'abord un dossier dans mon dossier de projet.

mkdir monProjectApp
cd monProjectApp
npm init -y
npm install express

Ensuite je crée un serveur simple ou un fichier JavaScript (par exemple, server.js) :

javascript
Copier le code
const express = require('express');
const app = express();
port const = 3000;

// Middleware pour analyser JSON
app.use(express.json());

// Exemple de point de terminaison
app.get('/api/data', (req, res) => {
res.json({ message : 'Bonjour du backend !' });
});

app.listen(port, () => {
console.log (Serveur exécuté sur http://localhost:${port});
});

Exécutez le serveur :

noeud server.js

1. Ensuite, j'ai configuré mon frontend. Le Frontend sera généralement un fichier HTML avec des codes JavaScript pour effectuer les appels API préférés.

Je crée un fichier index.html :

code html ci-dessous

Interaction frontend-backend

Communication frontend vers backend

Récupérer des données depuis le backend

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

Créez un fichier script.js pour votre JavaScript :

javascript
tapez le code ci-dessous
document.getElementById('fetchButton').addEventListener('click', () => {
récupérer('http://localhost:3000/api/data')
.then(response => réponse.json())
.then(data => {
document.getElementById('response').innerText = data.message;
})
.catch(erreur => {
console.error('Erreur lors de la récupération des données :', erreur);
});
});

1. Exécuter l'application
   Assurez-vous que votre serveur backend est en cours d'exécution, puis ouvrez index.html dans un navigateur. Cliquez sur le bouton pour récupérer les données du backend et vous devriez voir la réponse affichée sur la page.

2. Avancé : Utilisation de frameworks et de bibliothèques
   Pour des applications plus complexes, vous pouvez utiliser des frameworks et des bibliothèques aux deux extrémités :

Frontend : React, Vue.js, Angular, etc.
Backend : Express (Node.js), Django (Python), Rails (Ruby), etc.
Exemple avec React (Frontend) :

Créez une application React à l'aide de Create React App :

tapez le code ci-dessous
npx créer-react-app mon-react-app
cd mon-react-app
Remplacez le contenu d'App.js :

javascript
tapez le code ci-dessous

importer React, { useState } depuis 'react';

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

const fetchData = () => {
récupérer('http://localhost:3000/api/data')
.then(response => réponse.json())
.then(data => {
setMessage(data.message);
})
.catch(erreur => {
console.error('Erreur lors de la récupération des données :', erreur);
});
};

retour (

Communication frontend vers backend

Récupérer des données depuis le backend

{message}

);
}

exporter l'application par défaut ;
Exécutez l'application React :

Tapez le code ci-dessous
npm démarrer
Désormais, votre application React devrait pouvoir récupérer les données du serveur backend lorsque vous cliquez sur le bouton.

Résumé
La connexion entre le frontend et le backend à l'aide de JavaScript peut être effectuée simplement en suivant les étapes ci-dessus. Le serveur backend expose les API et le frontend envoie des requêtes HTTP à ces API pour récupérer ou envoyer des données. Cette approche peut être adaptée à différents frameworks et environnements en fonction des exigences spécifiques de votre projet.

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!