Bagaimana untuk menyediakan satu halaman dalam thinkphp-ThinkPHP-php.cn

Bagaimana untuk menyediakan satu halaman dalam thinkphp

WBOY

Lepaskan： 2023-06-03 10:46:38

ke hadapan

1322 orang telah melayarinya

1. Apakah itu aplikasi satu halaman? sejenis aplikasi berdasarkan Ajax dan HTML5 dan teknologi lain, aplikasi web yang mengoptimumkan pengalaman pengguna dengan memuatkan kandungan separa halaman secara dinamik. Tidak seperti aplikasi tradisional, aplikasi satu halaman hanya mengandungi satu halaman HTML, dan kandungan halaman dimuatkan secara dinamik melalui JavaScript untuk mencapai persembahan kandungan dan bertukar antara halaman.

2. Cipta aplikasi satu halaman

Terdapat banyak cara untuk mencipta aplikasi satu halaman dalam ThinkPHP, dan artikel ini akan memperkenalkan salah satu daripadanya.

1 Cipta pengawal

Dalam ThinkPHP, semua logik perniagaan dilaksanakan dalam pengawal. Oleh itu, kita perlu mencipta pengawal aplikasi halaman tunggal dalam pengawal aplikasi. Kami mencipta pengawal bernama SinglePageController.

<?php
namespace app\index\controller;
use think\Controller;
class SinglePageController extends Controller
{
    public function index()
    {
        return view();
    }
}

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan kelas SinglePageController yang mewarisi daripada kelas Pengawal dan mentakrifkan kaedah indeks, yang akan melaksanakan operasi pemuatan halaman.

2. Cipta paparan

Kita perlu mencipta paparan aplikasi satu halaman melalui enjin paparan ThinkPHP. Menggunakan enjin paparan ThinkPHP, kami boleh menambah kod PHP pada kod HTML untuk mencapai fungsi seperti penggunaan semula paparan dan pemisahan halaman.

<!-- singlepage.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单页应用</title>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#product">产品介绍</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </div>
    <div id="content"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $(window).bind(&#39;hashchange&#39;, function() {
                var url = window.location.hash.slice(1);
                $(&#39;#content&#39;).load(url + &#39;.html&#39;);
            });
            $(window).trigger(&#39;hashchange&#39;);
        });
    </script>
</body>
</html>

Salin selepas log masuk

Kami mencipta bar navigasi dalam kod, idnya ialah nav, dan kawasan kandungan, idnya ialah kandungan. Dan kami telah mengikat peristiwa pertukaran cincang dalam JavaScript Setiap kali cincangan berubah (iaitu, apabila pautan bar navigasi berubah), kami akan memuatkan halaman HTML yang sepadan ke dalam kawasan kandungan melalui Ajax.

Nota: Kandungan aplikasi satu halaman hendaklah terdiri daripada berbilang halaman HTML, bukannya semua dipaparkan pada satu halaman pada masa yang sama.

3. Tentukan peraturan penghalaan

Memandangkan kelas SinglePageController kami memaparkan paparan aplikasi satu halaman melalui kaedah indeks, kami perlu mentakrifkan peraturan penghalaan yang dinamakan halaman tunggal dalam peraturan penghalaan:

<?php
use think\Route;
// 单页应用路由
Route::rule(&#39;singlepage/:id&#39;,&#39;index/SinglePage/index&#39;);

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan peraturan penghalaan bernama halaman tunggal dan lulus id sebagai parameter kepada kaedah indeks kelas SinglePageController.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan satu halaman dalam thinkphp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!