一、需求描述
dedeCMS自帶的模板中有互動中心模塊，如下圖所示：
由於會員登陸對我來說不是網站的重要模塊且默認DedeCMS的會員中心模塊的初始化很慢，常會顯示“正在載入中，請稍候。。。”，
所以不想讓它出現在首頁上，而是想在頂層banner中顯示自定義登錄信息，如下圖所示：
二、原理分析
我們來分析一下DedeCSM自帶的模板是怎么實現會員中心及登錄信息顯示的內容的：
1、index.htm中定義了用戶名密碼模塊：
<dd id="uc_member" > <div id="_userlogin"> <div class="userlogin"> <form name="userlogin" action="{dede:global.cfg_memberurl/}/index_do.php" method="POST"> <input type="hidden" name="fmdo" value="login" /> <input type="hidden" name="dopost" value="login" /> <input type="hidden" name="keeptime" value="604800" /> <div class="fb"><span>用戶名:</span> <input type="text" name="userid" size="20" class="ipt-txt" /> </div> <div class="fb"><span>密碼:</span> <input type="password" name="pwd" size="20" class="ipt-txt" /> </div> {dede:php} if(preg_match("#2#", $safe_gdopen)) { echo ' <div class="fb"><span>驗證碼:</span> <input type="text" name="vdcode" size="8" class="ipt-txt" /> <img id="vdimgck" align="absmiddle" onClick="this.src=this.src+\'?\'" style="cursor:pointer;margin-left:0px;text-transform:uppercase;" alt="看不清？點擊更換" src="'.$cfg_cmspath.'/include/vdimgck.php"/></div> '; } {/dede:php} <div class="submit"> <button type="submit" class="btn-1">登錄</button> <a href="{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew" >注冊帳號</a> <a href="{dede:global.cfg_memberurl/}/resetpassword.php">忘記密碼?</a> </div> </form> </div> </div> <!-- /userlogin --> <script language="javascript" type="text/javascript">CheckLogin();</script> <div class="latestlogin"> <strong>最近登陸的會員</strong> <ul class="e7"> {dede:memberlist row=6 signlen=30} <li><a href="[field:spaceurl/]" target="_blank"><img src="[field:face/]" alt='[field:spacename/]' width="52" height="52" />[field:uname/]</a></li> {/dede:memberlist} </ul> </div> <!-- /latestlogin --> </dd>
從以上代碼可以看出它只是顯示一個界面而與，那么當我們輸入用戶名、密碼，點登錄后是怎么變為如下的結果呢：
2、在上面的代碼中點了登錄按鈕后，由於沒有指定button的onclick響應函數，所以默認submit會有一個跳轉，頁面會刷新。
當頁面刷新時，就把index.htm的HTML再次執行一次。在上面代碼的下面有這么一行代碼：
<!-- /userlogin --> <script language="javascript" type="text/javascript">CheckLogin();</script>
3、我們來看CheckLogin()的定義，它出現在index.htm的head區：
<link href="{dede:global.cfg_templets_skin/}/style/dedecms.css" rel="stylesheet" media="screen" type="text/css" /> <script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script> <script language="javascript" type="text/javascript" src="{dede:global.cfg_cmspath/}/images/js/j.js" ></script> <script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/pic_scroll.js"></script> <script language="javascript" type="text/javascript"> <!-- $(function(){ $("a[_for]").mouseover(function(){ $(this).parents().children("a[_for]").removeClass("thisclass").parents().children("dd").hide(); $(this).addClass("thisclass").blur(); $("#"+$(this).attr("_for")).show(); }); $("a[_for=uc_member]").mouseover(); $("a[_for=flink_1]").mouseover(); }); function CheckLogin(){ var taget_obj = document.getElementById('_userlogin'); myajax = new DedeAjax(taget_obj,false,false,'','',''); myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php"); DedeXHTTP = null; } --> </script>
CheckLogin()首先獲得id為'_userlogin'的網頁元素，其實這個元素就是我們的用戶名密碼登錄模塊；
然后調用DedeAjax函數，這個函數定義在{dede:global.cfg_cmsurl/}/include/dedeajax2.js文件（所以在前面引入了引javascript文件）
//gcontainer 是保存下載完成的內容的容器
//mShowError 是否提示錯誤信息
//DedeShowWait 是否提示等待信息
//mErrCon 服務器返回什么字符串視為錯誤
//mErrDisplay 發生錯誤時顯示的信息
//mWaitDisplay 等待時提示信息
//默認調用 DedeAjax('divid',false,false,'','','')
function DedeAjax(gcontainer,mShowError,mShowWait,mErrCon,mErrDisplay,mWaitDisplay)
{
//用GET方式發送數據，阻塞模式
this.SendGet2 = function(purl) {
從以上我們知道為什么能顯示登錄結果的原因了：
通過調用通訊模塊dedeajax2.js的功能根據{dede:global.cfg_cmspath/}/member/ajax_loginsta.php返回結果網頁代碼，然后在id為"_userlogin'"的地方顯示。
ajax_loginsta.php的一部分代碼如下：
require_once(dirname(__FILE__)."/config.php"); AjaxHead(); if($myurl == '') exit(''); $uid = $cfg_ml->M_LoginID; !$cfg_ml->fields['face'] && $face = ($cfg_ml->fields['sex'] == '女')? 'dfgirl' : 'dfboy'; $facepic = empty($face)? $cfg_ml->fields['face'] : $GLOBALS['cfg_memberurl'].'/templets/images/'.$face.'.png'; ?> <div class="userinfo"> <div class="welcome">你好：<strong><?php echo $cfg_ml->M_UserName; ?></strong>，歡迎登錄 </div> <div class="userface"> <a href="<?php echo $cfg_memberurl; ?>/index.php"><img src="<?php echo $facepic;?>" width="52" height="52" /></a> </div> <div class="mylink"> <ul> <li><a href="<?php echo $cfg_memberurl; ?>/guestbook_admin.php">我的留言</a></li> <li><a href="<?php echo $cfg_memberurl; ?>/mystow.php">我的收藏</a></li> <li><a href="<?php echo $cfg_memberurl; ?>/article_add.php">發表文章</a></li> <li><a href="<?php echo $cfg_memberurl; ?>/myfriend.php">好友管理</a></li> <li><a href="<?php echo $cfg_memberurl; ?>/visit-history.php">訪客記錄</a></li> <li><a href="<?php echo $cfg_memberurl; ?>/search.php">查找好友</a></li> </ul> </div> <div class="uclink"> <a href="<?php echo $cfg_memberurl; ?>/index.php">會員中心</a> | <a href="<?php echo $cfg_memberurl; ?>/edit_fullinfo.php">資料</a> | <a href="<?php echo $myurl;?>">空間</a> | <a href="<?php echo $cfg_memberurl; ?>/index_do.php?fmdo=login&dopost=exit">退出登錄</a> </div> </div><!-- /userinfo -->
以上代碼定義了我們看到的登錄結果的樣式。
三、修改代碼
知道了顯示的原理，接下來我們開始實現我們的功能：
1、定義顯示的地方，並指定id。
在head.htm中添加：
<!----> <div class="header_top"> <div class="w960 center"> <div id="_userlogin_head"> </div> <div class="toplinks"> 歡迎來到本網站, 請 <a href="{dede:global.cfg_memberurl/}/login.php" target="_blank">登錄</a> |<a href="{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew" target="_blank">注冊</a> </div><!--/toplinks--> </div> </div>
2、添加javascript執行
<script language="javascript" type="text/javascript">CheckLogin_head();</script>
3、自義javascript的CheckLogin_head()函數
為了使代碼模塊化，我們定義在head.htm里。
注意：得重新包含dedeajax2.js和j.js文件，因為雖然我們之前在index.htm中定義過了，但是是引用不到的。
<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script> <script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/j.js" ></script> <SCRIPT language=javascript type=text/javascript> <!-- function CheckLogin_head(){ var taget_obj_head = document.getElementById('_userlogin_head'); myajax_head = new DedeAjax(taget_obj_head,false,false,'','',''); myajax_head.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta_head.php"); DedeXHTTP = null; } --> </SCRIPT>
4、其實第3步大家有注意到了我們是根據ajax_loginsta_head.php文件來獲得結果HTML代碼的。
ajax_loginsta_head.php文件是由ajax_loginsta.php 復制粘貼出來的，我們在它的基礎上改為：
require_once(dirname(__FILE__)."/config.php"); AjaxHead(); if($myurl == '') exit(''); $uid = $cfg_ml->M_LoginID; !$cfg_ml->fields['face'] && $face = ($cfg_ml->fields['sex'] == '女')? 'dfgirl' : 'dfboy'; $facepic = empty($face)? $cfg_ml->fields['face'] : $GLOBALS['cfg_memberurl'].'/templets/images/'.$face.'.png'; ?> <div class="userinfo"> <script type="text/javascript"> var now=(new Date()).getHours(); if(now>0&&now<=6){ document.write("午夜好，"); }else if(now>6&&now<=11){ document.write("早上好，"); }else if(now>11&&now<=14){ document.write("中午好，"); }else if(now>14&&now<=18){ document.write("下午好，"); }else{ document.write("晚上好，"); } </script> 你好：<strong><?php echo $cfg_ml->M_UserName; ?></strong>，歡迎登錄 <a href="<?php echo $cfg_memberurl; ?>/index_do.php?fmdo=login&dopost=exit">退出登錄</a> </div><!-- /userinfo -->
OK，效果顯示出來了。