Sambungan frontend ke backend

Sebagai pembangun aplikasi web, satu perkara yang saya dapati menarik ialah memautkan sayap hadapan saya atau aplikasi kepada sayap belakang aplikasi saya. Sebagai pembangun yang sentiasa suka bekerja dengan JavaScript; JavaScript telah banyak berkembang selama bertahun-tahun. Memautkan bahagian hadapan aplikasi ke bahagian belakang aplikasi boleh dilakukan dengan menyediakan saluran antara bahagian klien kod anda (yang biasanya dalam HTML, CSS dan JavaScript) dan bahagian pelayan kod anda (yang boleh ditulis dalam beberapa bahasa yang terdiri daripada sama ada Node.js, Python, Ruby, Java dan seumpamanya hanya untuk menamakan beberapa). Di bawah saya akan menyenaraikan langkah mudah yang saya ambil semasa saya bermula sebagai pembangun web yang bekerja di kedua-dua bahagian belakang aplikasi dan bahagian depan aplikasi.

1. Saya biasanya lebih suka menyediakan Bahagian Belakang saya Pertama, dan dengan ini saya mendapat pelayan bahagian belakang yang menyediakan API untuk bahagian hadapan saya untuk berkomunikasi. Contoh asas untuk saya apabila saya membangunkan apl menggunakan tindanan MERN ialah menggunakan Node.js dengan Express:

Persediaan Pelayan asas saya ialah (Node.js + Express):

Pasang Node.js dan npm (Pengurus Pakej Node).

Buat projek baharu dan pasang Express:

Bagaimana saya boleh melakukannya? Saya mula-mula mencipta folder dalam folder projek saya.

mkdir myProjectApp
cd myProjectApp
npm init -y
npm install express

Kemudian Saya Cipta pelayan ringkas atau fail JavaScript (cth., server.js):

javascript
Salin kod
const express = memerlukan('express');
aplikasi const = express();
port const = 3000;

// Middleware untuk menghuraikan JSON
app.use(express.json());

// Contoh titik akhir
app.get('/api/data', (req, res) => {
res.json({ mesej: 'Helo dari bahagian belakang!' });
});

app.listen(port, () => {
console.log(Pelayan berjalan di http://localhost:${port});
});

Jalankan pelayan:

pelayan nod.js

1. Kemudian saya menyediakan bahagian hadapan saya. Frontend lazimnya ialah fail HTML dengan kod JavaScript untuk membuat panggilan API pilihan.

Saya Cipta fail index.html:

kod html di bawah

Interaksi Bahagian Depan-Belakang

Komunikasi Depan ke Belakang

Ambil Data dari Backend

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

Buat fail script.js untuk JavaScript anda:

javascript
taip kod di bawah
document.getElementById('fetchButton').addEventListener('click', () => {
fetch('http://localhost:3000/api/data')
.then(respons => response.json())
.then(data => {
document.getElementById('response').innerText = data.message;
})
.catch(error => {
console.error('Ralat mengambil data:', ralat);
});
});

1. Menjalankan Aplikasi
   Pastikan pelayan bahagian belakang anda berjalan, kemudian buka index.html dalam penyemak imbas. Klik butang untuk mengambil data dari bahagian belakang dan anda akan melihat respons dipaparkan pada halaman.

2. Terperinci: Menggunakan Rangka Kerja dan Perpustakaan
   Untuk aplikasi yang lebih kompleks, anda mungkin menggunakan rangka kerja dan perpustakaan pada kedua-dua hujung:

Frontend: React, Vue.js, Angular, dll.
Bahagian Belakang: Express (Node.js), Django (Python), Rails (Ruby), dll.
Contoh dengan React (Frontend):

Buat aplikasi React menggunakan Create React App:

taip kod di bawah
npx create-react-app my-react-app
cd my-react-app
Gantikan kandungan App.js:

javascript
taip kod di bawah

import React, { useState } daripada 'react';

fungsi Apl() {
const [mesej, setMessage] = useState('');

const fetchData = () => {
fetch('http://localhost:3000/api/data')
.then(respons => response.json())
.then(data => {
setMessage(data.message);
})
.catch(error => {
console.error('Ralat mengambil data:', ralat);
});
};

kembali (

Komunikasi Depan ke Belakang

Ambil Data dari Backend

{message}

);
}

eksport Apl lalai;
Jalankan aplikasi React:

Taip kod di bawah
npm mula
Kini, apl React anda sepatutnya dapat mengambil data daripada pelayan bahagian belakang apabila anda mengklik butang.

Ringkasan
Sambungan antara bahagian hadapan dan bahagian belakang menggunakan JavaScript boleh dilakukan hanya dengan menggunakan langkah di atas. Pelayan bahagian belakang mendedahkan API, dan bahagian hadapan membuat permintaan HTTP kepada API ini untuk mengambil atau menghantar data. Pendekatan ini boleh disesuaikan dengan pelbagai rangka kerja dan persekitaran berdasarkan keperluan khusus projek anda.

Atas ialah kandungan terperinci Sambungan frontend ke backend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!