首先说一下需求：今天cms大学小编接到这个任务，比较奇葩，要求在前台页面，就是网站首页增加一组输入框，用于输入账号密码后直接登入帝国cms后台，这个多少还是有些安全性问题的。直接将后台登录表单及后台地址暴露在外边，不过这对于内网使用的网站来说问题也不大。
思路：将帝国cms后台登录界面的表单移植到前台就好了，帝国cms原来的表单如下：
折叠XML/HTML 代码
- <form name="login" id="login" method="post" action="ecmsadmin.php" onsubmit="return CheckLogin(document.login);">
- <input type="hidden" name="enews" value="login">
- <tbody>
- <tr>
- <td height="80"><table width="230" height="100%" border="0" align="right" cellpadding="0" cellspacing="0">
- <tbody>
- <tr>
- <td width="50" height="27">用户名: </td>
- <td colspan="2"><input name="username" type="text" class="b-form2" size="24"></td>
- </tr>
- <tr>
- <td height="27">密 码: </td>
- <td colspan="2"><input name="password" type="password" class="b-form2" size="24"></td>
- </tr>
- <tr>
- <td height="27">提 问: </td>
- <td colspan="2"><select name="equestion" id="equestion" onchange="if(this.options[this.selectedIndex].value==0){showanswer.style.display='none';}else{showanswer.style.display='';}">
- <option value="0">无安全提问</option>
- <option value="1">母亲的名字</option>
- <option value="2">爷爷的名字</option>
- <option value="3">父亲出生的城市</option>
- <option value="4">您其中一位老师的名字</option>
- <option value="5">您个人计算机的型号</option>
- <option value="6">您最喜欢的餐馆名称</option>
- <option value="7">驾驶执照的最后四位数字</option>
- </select></td>
- </tr>
- <tr id="showanswer" style="display: none;">
- <td height="27">答 案: </td>
- <td colspan="2"><input name="eanswer" type="text" id="eanswer" class="b-form2" size="24"></td>
- </tr>
- <tr>
- <td height="27">验证码: </td>
- <td width="83"><input name="key" type="text" class="b-form2" size="9"></td>
- <td width="97"><img src="ShowKey.php" name="KeyImg" id="KeyImg" align="bottom" onclick="KeyImg.src='ShowKey.php?'+Math.random()" title="看不清楚,点击刷新"></td>
- </tr>
- <tr>
- <td height="27">窗 口: </td>
- <td colspan="2"><input type="radio" name="adminwindow" value="0" checked="">
- 正常
- <input type="radio" name="adminwindow" value="1">
- 全屏</td>
- </tr>
- <tr>
- <td height="27"> </td>
- <td colspan="2" valign="bottom"><input name="imageField" type="image" src="loginimg/login2.gif" width="69" height="21" border="0"></td>
- </tr>
- </tbody>
- </table></td>
- </tr>
- </tbody>
- </form>
其中有一部分没有作用，我们只要将其中需要用到的几个输入框拿过来就好了，也就是用户名、密码、验证码。我们直接写前台样式及结构，将表单的提交地址改为后台路径，代码如下：
折叠XML/HTML 代码
- <!--登录-->
- <style>
- .login{width:100%; background:url(/skin/login.png) no-repeat right center; font-family:Microsoft Yahei}
- .login .logl{width:70%; margin-bottom:10px;}
- .login .logl .lbl{float:left; width:30%; text-align:right; line-height:34px; font-size:18px;}
- .login .logl .lgr{float:right; width:70%;}
- .login .logl .lgr .b-form2{ height:34px; line-height:34px; width:100%;}
- .login .logl .lgr .b-form2-yzm{width:150px;}
- .login .logl .lgr .yzm{width:80px; height:34px; float:right;}
- .login .logl .lgr .loginbtn{width:80px; height:34px;background-color: #459d5f; border:none; color:#fff; cursor:pointer}
- .login .logl .lgr .loginbtn:hover{background-color:#286e3d;}
- .clear{clear:both;}
- </style>
- <div class="login">
- <form name="login" id="login" method="post" action="/e/admin/ecmsadmin.php">
- <input type="hidden" name="enews" value="login">
- <div class="logl">
- <span class="lbl">用户名：</span><span class="lgr"><input name="username" type="text" class="b-form2" size="24" placeholder="请输入账号" /></span>
- <div class="clear"></div>
- </div>
- <div class="logl">
- <span class="lbl">密 码：</span><span class="lgr"><input name="password" type="password" class="b-form2" size="24" placeholder="请输入密码"></span>
- <div class="clear"></div>
- </div>
- <div class="logl">
- <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"
- onclick="KeyImg.src='/e/admin/ShowKey.php?'+Math.random()" title="看不清楚,点击刷新" class="yzm"></span>
- <div class="clear"></div>
- </div>
- <div class="logl">
- <span class="lbl"></span><span class="lgr"><input name="submit" type="submit" class="loginbtn" size="24" value="登 录" /></span>
- <div class="clear"></div>
- </div>
- </form>
- </div>
- <!--登录-->
最终效果如下图
其中用到的登录钥匙背景图，可以按照自己的需求放置。
结语：这样我们就可以在网站的页面上增加一个登录框可以直接登录帝国cms后台了，虽然便捷，但cms大学不支持大家这么做。
