Bagaimana untuk melaksanakan aplikasi satu halaman menggunakan ThinkPHP6-ThinkPHP-php.cn

Bagaimana untuk melaksanakan aplikasi satu halaman menggunakan ThinkPHP6

WBOY

Lepaskan： 2023-06-20 16:29:46

asal

1258 orang telah melayarinya

Dengan perkembangan pesat Internet, aplikasi Web secara beransur-ansur berubah daripada aplikasi berbilang halaman tradisional kepada aplikasi satu halaman. Aplikasi halaman tunggal (SPA) memberikan pengguna pengalaman interaktif yang lebih lancar dan pantas, serta boleh menggunakan Ajax dan teknologi lain untuk mengemas kini kandungan halaman dengan lancar dan melaksanakan fungsi lanjutan seperti penghalaan dinamik. Artikel ini akan memperkenalkan cara menggunakan ThinkPHP6 untuk melaksanakan aplikasi asas satu halaman.

Pasang ThinkPHP6

Mula-mula, kita perlu memasang rangka kerja ThinkPHP6. Ia boleh dipasang melalui Komposer Kaedah khusus adalah seperti berikut:

Dalam tetingkap baris arahan, masukkan direktori tempat projek terletak dan masukkan arahan berikut:

composer create-project topthink/think your_project_name

Salin selepas log masuk

Di mana, nama_projek anda ialah nama projek anda, anda boleh menetapkannya sendiri.

Selepas pemasangan selesai, anda boleh mencari folder bernama public dalam direktori projek, yang mengandungi fail kemasukan projek index.php dan beberapa fail sumber statik.

Buat halaman asas

Seterusnya, kita perlu mencipta fail HTML asas untuk berfungsi sebagai halaman kemasukan aplikasi SPA. Dalam folder awam, buat fail bernama index.html dengan kandungan berikut:

<!DOCTYPE html>
<html>
<head>
    <title>SPA应用</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
    <div id="app">
        <!-- 这里放置SPA应用的内容 -->
    </div>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam halaman ini, kami memperkenalkan dua perpustakaan JavaScript Vue.js dan Axios.js untuk pelaksanaan Interaksi dan paparan data bahagian hadapan rendering. Pada masa yang sama, kami mentakrifkan div dengan id app pada halaman untuk memaparkan kandungan aplikasi SPA.

Mengkonfigurasi penghalaan

Dalam ThinkPHP6, fail konfigurasi penghalaan terletak dalam direktori app/route. Kita perlu mencipta fail baharu bernama router.php dalam direktori ini dan menambah konfigurasi berikut:

use thinkacadeRoute;

Route::get('/', function () {
    return view('index');
});

Salin selepas log masuk

Fungsi kod ini adalah untuk mengubah hala permintaan direktori akar tapak web ke halaman index.html. Di sini, kami menggunakan fungsi pintasan penghalaan Route::get() yang disediakan oleh rangka kerja ThinkPHP6 untuk mengembalikan halaman index.html melalui fungsi tanpa nama.

Buat antara muka API

Aplikasi SPA perlu meminta data dari latar belakang, jadi kami perlu mencipta antara muka API RESTful di latar belakang. Dalam ThinkPHP6, anda boleh mencipta antara muka API secara automatik yang mematuhi spesifikasi RESTful melalui kaedah Route::resource(). Tambahkan konfigurasi penghalaan berikut dalam fail router.php:

use appcontrollerBlog;

Route::resource('blog', Blog::class);

Salin selepas log masuk

Fungsi kod ini adalah untuk mencipta antara muka API bernama blog dan pengawal yang sepadan ialah appcontrollerBlog. Pengawal Blog di sini perlu dicipta oleh kami sendiri. Kami boleh menjana pengawal Blog dengan pantas melalui baris arahan:

php think make:controller Blog

Salin selepas log masuk

Arahan ini akan mencipta fail pengawal bernama app/controller dalam direktori Blog.php. Kini, kita boleh mentakrifkan pelbagai kaedah permintaan dalam pengawal Blog untuk mengendalikan permintaan API yang dihantar oleh aplikasi SPA. Sebagai contoh, tambahkan kaedah bernama index:

namespace appcontroller;

use thinkacadeDb;

class Blog
{
    public function index()
    {
        $result = Db::table('blog')->select();

        return json($result);
    }
}

Salin selepas log masuk

Fungsi kod ini adalah untuk mendapatkan data Blog daripada pangkalan data dan mengembalikan keputusan dalam format JSON. Di sini, kami menggunakan kaedah Db::table() yang disediakan oleh rangka kerja ThinkPHP6 untuk mengendalikan pangkalan data.

Tulis kod JavaScript

Akhir sekali, kita perlu menulis kod JavaScript dalam halaman index.html untuk melengkapkan pemaparan data dan interaksi aplikasi SPA. Dalam direktori publicstaticjs, buat fail bernama app.js dan tambah kod berikut:

const app = new Vue({
    el: '#app',
    data: {
        blogs: []
    },
    created: function () {
        axios.get('http://localhost/blog')
            .then(response => {
                this.blogs = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

Salin selepas log masuk

Fungsi kod ini adalah untuk menggunakan Vue.js dan Axios.js untuk mendapatkan Blog daripada API bahagian belakang data antara muka dan memaparkan data ke halaman. Di sini, kami menggunakan atribut data yang disediakan oleh Vue.js untuk menyimpan data Blog Pada masa yang sama, kami boleh memulakan data melalui fungsi kitaran hayat created dan mendapatkan data Blog melalui kaedah GET Axios.js. .

Menjalankan aplikasi satu halaman

Kini, kami telah melengkapkan konfigurasi asas dan pengekodan aplikasi SPA. Akhir sekali, kita hanya perlu memulakan aplikasi seperti berikut:

php think run

Salin selepas log masuk

Masukkan http://localhost dalam pelayar untuk melihat kesan aplikasi SPA.

Ringkasan

Artikel ini memperkenalkan cara menggunakan rangka kerja ThinkPHP6 untuk mencipta aplikasi SPA asas. Dengan memperkenalkan perpustakaan JavaScript seperti Vue.js dan Axios.js ke dalam halaman index.html dan mencipta antara muka API dan kod JavaScript, kami boleh mencapai satu halaman dan interaksi dinamik dalam aplikasi web. Rangka kerja ThinkPHP6 menyediakan penghalaan yang kaya dan kaedah operasi pangkalan data, membolehkan kami membangunkan aplikasi Web berkualiti tinggi dengan cepat.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan aplikasi satu halaman menggunakan ThinkPHP6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!