thinkphpÔõÑùÉèÖõ¥Ò³
Ò»¡¢Ê²Ã´Êǵ¥Ò³Ó¦ÓÃ
µ¥Ò³Ó¦Óã¬Ó¢ÎÄΪSingle-Page Application£¬¼ò³ÆSPA£¬ËüÊÇÒ»ÖÖ»ùÓÚAjaxºÍHTML5µÈÊÖÒÕ£¬Í¨¹ý¶¯Ì¬µÄ¼ÓÔØÒ³Ãæ¾Ö²¿ÄÚÈÝÀ´ÓÅ»¯Óû§ÌåÑéµÄwebÓ¦ÓóÌÐò¡£Óë¹Å°åµÄÓ¦ÓóÌÐò²î±ð£¬µ¥Ò³Ó¦ÓÃÖ»°üÀ¨Ò»¸öHTMLÒ³Ã棬ͨ¹ýJavaScript½«Ò³ÃæÄÚÈݶ¯Ì¬ÔØÈ룬´Ó¶øʵÏÖÄÚÈݵķºÆðºÍÒ³Ãæ¼äµÄÇл»¡£
¶þ¡¢½¨Éèµ¥Ò³Ó¦ÓÃ
ÔÚThinkPHPÖн¨Éèµ¥Ò³Ó¦ÓÃÓÐÐí¶àÖÖÒªÁ죬±¾ÎĽ«ÏÈÈÝÆäÖеÄÒ»ÖÖÒªÁì¡£
Á¬Ã¦Ñ§Ï°¡°PHPÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
1.½¨Éè¿ØÖÆÆ÷
ÔÚThinkPHPÖУ¬ËùÓеÄÓªÒµÂß¼¶¼ÊÇÔÚ¿ØÖÆÆ÷ÖÐʵÏֵġ£Òò´Ë£¬ÎÒÃÇÐèÒªÔÚÓ¦ÓõĿØÖÆÆ÷Öн¨Éèµ¥Ò³Ó¦ÓõĿØÖÆÆ÷¡£ÎÒÃǽ¨ÉèÒ»¸ö¿ØÖÆÆ÷£¬ÃüÃûΪSinglePageController¡£
<?php namespace app\index\controller; use think\Controller; class SinglePageController extends Controller { public function index() { return view(); } }
µÇ¼ºó¸´ÖÆ
ÔÚÉÏÃæµÄ´úÂëÖУ¬ÎÒÃǽç˵ÁËÒ»¸öSinglePageControllerÀà¼ÌÐø×ÔControllerÀ࣬²¢ÇÒ½ç˵ÁËÒ»¸öindexÒªÁ죬Õâ¸öÒªÁ콫ִÐÐÒ³Ãæ¼ÓÔزÙ×÷¡£
2.½¨ÉèÊÓͼ
ÎÒÃÇÐèҪͨ¹ýThinkPHPµÄÊÓͼÒýÇæÀ´½¨ÉèÒ»¸öµ¥Ò³Ó¦ÓõÄÊÓͼ¡£Ê¹ÓÃThinkPHPµÄÊÓͼÒýÇ棬ÎÒÃÇ¿ÉÒÔÔÚHTML´úÂëÖмÓÈëPHP´úÂ룬´Ó¶øʵÏÖÊÓͼµÄÖØÓÃÒÔ¼°Ò³ÃæÊèÉ¢µÈ¹¦Ð§¡£
<!-- 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>
µÇ¼ºó¸´ÖÆ
ÎÒÃÇÔÚ´úÂëÖн¨ÉèÁËÒ»¸öµ¼º½Ìõ£¬ËüµÄidΪnav£¬ÒÔ¼°Ò»¸öÄÚÈÝÇøÓò£¬ËüµÄidΪcontent¡£²¢ÇÒÎÒÃÇÔÚJavaScriptÖаó¶¨ÁËhashchangeÊÂÎñ£¬Ã¿µ±hash±¬·¢¸Ä±äʱ£¨¼´µ¼º½ÌõÁ´½Ó¸Ä±äʱ£©£¬ÎÒÃǽ«Í¨¹ýAjax¼ÓÔضÔÓ¦µÄHTMLÒ³Ãæµ½ÄÚÈÝÇøÓòÖС£
×¢ÖØ£ºµ¥Ò³Ó¦ÓõÄÄÚÈÝÓ¦¸ÃÊÇÒÔ¶à¸öHTMLÒ³Ãæ×é³ÉµÄ£¬¶ø²»ÊÇÔÚÒ»¸öÒ³ÃæÄÚͬʱËùÓÐչʾ¡£
3.½ç˵·ÓɹæÔò
ÓÉÓÚÎÒÃǵÄSinglePageControllerÀàÊÇͨ¹ýË÷ÒýÒªÁìÀ´äÖȾµ¥Ò³Ó¦ÓõÄÊÓͼµÄ£¬Òò´ËÎÒÃÇÐèÒªÔÚ·ÓɹæÔòÖнç˵ÃûΪsinglepageµÄ·ÓɹæÔò£º
<?php use think\Route; // µ¥Ò³Ó¦Ó÷ÓÉ Route::rule('singlepage/:id','index/SinglePage/index');
µÇ¼ºó¸´ÖÆ
ÔÚÉÏÃæµÄ´úÂëÖУ¬ÎÒÃǽç˵ÁËÒ»¸öÃûΪsinglepageµÄ·ÓɹæÔò£¬½«id×÷Ϊ²ÎÊýת´ï¸øSinglePageControllerÀàµÄindexÒªÁì¡£
ÒÔÉϾÍÊÇthinkphpÔõÑùÉèÖõ¥Ò³µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡