×ðÁú¿­Ê±¹ÙÍøµÇ¼

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ÔõÑùÉèÖõ¥Ò³µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼ ¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý ¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎ壬9:30-18:30£¬½ÚãåÈÕÐÝÏ¢

QR code
ÍøÕ¾µØͼ