制作一个可以在前台登录帝国cms后台管理的表单

时间：2016-11-16 15:52:41

分类：帝国教程

首先说一下需求：今天cms大学小编接到这个任务，比较奇葩，要求在前台页面，就是网站首页增加一组输入框，用于输入账号密码后直接登入帝国cms后台，这个多少还是有些安全性问题的。直接将后台登录表单及后台地址暴露在外边，不过这对于内网使用的网站来说问题也不大。

思路：将帝国cms后台登录界面的表单移植到前台就好了，帝国cms原来的表单如下：

折叠XML/HTML 代码
  1. <form name="login" id="login" method="post" action="ecmsadmin.php" onsubmit="return CheckLogin(document.login);">  
  2.     <input type="hidden" name="enews" value="login">  
  3.     <tbody>  
  4.   
  5.       <tr>  
  6.         <td height="80"><table width="230" height="100%" border="0" align="right" cellpadding="0" cellspacing="0">  
  7.             <tbody>  
  8.               <tr>  
  9.                 <td width="50" height="27">用户名: </td>  
  10.                 <td colspan="2"><input name="username" type="text" class="b-form2" size="24"></td>  
  11.               </tr>  
  12.               <tr>  
  13.                 <td height="27">密  码: </td>  
  14.                 <td colspan="2"><input name="password" type="password" class="b-form2" size="24"></td>  
  15.               </tr>  
  16.               <tr>  
  17.                 <td height="27">提  问: </td>  
  18.                 <td colspan="2"><select name="equestion" id="equestion" onchange="if(this.options[this.selectedIndex].value==0){showanswer.style.display='none';}else{showanswer.style.display='';}">  
  19.                     <option value="0">无安全提问</option>  
  20.                     <option value="1">母亲的名字</option>  
  21.                     <option value="2">爷爷的名字</option>  
  22.                     <option value="3">父亲出生的城市</option>  
  23.                     <option value="4">您其中一位老师的名字</option>  
  24.                     <option value="5">您个人计算机的型号</option>  
  25.                     <option value="6">您最喜欢的餐馆名称</option>  
  26.                     <option value="7">驾驶执照的最后四位数字</option>  
  27.                   </select></td>  
  28.               </tr>  
  29.               <tr id="showanswer" style="display: none;">  
  30.                 <td height="27">答  案: </td>  
  31.                 <td colspan="2"><input name="eanswer" type="text" id="eanswer" class="b-form2" size="24"></td>  
  32.               </tr>  
  33.               <tr>  
  34.                 <td height="27">验证码: </td>  
  35.                 <td width="83"><input name="key" type="text" class="b-form2" size="9"></td>  
  36.                 <td width="97"><img src="ShowKey.php" name="KeyImg" id="KeyImg" align="bottom" onclick="KeyImg.src='ShowKey.php?'+Math.random()" title="看不清楚,点击刷新"></td>  
  37.               </tr>  
  38.               <tr>  
  39.                 <td height="27">窗  口: </td>  
  40.                 <td colspan="2"><input type="radio" name="adminwindow" value="0" checked="">  
  41.                   正常  
  42.                   <input type="radio" name="adminwindow" value="1">  
  43.                   全屏</td>  
  44.               </tr>  
  45.               <tr>  
  46.                 <td height="27"> </td>  
  47.                 <td colspan="2" valign="bottom"><input name="imageField" type="image" src="loginimg/login2.gif" width="69" height="21" border="0"></td>  
  48.               </tr>  
  49.             </tbody>  
  50.           </table></td>  
  51.       </tr>  
  52.   
  53.     </tbody>  
  54.   </form>  

其中有一部分没有作用，我们只要将其中需要用到的几个输入框拿过来就好了，也就是用户名、密码、验证码。我们直接写前台样式及结构，将表单的提交地址改为后台路径，代码如下：

折叠XML/HTML 代码
  1. <!--登录-->  
  2. <style>  
  3. .login{width:100%; background:url(/skin/login.png) no-repeat right center; font-family:Microsoft Yahei}  
  4. .login .logl{width:70%; margin-bottom:10px;}  
  5. .login .logl .lbl{float:left; width:30%; text-align:right; line-height:34px; font-size:18px;}  
  6. .login .logl .lgr{float:right; width:70%;}  
  7. .login .logl .lgr .b-form2{ height:34px; line-height:34px; width:100%;}  
  8. .login .logl .lgr .b-form2-yzm{width:150px;}  
  9. .login .logl .lgr .yzm{width:80px; height:34px; float:right;}  
  10. .login .logl .lgr .loginbtn{width:80px; height:34px;background-color: #459d5f; border:none; color:#fff; cursor:pointer}  
  11. .login .logl .lgr .loginbtn:hover{background-color:#286e3d;}  
  12. .clear{clear:both;}  
  13. </style>  
  14. <div class="login">  
  15. <form name="login" id="login" method="post" action="/e/admin/ecmsadmin.php">  
  16.     <input type="hidden" name="enews" value="login">  
  17.   <div class="logl">  
  18.     <span class="lbl">用户名：</span><span class="lgr"><input name="username" type="text" class="b-form2" size="24" placeholder="请输入账号" /></span>  
  19.     <div class="clear"></div>  
  20.   </div>  
  21.   <div class="logl">  
  22.     <span class="lbl">密 码：</span><span class="lgr"><input name="password" type="password" class="b-form2" size="24" placeholder="请输入密码"></span>  
  23.     <div class="clear"></div>  
  24.   </div>  
  25.   <div class="logl">  
  26.     <span class="lbl">验证码：</span><span class="lgr"><input name="key" type="text" class="b-form2 b-form2-yzm" size="24" placeholder="请输入验证码" /><img src="/e/admin/ShowKey.php" name="KeyImg" id="KeyImg"   
  27.   
  28. onclick="KeyImg.src='/e/admin/ShowKey.php?'+Math.random()" title="看不清楚,点击刷新" class="yzm"></span>  
  29.     <div class="clear"></div>  
  30.   </div>  
  31.   <div class="logl">  
  32.     <span class="lbl"></span><span class="lgr"><input name="submit" type="submit" class="loginbtn" size="24" value="登 录" /></span>  
  33.     <div class="clear"></div>  
  34.   </div>  
  35.   
  36. </form>  
  37. </div>  
  38. <!--登录-->  

最终效果如下图

QQ截图20161116160236.jpg

其中用到的登录钥匙背景图，可以按照自己的需求放置。

login.png

结语：这样我们就可以在网站的页面上增加一个登录框可以直接登录帝国cms后台了，虽然便捷，但cms大学不支持大家这么做。

分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.