Comment configurer une seule page dans thinkphp
- WBOYavant
- 2023-06-03 10:46:381271parcourir
1. Qu'est-ce qu'une application monopage ?
Application monopage, l'anglais est une application monopage, appelée SPA C'est une sorte de technologie basée sur Ajax et HTML5, qui optimise l'utilisateur. expérience en chargeant dynamiquement le contenu partiel de l’application Web. 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 nommé SinglePageController.
<?php
namespace app\index\controller;
use think\Controller;
class SinglePageController extends Controller
{
public function index()
{
return view();
}
}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. En utilisant le moteur d'affichage de ThinkPHP, nous pouvons ajouter du code PHP au code HTML pour réaliser des fonctions telles que 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>Nous avons créé une barre de navigation avec l'identifiant nav et une zone de contenu avec le contenu de l'identifiant dans le code. 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');
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.
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!