（6）頁面布局 · Thinkphp5小白到初級實戰

這一章主要是頁面布局和退出登錄，還有顯示用戶名，沒有什么新的技術點。退出登錄代碼： ~~~ /** * 退出登錄 */ public function logout(){ // 清除session session(null); return $this->success('退出成功',url('index/login/index')); } ~~~ 個人中心頁面調用退出登錄方法： ![](https://box.kancloud.cn/bf096c95051b3a7cc5b25dfc598c2b77_721x181.png) 上面的php代碼就是用來顯示用戶名代碼的。下面來看一下頁面添加了什么功能： ![](https://box.kancloud.cn/76bdca185bc3f126be220e046c29e834_654x918.png) 頁面代碼如下： ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> </title> <meta name="author" content="m.jd.com"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" type="text/css" href="__INDEX__/css/base2013.css" charset="gbk"> <link rel="stylesheet" type="text/css" href="__INDEX__/css/myhome1.01.css" charset="gbk"> <script type="text/javascript" src="__INDEX__/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="__INDEX__/js/spin.min.js"></script> <style></style>  <script type="text/javascript" src="__INDEX__/js/ojbUrl.js"></script>  <script type="text/javascript" src="__INDEX__/js/pingJS.1.0.js"></script>  <link rel="stylesheet" type="text/css" href="__INDEX__/css/header.css" charset="utf-8"> <link href="__INDEX__/css/new_style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="__INDEX__/js/m_common.js"></script> <link rel="stylesheet" type="text/css" charset="utf-8" href="__INDEX__/css/header(1).css"> <script type="text/javascript" src="__INDEX__/js/downloadAppPlugIn.js"></script> </head> <body id="body"> <a name="top"></a> <header> <div class="new-footer"> <ul> <li> <a href="index.html"> <img id="imggame" src="__INDEX__/images/heard/fenlei.png" /> <span>首頁</span> </a> </li> <li> <a href="/"> <img id="imggame" src="__INDEX__/images/heard/tognshubang-0604.png"/> <span>娛樂</span> </a> </li> <li> <a href="/"> <img id="imggame" src="__INDEX__/images/heard/dianzihsu.png"/> <span>聊天</span> </a> </li> <li> <a href="gerenzx.html"> <img id="imggame" src="__INDEX__/images/heard/547bc742N95a14876.png" /> <span>個人中心</span> </a> </li> </ul> </div>  <div id="m_common_header" style="min-height:45px;"> <header class="jd-header"> <div class="jd-header-bar"> <div id="m_common_header_goback" class="jd-header-icon-back"> <a href=""><span></span></a> </div> <div class="jd-header-title">我的商城</div> </div> <ul id="m_common_header_shortcut" class="jd-header-shortcut" style="display: none;"> <li id="m_common_header_shortcut_m_index"> <a class="J_ping" report-eventid="MCommonHead_home" report-eventparam="" page_name="" href=""> <span class="shortcut-home"></span> <strong>首頁</strong> </a> </li> <li class="J_ping" report-eventid="MCommonHead_CategorySearch" report-eventparam="" page_name="" id="m_common_header_shortcut_category_search"> <a href=""> <span class="shortcut-categories"></span> <strong>分類搜索</strong> </a> </li> <li class="J_ping" report-eventid="MCommonHead_Cart" report-eventparam="" page_name="" id="m_common_header_shortcut_p_cart"> <a href="" id="html5_cart"> <span class="shortcut-cart"></span> <strong>購物車</strong> </a> </li> <li id="m_common_header_shortcut_h_home" class=" current"> <a class="J_ping" report-eventid="MCommonHead_MYJD" report-eventparam="" page_name="" href=""> <span class="shortcut-my-account"></span> <strong>我的商城</strong> </a> </li> </ul> </header> </div> </header> <style type="text/css"> .current-half-width li { width: 50% !important; } </style> <div class="common-wrapper">    <div class="head-img"> <span class="my-img" style="background-image:url('__INDEX__/images/gerenzx/defaul.png')"></span> <p style="color: #CC5291"><?php echo session('susername');?></p> </div> <ul class="padding-list current-half-width"> <li> <a id="waite4Payment" href=""> <p id="waite4PaymentSum">0</p> <p>待付款</p> </a> </li> <li> <a id="waitDeliveryOrderList" href=""> <p id="waitDeliveryOrderListSum">0</p> <p>待確認收貨</p> </a> </li>  </ul> <ul class="menu-list"> <li> <a id="quanbudingdan" href=""> <img src="__INDEX__/images/gerenzx/547bc6b5Ncc52a3b8.png" alt=""> <p>全部訂單</p> </a> </li> <li> <a id="wodeqianbao" href=""> <img src="__INDEX__/images/gerenzx/547bc6dbN3dabf32a.png" alt=""> <p>我的賬戶</p> </a> </li> <li> <a id="liulanjilu" href=""> <img src="__INDEX__/images/gerenzx/547bc70aNf7e3462a.png" alt=""> <p>瀏覽記錄</p> </a> </li> <li> <a id="wodeguanzhu" href=""> <img src="__INDEX__/images/gerenzx/547bc6eaN6c97383c.png" alt=""> <p>我的關注</p> </a> </li>                             </ul> <ul class="couponIn-list"> <li> <a id="wodebigouma" href=""> <div class="couponIn-item"> <div class="couponIn-icon"><img src="__INDEX__/images/gerenzx/55546b06Nbd7a17eb.png"></div> <div class="couponIn-item-info"> <span class="info-title">查看訂單</span> <span class="info-hint"></span> </div> </div> <div class="couponIn-item"> <div class="couponIn-icon"><img src="__INDEX__/images/gerenzx/55546b06Nbd7a17eb.png"></div> <div class="couponIn-item-info"> <span class="info-title">收貨地址</span> <span class="info-hint"></span> </div> </div> <div class="couponIn-item"> <div class="couponIn-icon"><img src="__INDEX__/images/gerenzx/55546b06Nbd7a17eb.png"></div> <div class="couponIn-item-info"> <span class="info-title">我的投訴</span> <span class="info-hint"></span> </div> </div> </a> </li> </ul> </div> <link rel="stylesheet" type="text/css" href="__INDEX__/css/guessing.css" charset="utf-8"> <link rel="stylesheet" type="text/css" href="__INDEX__/css/list.css" charset="utf-8"> <script type="text/javascript" src="__INDEX__/js/jdslider.src.js"></script> <script type="text/javascript" src="__INDEX__/js/news1.0.js"></script> <script type="text/javascript"> $(document).ready(function() { showHeadInfo(); $('#guessing').jdSlider({ lineNum: 2, fitToScreen: true }); }); //顯示頭信息 var showHeadInfo = function() { var t = (new Date()).valueOf(); jQuery.get('/myJd/showHeadInfo.json?t=' + t, {}, function(data) { if(data) { var waite4PaymentSum = data.waite4PaymentSum; var waitDeliveryOrderListSum = data.waitDeliveryOrderListSum; var infoCount = data.infoCount; $('#waite4PaymentSum').html(waite4PaymentSum); $('#waitDeliveryOrderListSum').html(waitDeliveryOrderListSum); $('#infoCount').html(infoCount); /* if(infoCount > 0){ $('#unread-msg-point').addClass('unread-msg'); }else{ $('#unread-msg-point').removeClass('unread-msg'); } */ } }, 'json'); } //顯示商品詳情 var showProductDetail = function(wareId, sid, clk, meObj) { //alert('MMyJD_GuessYouLike' + " | " + wareId + " | " + urlRemoveParam(meObj.href,'sid')); pingClick(true, 'MMyJD_GuessYouLike', wareId, urlRemoveParam(meObj.href, 'sid'), ''); //埋點猜猜你喜歡 //可能網絡原因 ajax 訪問服務器的時間過長或者是網絡問題，可能引起跳轉失敗,所以現在是 a標簽上增加onclick方式. jQuery.get('/myJd/loveProductDetail.json', { 'wareId': wareId, 'sid': sid, 'clk': clk }, function(data) { }); } $(document).ready(function() { //埋點 var pingObject = [{ id: 'waite4Payment', eventId: 'MMyJD_Ordersnotpay' }, { id: 'waitDeliveryOrderList', eventId: 'MMyJD_Ordersnotreceiving' }, { id: 'myMessage', eventId: 'MMyJD_MyMessages' }, { id: 'quanbudingdan', eventId: 'MMyJD_AllOrders' }, { id: 'wodeqianbao', eventId: 'MMyJD_MyPurse' }, { id: 'wodeguanzhu', eventId: 'MMyJD_MyFollows' }, { id: 'liulanjilu', eventId: 'MMyJD_BrowserHistory' }, { id: 'fuwuguanjia', eventId: 'MMyJD_ServiceManager' }, { id: 'zhanghuguanli', eventId: 'MMyJD_AccountManager' }, { id: 'wodeyuyue', eventId: 'MMyJD_MyAppointment' }, { id: 'yingyongtuijian', eventId: 'MMyJD_ApplicationRecommend' }, { id: 'wodebigouma', eventId: 'MMyJD_JCode' }]; jQuery.each(pingObject, function(i, n) { var jObj = $("#" + n.id); jObj.bind("click", function() { var href = jObj.attr("href").trim(); //alert(n.eventId + " | " + urlRemoveParam(href,'sid')); pingClick(true, n.eventId, '', urlRemoveParam(href, 'sid'), ''); }); }); }); </script>  <div id="m_common_bottom" style="min-height:170px;"> <footer id="m_common_bottom_jd_footer" class="jd-footer"> <div class="jd-1px-line-up"></div> <ul class="jd-footer-links"> <li class=""> <a class="J_ping" report-eventid="MCommonHTail_Account" report-eventparam="" page_name="" rel="nofollow" href=""><?php echo session('susername');?></a> </li> <li> <a class="J_ping" report-eventid="MCommonHTail_Exit" report-eventparam="" page_name="" rel="nofollow" href="{:url('index/login/logout')}">退出</a> </li> <li> <a class="J_ping" report-eventid="MCommonHTail_Feedback" report-eventparam="" page_name="" rel="nofollow" href="">反饋</a> </li> <li> <a class="J_ping" report-eventid="MCommonHTail_ToTop" report-eventparam="" page_name="" rel="nofollow" href="">回到頂部</a> </li> </ul> <div class="jd-1px-line-up"></div> <ul class="jd-footer-platforms"> <li id="m_common_bottom_apps" class="jd-footer-icon-apps"> <a class="badge" "=" " report-eventid="MCommonHTail_ClientApp " report-eventparam=" " page_name=" ">客戶端</a></li><li id="m_common_bottom_touchscreen " class="jd-footer-icon-touchscreen current "><a class="J_ping " report-eventid="MCommonHTail_TouchEdition " report-eventparam=" " page_name=" ">觸屏版</a></li><li id="m_common_bottom_pc " class="jd-footer-icon-pc "><a class="J_ping " report-eventid="MCommonHTail_PCEdition " report-eventparam=" " page_name=" ">電腦版</a></li> </ul><div class="jd-1px-line-up "></div><div class="jd-footer-copyright ">Copyright ? 2014-2015 meijiashangcheng.com 版權所有 </div></footer></div> <div style="display:none; "> </div> <script type="text/javascript "> var jap = { siteId : 'MO-J2011-1', topic: 'traffic-jdm', account : '', skuid: '', shopid: '', orderid: '', adsCookieName: 'mt_subsite', jumpAppEnable : 1, __cookie_jda: '__tra', __cookie_jdb: '__trb', __cookie_jdc: '__trc', __cookie_jdu: '__tru', __cookie_jdv: '__trv' }; </script> <script type="text/javascript " src="__INDEX__/js/pingJS.1.0.js "></script> <script type="text/javascript "> pingJS(); </script> <script type="text/javascript "> $("#unsupport ").hide(); if(!testLocalStorage()){ //not support html5 if(0!=0 && !$clearCart && !$teamId){ $("#html5_cart_num ").text(0>0>0); } }else{ updateToolBar(''); } $("#html5_cart ").click(function(){ // syncCart('afddc2234d03b7e6974b75f6e79e0fd1',true); location.href=''; }); function reSearch(){ var depCity = window.sessionStorage.getItem("airline_depCityName "); if(testSessionStorage() && isNotBlank(depCity) && !/^\s*$/.test(depCity) && depCity!=" "){ var airStr = '<form action="/airline/list.action " method="post " id="reseach ">' +'<input type="hidden " name="sid " value="afddc2234d03b7e6974b75f6e79e0fd1 "/>' +'<input type="hidden " name="depCity " value=" '+ window.sessionStorage.getItem("airline_depCityName") +' "/>' +'<input type="hidden " name="arrCity " value=" '+ window.sessionStorage.getItem("airline_arrCityName") +' "/>' +'<input type="hidden " name="depDate " value=" '+ window.sessionStorage.getItem("airline_depDate") +' "/>' +'<input type="hidden " name="depTime " value=" '+ window.sessionStorage.getItem("airline_depTime") +' "/>' +'<input type="hidden " name="classNo " value=" '+ window.sessionStorage.getItem("airline_classNo") +' "/>' +'</form>'; $("body ").append(airStr); $("#reseach ").submit(); }else{ window.location.href=''; } } //banner 關閉點擊 $('.div_banner_close').click(function(){ $('#div_banner_header').unbind('click'); jQuery.post('/index/addClientCookieVal.json',function(d){ $('#div_banner_header').slideUp(500); }); }); //banner 下載點擊 $('.div_banner_download').click(function(){ var downloadUrl = $(this).attr('url'); jQuery.post('',function(d){ window.location.href=downloadUrl; }); }); </script>  <script> $(document).ready(function(){ var mchb = new MCommonHeaderBottom(); var title = " "; var headerArg = {hrederId : 'm_common_header', title:title, sid : 'afddc2234d03b7e6974b75f6e79e0fd1', isShowShortCut : false, selectedShortCut : '4'}; mchb.header(headerArg); var sid = 'afddc2234d03b7e6974b75f6e79e0fd1'; var pin = 'dahai516802786'; var toPcSkipurl = ''; //跳轉電腦版url var footerPlatforms = mchb.platformEnum(toPcSkipurl,sid).enum3_1; var bottomArg = {bottomId : 'm_common_bottom', sid : sid, pin : pin ,footerPlatforms : footerPlatforms}; mchb.bottom(bottomArg); }); </script> <script> var urlRemoveParam = function(url,paramName){ var myurl=new MJdUrl.URL(url); myurl.remove(paramName); //刪除了 paramName return myurl.url(); } </script> </body> </html> ~~~ 頂部主要代碼：本來打算分開然后用include引入頁面文件的，但是要開啟iis環境，其他方法又沒有那么靈活。所以只好寫進去了 ~~~ <div class="new-footer"> <ul> <li> <a href="index.html"> <img id="imggame" src="__INDEX__/images/heard/fenlei.png" /> <span>首頁</span> </a> </li> <li> <a href="/"> <img id="imggame" src="__INDEX__/images/heard/tognshubang-0604.png"/> <span>娛樂</span> </a> </li> <li> <a href="/"> <img id="imggame" src="__INDEX__/images/heard/dianzihsu.png"/> <span>聊天</span> </a> </li> <li> <a href="gerenzx.html"> <img id="imggame" src="__INDEX__/images/heard/547bc742N95a14876.png" /> <span>個人中心</span> </a> </li> </ul> </div> ~~~ css代碼： ~~~ .new-footer { border-top: solid 1px #E9E9E9; height: 100%; background: #fff; /*position: fixed;*/ /*bottom: 0;*/ /*left: 0;*/ width: 100%; overflow: hidden; /*position: relative;*/ margin: 0 auto; max-width: 640px; min-width: 320px; z-index: 12; } .new-footer ul { display: inline-block; width: 100%; height: 100%; } .new-footer ul li { float: left; width: 25%; height: 100%; } .new-footer ul li a { display: block; height: 100%; text-align: center; font-size: 1.4rem; } /*.new-footer ul li a img { margin: 0px 0 0 0; /*width: 20px;*/ }*/ .new-footer ul li a img.gray{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } .new-footer ul li a span { display: block; text-align: center; height: 18px; line-height: 18px; font-size: 1.2rem; } /*.new-footer ul li a span { display: block; text-align: center; }*/ .new-footer ul li a span.add-span { width: 45px; height: 45px; margin: -19px auto 0 auto; border-radius: 100%; line-height: 45px; margin-bottom: 0px; background: url(../images/+.png) no-repeat; background-size: 45px 45px; } #imggame{ width: 1.8125em; height: 1.8125em; } ~~~ 下一章將會實現首頁的輪播圖片廣告修改和登錄狀態檢測。 ![](https://box.kancloud.cn/ee729c462f59c59735269de71aba09d8_667x840.png)