您的位置：首页 > 编程语言 > PHP开发

php后台图书管理系统-登录页面02

2017-04-21 02:04 537 查看

首先最近实在是忙，这都是半个月之前写好的代码了，我都半个月没看了，重新拿起来，废话不多说了，说思路吧

首先这是一个后台登录界面

思路分析：

首先因为我的后台管理全部是用原生的代码写的，不是用的框架！

思路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里面拿到

那就登录成功

进入主页面了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航