Comment configurer une seule page dans thinkphp-PensezPHP-php.cn

Comment configurer une seule page dans thinkphp

PHPz

Libérer： 2023-04-11 10:07:54

original

615 Les gens l'ont consulté

ThinkPHP est un framework de développement PHP très populaire, conçu pour le développement rapide d'applications Web. Lors du développement d'applications Web via ThinkPHP, nous devrons peut-être créer un site Web officiel d'une seule page. Cet article explique comment utiliser ThinkPHP pour créer un site Web officiel d'une seule page.

1. Qu'est-ce qu'une application monopage ?

Application monopage, l'anglais est une application monopage, appelée SPA. Il s'agit d'une application Web basée sur Ajax et HTML5 et d'autres technologies qui optimisent l'expérience utilisateur. chargement dynamique du contenu partiel du programme de page. Contrairement aux applications traditionnelles, les applications à page unique ne contiennent qu'une seule page HTML et le contenu de la page est chargé dynamiquement via JavaScript pour permettre la présentation du contenu et le basculement entre les pages.

2. Créer une application d'une seule page

Il existe de nombreuses façons de créer une application d'une seule page dans ThinkPHP, et cet article en présentera une.

1. Créer un contrôleur

Dans ThinkPHP, toute la logique métier est implémentée dans le contrôleur. Par conséquent, nous devons créer le contrôleur de l’application monopage dans le contrôleur de l’application. Nous créons un contrôleur appelé SinglePageController.

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

Copier après la connexion

Dans le code ci-dessus, nous avons défini une classe SinglePageController qui hérite de la classe Controller, et défini une méthode d'index, qui effectuera l'opération de chargement de page.

2. Créer une vue

Nous devons créer une vue d'application d'une seule page via le moteur de vue de ThinkPHP. Le moteur d'affichage de ThinkPHP nous permet d'intégrer du code PHP dans HTML pour réaliser la réutilisation des vues et la séparation des pages.

<!-- 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('hashchange', function() {
                var url = window.location.hash.slice(1);
                $('#content').load(url + '.html');
            });
            $(window).trigger('hashchange');
        });
    </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons créé une barre de navigation avec id nav et une zone de contenu avec id content. Et nous avons lié l'événement hashchange en JavaScript Chaque fois que le hachage change (c'est-à-dire lorsque le lien de la barre de navigation change), nous chargerons la page HTML correspondante dans la zone de contenu via Ajax.

Remarque : Le contenu d'une application monopage doit être composé de plusieurs pages HTML, plutôt que de toutes être affichées sur une seule page en même temps.

3. Définir des règles de routage

Étant donné que notre classe SinglePageController restitue la vue d'une application monopage via la méthode d'index, nous devons définir une règle de routage nommée singlepage dans les règles de routage :

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

Copier après la connexion

Dans le code ci-dessus, nous définissez une règle de routage nommée singlepage et transmettez l'identifiant en paramètre à la méthode d'index de la classe SinglePageController.

3. Résumé

Les applications à page unique sont une forme importante d'applications Web modernes. En tant que framework Web couramment utilisé, ThinkPHP fournit de nombreuses méthodes pratiques permettant aux utilisateurs de créer des applications à page unique. Cet article présente une méthode pour créer une application monopage en créant des contrôleurs et des vues, et en définissant des règles de routage. Si cela vous inspire, vous pouvez approfondir le potentiel de l'application en en apprenant davantage sur ThinkPHP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!