jQuery EasyUI，后台管理界面---后台登录

登录原理图

一，login.php，登录界面

<!DOCTYPE html>

<html>

<head>

<title>jQuery Easy UI</title>

<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

<link rel="stylesheet" type="text/css" href="css/login.css" />

</head>

<body>

<div id="login">

    <p>管理员帐号：<input type="text" id="manager" class="textbox"></p>

    <p>管理员密码：<input type="password" id="password" class="textbox"></p>

</div>

<div id="btn">

    <a href="#" class="easyui-linkbutton">登录</a>

</div>

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

<script type="text/javascript" src="js/index.js"></script>

</body>

</html>

二，index.js，设置登录界面样式，和验证登录信息，提交数据

$(function () {

    //登录界面

    $('#login').dialog({                //登录对话框

        title : '登录后台',

        width : 300,

        height : 180,

        modal : true,                    //遮罩锁屏

        iconCls : 'icon-login',            //图标

        buttons : '#btn',                //将登录按钮加载到对话框里

    });

    //管理员帐号验证

    $('#manager').validatebox({

        required : true,                                //账号不能为空

        missingMessage : '请输入管理员帐号',                //提示信息

        invalidMessage : '管理员帐号不得为空',            //错误信息

    });

    //管理员密码验证

    $('#password').validatebox({

        required : true,                                //密码不能为空

        validType : 'length[6,30]',                        //长度6到30位之间

        missingMessage : '请输入管理员密码',                //提示信息

        invalidMessage : '管理员密码不得为空',            //错误信息

    });

    //加载时判断验证

    if (!$('#manager').validatebox('isValid')) {                   //判断账号是否合法

        $('#manager').focus();                                       //如果不合法将光标定位到输入框

    } else if (!$('#password').validatebox('isValid')) {           //判断密码是否合法

        $('#password').focus();                                       //如果不合法将光标定位动输入框

    }

    //单击登录

    $('#btn a').click(function () {

        if (!$('#manager').validatebox('isValid')) {                //判断账号是否合法

            $('#manager').focus();                                    //如果不合法将光标定位到输入框

        } else if (!$('#password').validatebox('isValid')) {        //判断密码是否合法

            $('#password').focus();                                    //如果不合法将光标定位动输入框

        } else {                                                    //如果账号和密码都合法

            $.ajax({                                                //执行ajax提交数据库

                url : 'checklogin.php',                                //提交页面

                type : 'post',                                        //提交方式

                data : {                                            //提交数据

                    manager : $('#manager').val(),                    //获取账号输入框值提交

                    password : $('#password').val(),                //获取密码输入框值提交

                },

                beforeSend : function () {                            //提交时事件

                    $.messager.progress({                            //创建窗口信息，进度条方式

                        text : '正在登录中...',                        //提示内容

                    });

                },

                success : function (data, response, status) {        //提交后事件

                    $.messager.progress('close');                    //关闭进度条方式的窗口信息

                    if (data > 0) {                                    //判断如果checklogin.php返回大于0，表示登录成功

                        location.href = 'admin.php';                //跳转到后台页面

                    } else {

                        $.messager.alert('登录失败！', '用户名或密码错误！', 'warning', function () {        //窗口信息提示登录失败

                            $('#password').select();    //选中密码框文本

                        });

                    }

                }

            });

        }

    });

});

三，checklogin.php，接收提交的用户数据，数据库查找

<?php

    session_start();

    require 'config.php';                       //引入数据库配置文件

    $manager = $_POST['manager'];               //接收户名

    $password = sha1($_POST['password']);       //接收密码

    $query = mysql_query("SELECT id FROM easyui_admin WHERE manager='$manager' AND password='$password' LIMIT 1") or die('SQL 错误！');

    if (!!mysql_fetch_array($query, MYSQL_ASSOC)) {         //判断数据库里的用户名和密码与用户输入的匹配到

        $_SESSION['admin'] = $manager;                      //创建SESSION

        echo 1;                                             //返回1

    } else {

        echo 0;                                             //返回0

    }

?>

四，数据库表

五，admin.php，登录成功后界面

第二百二十九节，jQuery EasyUI，后台管理界面---后台登录的更多相关文章

  1. 第二百二十八节，jQuery EasyUI，TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

  2. 第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件

    jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...

  3. 第三百二十九节，web爬虫讲解2—urllib库爬虫—ip代理—用户代理和ip代理结合应用

    第三百二十九节,web爬虫讲解2—urllib库爬虫—ip代理 使用IP代理 ProxyHandler()格式化IP,第一个参数,请求目标可能是http或者https,对应设置build_opener ...

  4. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

  5. 第二百二十五节，jQuery EasyUI，PropertyGird(属性表格)组件

    jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的 ...

  6. 第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  7. 第一百二十九节，JavaScript，理解JavaScript库

    JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...

  8. 第二百三十九节，Bootstrap路径分页标签和徽章组件

    Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 ...

  9. 第二百七十九节，MySQL数据库-pymysql模块操作数据库

    MySQL数据库-pymysql模块操作数据库 pymysql模块是python操作数据库的一个模块 connect()创建数据库链接,参数是连接数据库需要的连接参数使用方式: 模块名称.connec ...

随机推荐

  1. X5平方速算法的证明

    X5代表15,25,35,45,55......以上变化的部分为X,如25这个数,X就等于2. X5平方数的速算法是这样:让X乘以X+1,后面写上25就是X5乘以X5的结果.比如25x25,先让2x3 ...

  2. 常用命令（过滤、管道、重定向、ping 命令、netstat 命令、ps命令）

    常用命令 过滤 过滤出 /etc/passwd 文件中包含 root 的记录 grep 'root' /etc/passwd 递归地过滤出 /var/log/ 目录中包含 linux 的记录 grep ...

  3. electron的安装

    1.安装 node.js https://nodejs.org/en/ 2.安装asar npm install -g asar 3.安装atom https://atom.io/ 4.安装elect ...

  4. Struts2-Spring和Hibernate整合

    Struts作为MVC 2的Web框架,自推出以来不断受到开发者的追捧,得到广泛的应用.作为最成功的Web框架,Struts自然拥有众多的优点:MVC 2模型的使用.功能齐全的标志库(Tag Libr ...

  5. 关于bitmap recycle trying to use a recycled bitmap android.graphics.Bitmap

    在开发中,一直使用4.0以上手机作为測试机所以一直没有出现这个问题,今天换了2.3版本号的手机.出现了这个错误: trying to use a recycled bitmap android.gra ...

  6. 关于天津中软国际ETC培训中心的见与闻

    半个月的时间转眼即逝,在中软国际天津ETC的实训的两个星期就这样过去了,在中软国际天津站的这段时间也收获了非常多.明确了非常多,了解了很多关于社会就业的知识以及关于软件培训的一些事情.尽管我的了解可能 ...

  7. 【ajax+php】动态展示4级单位（省、市、县、镇）

    1.本篇教程以ajax+php动态展示[省.市.县.镇]四级地区单位 2.效果图:    3.不废话,贴代码! HTML: <div class="form-group"&g ...

  8. Linux-使用 screen 管理你的远程会话

    转自:http://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 你是不是经常需要 SSH 或者 telent 远程登录到 Linux 服务器?你是 ...

  9. 自己动手,制作真正的.net Framework 3.5 SP1离线安装包（转）

    .NET Framework 3.5 SP1发布了,兴冲冲…下载,当然是完全离线安装包.net Framework 3.5 Service pack 1(Full Package) 231MB,网络慢 ...

  10. 关于同一线程两次调用EnterCriticalSection的测试

    #include "stdafx.h" #include <iostream> using namespace std; #include <windows.h& ...