首先最近实在是忙,这都是半个月之前写好的代码了,我都半个月没看了,重新拿起来,废话不多说了,说思路吧
首先这是一个后台登录界面
思路分析:
首先因为我的后台管理全部是用原生的代码写的,不是用的框架!
思路1:建立login页面-我给他起的文件名称叫做login.php
很明显一个.php文件里面用的html 然后用的表单提交的方式
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./css/login.css"> <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> //文档加载完成调用方法====相当于js里面的window.onload=function方法 $(document).ready(function () { //当登录按钮点击的时候执行的逻辑代码 $('#login').click(function () { //如果用户名为空 if (frm.username.value == "") { alert("用户名不能为空"); return false; } //如果用户密码为空 else if (frm.password.value == "") { alert("密码不能为空"); return false; } //如果验证码为空 else if (frm.code.value == "") { alert("验证码为空了"); return false; } else { //验证码 ajax来搞定 //获取验证码从后台的.php文件里面获取到的 showSimple();//这通过ajax获取验证码 } }) }) var xmlHttpReuest; function initXmlHttpRequest() { //定义xmlHttpRequest变量 try { if (window.ActiveXObject) { //老版本的兼容 xmlHttpReuest = new ActiveObject("Microsoft.XMLHTTP"); } else { xmlHttpReuest = new XMLHttpRequest(); } } catch (e) { xmlHttpReuest = false; } finally { //做判断 if (!xmlHttpReuest) { alert("xmlHttpRequest实例化失败"); return false; } else { return xmlHttpReuest; } } } /** * 显示简单的例子 */ function showSimple() { //拿到xmlHttpRequest对象 initXmlHttpRequest(); //第二步拿到验证码输入框的值======这个用户的验证码是用户输入的 var cont = document.getElementById("code").value; // document.write("输出"+cont); //第三步判断用户输入的验证码的框框的值是不是为空 if (cont == "") { alert("你输入的关键字不能为空"); return false; } //检查xml xmlHttpReuest.onreadystatechange = stateHandler; //打开后台的php文件 xmlHttpReuest.open('GET', 'cacheLogin.php?cont=' + cont, true); xmlHttpReuest.send(); } function stateHandler() { if (xmlHttpReuest.readyState == 4 && xmlHttpReuest.status == 200) { // alert("弹出对话框了200"); // document.getElementById("webpage").innerHTML=xmlHttpReuest.responseText; // alert("value="+frm // .code.value+"===="+xmlHttpReuest.responseText); if ((frm.code.value != xmlHttpReuest.responseText)) { alert("验证码输入错误了"); return false; } } } </script> </head> <body> <div class="container"> <div id="top" class="top"><h2> 登录页面</h2></div> <div id="content" class="content"> <div class="row"> <div class="left col-md-3"> </div> <div class="center col-md-6"> <form id="frm" name="frm" action="cacheLogin.php" method="post"> <div id="center_middle">; <div class="user"> <label>用户名: <input type="text" name="username" id="username"/> </label> </div> <div class="user"> <label>密 码: <input type="text" name="password" id="password"/> </label> </div> <div class="chknumber"> <label>验证码: <input name="code" type="text" id="code" maxlength="4" class="chknumber_input" value=""/> </label> <img src="verify.php" vertical-align/> </div> </div> <div id="center_submit" class="clear"> <div class="button"><input type="submit" name="Submit" class="submit" id="login" value="登录"> </div> <div class="button btn-default"><input type="reset" name="Submit" class="reset btn-default" value="重置"></div> </div> </form> </div> <div class="right col-md-3"></div> </div> </div> <div class="foot" class="foot"></div> </div> </body> </html>
//运行效果图如下:
验证这里我是用的一个img标签的src指向一个.php文件获取验证码
首先这里我说说主要的验证码的一个思路吧
思路分析:当用户点击登录按钮的时候 验证码的判断
第一步用户获取验证码的内容
如果 用户名 密码 输入的验证码 通过ajax提交到后台的cacheLogin.php文件
get方式提交的值 如果说验证码是 跟a标签引入的验证码的值一致 从session里面拿到
那就登录成功
进入主页面了