Dengan pembangunan berterusan teknologi Internet, pemisahan bahagian hadapan dan belakang telah menjadi model pembangunan yang semakin popular. Pemisahan bahagian hadapan dan bahagian belakang secara fizikal memisahkan bahagian hadapan dan bahagian belakang Bahagian hadapan bertanggungjawab untuk paparan halaman, dan bahagian belakang bertanggungjawab untuk pemprosesan data dan operasi logik. Model ini boleh meningkatkan kecekapan pembangunan dan prestasi aplikasi dengan berkesan, di samping mengurangkan kos pembangunan.
ThinkPHP ialah rangka kerja PHP yang sangat popular Ia menyediakan pelbagai alatan pembangunan dan fungsi rangka kerja yang boleh membantu kami membina aplikasi web dengan cepat. Dalam artikel ini, kami akan memperkenalkan cara menggunakan ThinkPHP6 untuk mencapai pemisahan bahagian hadapan dan belakang.
1. Persediaan
Sebelum mula menggunakan ThinkPHP6 untuk pembangunan pemisahan bahagian hadapan dan belakang, kita perlu membuat beberapa persediaan. Pertama, kita perlu menyediakan persekitaran pembangunan bahagian belakang, termasuk persekitaran PHP, alat pengurusan pergantungan Komposer dan rangka kerja ThinkPHP6. Kedua, kita perlu menyediakan persekitaran pembangunan bahagian hadapan, termasuk persekitaran Node.js, rangka kerja Vue.js dan beberapa alatan bahagian hadapan biasa.
2. Cipta projek ThinkPHP6
Mencipta projek ThinkPHP6 adalah sangat mudah, hanya gunakan arahan Komposer:
composer create-project topthink/think myapp
Selepas melaksanakan arahan di atas, ia akan dijana dalam direktori semasa A projek ThinkPHP6 dipanggil myapp.
3. Konfigurasikan penghalaan
Apabila menggunakan ThinkPHP6 untuk melaksanakan pembangunan pemisahan bahagian hadapan dan bahagian belakang, kita perlu menggunakan penghalaan untuk memetakan permintaan bahagian hadapan kepada pengendali bahagian belakang. Dalam ThinkPHP6, fail konfigurasi penghalaan ialah route/route.php, dan kami boleh mengkonfigurasi peraturan penghalaan dalam fail ini.
Dalam fail konfigurasi penghalaan, kami perlu memetakan semua permintaan bahagian hadapan kepada pengendali ini akan bertanggungjawab untuk menerima permintaan bahagian hadapan dan mengembalikan data yang sepadan berdasarkan kandungan permintaan. Berikut ialah contoh konfigurasi penghalaan mudah:
<?php
use think acadeRoute;
// 前端路由
Route::rule('/*', 'index/index');Dalam kod di atas, kami memetakan semua permintaan yang sepadan dengan peraturan /* kepada kaedah indeks pengawal indeks.
4. Menulis pengawal
Dalam ThinkPHP6, pengawal bertanggungjawab untuk menerima permintaan bahagian hadapan dan mengembalikan data yang sepadan mengikut kandungan permintaan. Dalam mod pemisahan bahagian hadapan dan belakang, kita perlu menulis pengawal khas untuk mengendalikan permintaan bahagian hadapan.
Berikut ialah contoh kod pengawal:
<?php
namespace apppicontroller;
use thinkRequest;
use thinkResponse;
class Index
{
public function index(Request $request, Response $response)
{
// 处理前端请求
$result = array(
"code" => 200,
"message" => "Hello, World!"
);
// 返回响应
return json($result);
}
}Dalam kod di atas, kami mentakrifkan pengawal bernama Index dan menulis kaedah indeks di dalamnya untuk mengendalikan permintaan bahagian hadapan. Semasa proses pemprosesan permintaan, kami boleh mengakses pangkalan data, membaca fail dan operasi lain mengikut keperluan perniagaan. Akhir sekali, kami menukar hasil pemprosesan ke dalam format JSON dan mengembalikannya ke bahagian hadapan melalui objek tindak balas.
5. Menulis halaman hadapan
Dalam ThinkPHP6, halaman hujung hadapan bertanggungjawab untuk memaparkan data dan interaksi pengguna. Kita boleh menggunakan rangka kerja Vue.js untuk menulis halaman hadapan, atau menggunakan beberapa rangka kerja atau alatan hadapan yang lain untuk melaksanakannya.
Berikut ialah contoh halaman hadapan yang ringkas:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前后端分离示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
},
mounted() {
axios.get('/api/index')
.then(response => {
this.message = response.data.message;
});
}
});
</script>
</body>
</html>Dalam kod di atas, kami menggunakan rangka kerja Vue.js untuk memaparkan data dan menggunakan perpustakaan axios untuk memulakan permintaan HTTP untuk mendapatkan data. Dengan mengikat data pada elemen halaman, kami boleh memaparkan data yang diperoleh daripada bahagian belakang pada halaman.
6. Jalankan aplikasi
Selepas kami menyelesaikan kerja sebelumnya, kami boleh mengesahkan sama ada pembangunan pemisahan bahagian hadapan dan belakang kami berjaya dengan menjalankan aplikasi. Pergi ke direktori projek ThinkPHP6 yang kami buat di terminal, dan kemudian gunakan arahan berikut untuk memulakan pelayan web:
php think run
Kemudian, lawati http://localhost:8000/ dalam penyemak imbas, anda boleh melihat kami Muka surat hadapan bertulis. Apabila kami mengklik butang atau melakukan operasi interaktif lain pada halaman, permintaan akan dihantar kepada pengawal bahagian belakang melalui penghalaan. Pengawal akan memproses data mengikut kandungan permintaan dan mengembalikan hasil pemprosesan ke halaman hujung hadapan.
7. Ringkasan
Pengasingan bahagian hadapan dan bahagian belakang ialah model pembangunan Web biasa, yang boleh meningkatkan kecekapan pembangunan dan prestasi aplikasi sambil mengurangkan kos pembangunan. Dalam artikel ini, kami memperkenalkan cara menggunakan ThinkPHP6 untuk mencapai pemisahan bahagian hadapan dan belakang, termasuk konfigurasi penghalaan, penulisan pengawal dan paparan halaman hujung hadapan. Saya harap artikel ini akan membantu pemaju.
Atas ialah kandungan terperinci Menggunakan ThinkPHP6 untuk mencapai pemisahan bahagian hadapan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
