Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang

Bertindak balas panduan pemisahan bahagian hadapan dan bahagian belakang: Bagaimana untuk mencapai penyahgandingan dan penggunaan bebas bahagian hadapan dan belakang, contoh kod khusus diperlukan

Dalam persekitaran pembangunan web hari ini, bahagian hadapan dan belakang- perpisahan akhir telah menjadi trend. Dengan mengasingkan kod hadapan dan belakang, kerja pembangunan boleh dibuat lebih fleksibel, cekap dan memudahkan kerjasama pasukan. Artikel ini akan memperkenalkan cara menggunakan React untuk mencapai pemisahan bahagian hadapan dan belakang, seterusnya mencapai matlamat penyahgandingan dan penggunaan bebas.

Pertama sekali, kita perlu memahami apa itu pemisahan bahagian hadapan dan belakang. Dalam model pembangunan web tradisional, bahagian hadapan dan bahagian belakang digabungkan bersama Semua kod HTML, CSS dan JavaScript dijana oleh bahagian belakang, dan kod bahagian hadapan dan bahagian belakang digabungkan bersama. Pemisahan bahagian hadapan dan hujung belakang memisahkan kod bahagian hadapan dan hujung belakang supaya bahagian hadapan dan hujung belakang boleh dibangunkan dan digunakan secara bebas.

React ialah rangka kerja bahagian hadapan yang sangat popular Ia menyediakan model pembangunan berasaskan komponen, menjadikan pembangunan bahagian hadapan lebih modular dan lebih mudah diselenggara. Kami akan menggunakan React sebagai rangka kerja bahagian hadapan untuk mencapai pemisahan bahagian hadapan dan belakang.

Berikut ialah contoh kod khusus yang menunjukkan cara menggunakan React+Node.js untuk mencapai pemisahan bahagian hadapan dan belakang.

Pertama, kita perlu mencipta projek React. Anda boleh menggunakan alat create-react-app untuk mencipta projek React baharu:

npx create-react-app frontend

Seterusnya, kami mencipta komponen React yang mudah untuk memaparkan data yang dikembalikan oleh bahagian belakang. Cipta fail baharu HelloWorld.js dalam folder src dan tambah kod berikut:

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 id="Hello-World">Hello World!</h1>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default HelloWorld;

Komponen ini menggunakan API pengambilan untuk mendapatkan data dari bahagian belakang dan memaparkan data pada halaman.

Seterusnya, kita perlu mencipta pelayan bahagian belakang. Pelayan bahagian belakang yang ringkas boleh dibuat menggunakan Node.js dan rangka kerja Express. Cipta server.js fail baharu dalam direktori akar projek dan tambah kod berikut:

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}`);
});

Pelayan ini akan mendengar port 5000 dan menyediakan antara muka API /api/helloworld, mengembalikan mesej yang mengandungi "Hello World dari bahagian belakang! "Objek JSON.

Akhir sekali, kita perlu menyambungkan projek bahagian hadapan dan bahagian belakang. Cipta fail setupProxy.js baharu dalam direktori akar projek React dan tambahkan kod berikut:

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

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

Fail ini digunakan untuk memajukan permintaan API dari bahagian hadapan ke alamat bahagian belakang.

Kini, kami boleh menjalankan projek bahagian hadapan dan bahagian belakang. Dalam terminal, masukkan direktori akar projek React dan direktori di mana server.js berada, dan kemudian jalankan arahan berikut:

# React项目
npm start

# 后端服务器
node server.js

Dengan mengakses http://localhost:3000, kita boleh melihat mesej yang mengandungi "Hello Dunia dari bahagian belakang!" halaman.

Melalui contoh di atas, kami telah berjaya mencapai pemisahan bahagian hadapan dan belakang React, dan bahagian hadapan dan belakang boleh dibangunkan dan digunakan secara bebas. Dengan menyahganding kod depan dan belakang, kami boleh mengatur struktur projek dengan lebih baik dan meningkatkan kecekapan pembangunan. Pada masa yang sama, penggunaan bebas juga membolehkan kami menjadi lebih fleksibel dalam pelancaran dan penyelenggaraan projek.

Dalam pembangunan sebenar, susunan dan rangka kerja teknologi yang sesuai boleh dipilih mengikut keperluan dan seni bina khusus untuk mencapai pemisahan bahagian hadapan dan belakang. React hanyalah salah satu pilihan Saya percaya bahawa melalui contoh di atas, anda sudah boleh menguasai idea dan kaedah asas.

Ringkasnya, pemisahan React front-end dan back-end memerlukan langkah berikut: buat projek React, laksana komponen front-end, buat pelayan back-end dan sambungkan projek front-end dan front-end . Melalui langkah-langkah ini, kita boleh mencapai penyahgandingan dan penggunaan bebas bahagian hadapan dan belakang.

Saya harap artikel ini membantu anda, dan saya doakan anda berjaya dalam pembangunan pemisahan bahagian hadapan dan belakang!

Atas ialah kandungan terperinci Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!