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

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

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

思路分析：

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

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

那就登录成功

进入主页面了

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

猜你喜欢