thinkphpÔõôÉèÖýçÃæ
thinkphpÊÇÒ»ÖÖ¿ªÔ´µÄphp webÓ¦ÓóÌÐò¿ò¼Ü£¬ÌṩÁË¿ìËÙ¿ª·¢webÓ¦ÓóÌÐòËùÐèÒªµÄ½¹µã¿âºÍÖÚ¶àµÄ¸ßЧ¡¢ÎÞаºÍ¿ÉÀ©Õ¹µÄ×é¼þ¡£±¾ÎĽ«ÎªÄúÏÈÈÝÔõÑùÔÚthinkphpÖÐÉèÖýçÃæ¡£
ʹÓÃÄ£°åÒýÇæ
ÔÚThinkPHPÖУ¬Ê¹ÓÃÄ£°åÒýÇæ¿ÉÒÔÇáËÉÉèÖýçÃæ¡£ÏÖÔÚ£¬ThinkPHPÖ§³Ö¶àÖÖÄ£°åÒýÇ棬°üÀ¨Smarty¡¢TwigºÍBladeµÈµÈ¡£ÕâÀïÒÔSmartyΪÀý£¬ÏÈÈÝÔõÑùÔÚThinkPHPÖÐÉèÖýçÃæ¡£
Ê×ÏÈ£¬ÔÚThinkPHPµÄapplicationĿ¼Ï½¨ÉèÒ»¸öÃûΪ”Home”µÄÄ£¿é£¬²¢ÔÚÄ£¿éµÄĿ¼Ï½¨ÉèÒ»¸öÃûΪ”View”µÄÎļþ¼Ð£¬ÓÃÓÚ´æ·ÅView²ãµÄÄ£°åÎļþ¡£
ÔÚViewÎļþ¼ÐÖУ¬½¨ÉèÒ»¸öÃûΪ”Index”µÄÎļþ¼Ð£¬²¢ÔÚ¸ÃÎļþ¼ÐϽ¨ÉèÒ»¸öÃûΪ”index.tpl”µÄSmartyÄ£°åÎļþ¡£ÔÚ¸ÃÄ£°åÎļþÖУ¬ÎÒÃÇ¿ÉÒÔʹÓÃSmartyÄ£°åÓïÑÔÀ´ÉèÖýçÃæ¡£
ÏÂÃæÊÇÒ»¸ö¼òÆÓµÄSmartyÄ£°å´úÂëʾÀý£º
Á¬Ã¦Ñ§Ï°¡°PHPÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
<html> <head> <title>½Ó´ýÀ´µ½ÎÒµÄÍøÕ¾£¡</title> </head> <body> <h1>½Ó´ýÀ´µ½ÎÒµÄÍøÕ¾£¡</h1> <p>ÕâÊÇÎҵĵÚһƪ²©¿Í¡£</p> </body> </html>
µÇ¼ºó¸´ÖÆ
ÔÚ¸ÃʾÀýÖУ¬ÎÒÃÇ¿ÉÒÔ¿´µ½Ê¹ÓÃÁËHTML±êÇ©ºÍSmartyÄ£°åÓïÑÔÀ´ÉèÖýçÃ档ͨ¹ýÕâÖÖ·½·¨£¬ÎÒÃÇ¿ÉÒÔÇáËɵØÉèÖÃWebÓ¦ÓóÌÐòµÄ½çÃæ¡£
ʹÓÃBootstrap¿ò¼Ü
BootstrapÊÇÒ»ÖÖÊ¢ÐеÄÇ°¶Ë¿ò¼Ü£¬ÓÃÓÚ¿ª·¢ÏìӦʽWebÓ¦ÓóÌÐò¡£ÔÚThinkPHPÖУ¬¿ÉÒÔÇáËɵØʹÓÃBootstrap¿ò¼ÜÀ´ÉèÖýçÃæ¡£
Ê×ÏÈ£¬ÔÚThinkPHPÖÐ×°ÖÃBootstrap¿ò¼Ü£¬²¢½«ÆäÌí¼Óµ½View²ãµÄÄ£°åÖС£¿ÉÒÔͨ¹ýCDN»òÕßÍâµØÎļþµÄ·½·¨À´ÒýÈëBootstrap¿ò¼Ü¡£
ÏÂÃæÊÇÒ»¸ö¼òÆÓµÄBootstrapÄ£°å´úÂëʾÀý£º
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>½Ó´ýÀ´µ½ÎÒµÄÍøÕ¾£¡</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>½Ó´ýÀ´µ½ÎÒµÄÍøÕ¾£¡</h1> <p>ÕâÊÇÎҵĵÚһƪ²©¿Í¡£</p> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </body> </html>
µÇ¼ºó¸´ÖÆ
ÔÚ¸ÃʾÀýÖУ¬ÎÒÃÇ¿ÉÒÔ¿´µ½Ê¹ÓÃÁËBootstrap¿ò¼ÜÀ´ÉèÖýçÃ档ͨ¹ýÕâÖÖ·½·¨£¬ÎÒÃÇ¿ÉÒÔʹÓÃBootstrap¿ò¼ÜÌṩµÄ×é¼þºÍÑùʽÀ´¿ìËٵشWebÓ¦ÓóÌÐòµÄ½çÃæ¡£
ʹÓÃVue.js¿ò¼Ü
Vue.jsÊÇÒ»ÖÖÊ¢ÐеÄJavaScript¿ò¼Ü£¬ÓÃÓÚ¹¹½¨ÏìӦʽWebÓ¦ÓóÌÐò¡£ÔÚThinkPHPÖУ¬¿ÉÒÔʹÓÃVue.js¿ò¼ÜÀ´ÉèÖýçÃæ¡£
Ê×ÏÈ£¬ÔÚThinkPHPÖÐ×°ÖÃVue.js¿ò¼Ü£¬²¢½«ÆäÌí¼Óµ½View²ãµÄÄ£°åÖС£¿ÉÒÔͨ¹ýCDN»òÕßÍâµØÎļþµÄ·½·¨À´ÒýÈëVue.js¿ò¼Ü¡£
ÏÂÃæÊÇÒ»¸ö¼òÆÓµÄVue.jsÄ£°å´úÂëʾÀý£º
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>½Ó´ýÀ´µ½ÎÒµÄÍøÕ¾£¡</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { title: '½Ó´ýÀ´µ½ÎÒµÄÍøÕ¾£¡', content: 'ÕâÊÇÎҵĵÚһƪ²©¿Í¡£' } }); </script> </body> </html>
µÇ¼ºó¸´ÖÆ
ÔÚ¸ÃʾÀýÖУ¬ÎÒÃÇ¿ÉÒÔ¿´µ½Ê¹ÓÃÁËVue.js¿ò¼ÜÀ´ÉèÖýçÃ档ͨ¹ýÕâÖÖ·½·¨£¬ÎÒÃÇ¿ÉÒÔʹÓÃVue.js¿ò¼ÜÌṩµÄ×é¼þ¡¢Ö¸ÁîºÍÊý¾Ý°ó¶¨µÈ¹¦Ð§À´¿ìËٵشWebÓ¦ÓóÌÐòµÄ½çÃæ¡£
×ܽá
ÔÚ±¾ÎÄÖУ¬ÎÒÃÇÏÈÈÝÁËÔÚThinkPHPÖÐÉèÖýçÃæµÄÈýÖÖÒªÁ죺ʹÓÃÄ£°åÒýÇ桢ʹÓÃBootstrap¿ò¼ÜºÍʹÓÃVue.js¿ò¼Ü¡£Í¨¹ýÕâЩҪÁ죬ÎÒÃÇ¿ÉÒÔÇáËɵشWebÓ¦ÓóÌÐòµÄ½çÃ棬ʵÏÖ¸ßЧµÄ¿ª·¢¡£
ÒÔÉϾÍÊÇthinkphpÔõôÉèÖýçÃæµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡