码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI - 后台管理系统 - 登陆模块

时间:2015-11-05 18:14:29      阅读:328      评论:0      收藏:0      [点我收藏+]

标签:

效果:

技术分享

---

技术分享

---

技术分享

 

Html代码:

        <div id="login">
            <p>账户:<input type="text" id="user" /></p>
            <p>密码:<input type="password" id="pwd" /></p>
        </div>
        <div id="btn">
            <a id="submit" href="#" class="easyui-linkbutton">登陆</a>
        </div>

 

CSS代码:

#login {
    padding:6px 0 0 0;
}

p {
    height:22px;
    line-height:22px;
    padding:4px 0 0 45px;
}

#user, #pwd {
    height:22px;
    padding:0 2px;
    border:1px solid #8ac8f5;
}

#btn {
    text-align:center;
}

.easyui-linkbutton {
    padding:0 10px;
}

 

JS代码:

$(function () {
    //登陆窗体
    $(#login).dialog({
        title: 后台登陆,
        width: 300,
        height: 180,
        iconCls: icon-login,
        modal: true,
        closable: false,
        draggable: false,
        buttons: #btn,
    });

    //验证账户文本框
    $(#user).validatebox({
        required: true,
        missingMessage: 文本框不能为空!,
        invalidMessage: 输入内容不正确,请重新输入!,
    });

    //验证密码文本框
    $(#pwd).validatebox({
        required: true,
        validType: length[6, 20],
        missingMessage: 文本框不能为空!,
        invalidMessage: 密码为6-20!,
    });

    //加载时侯,验证文本框
    if (!$(#user).validatebox(isValid)) {
        $(#user).focus();
    }
    else if (!$(#pwd).validatebox(isValid)) {
        $(#pwd).focus();
    }

    //点击登陆按钮事件
    $(#submit).click(function () {
        //去除所有空格
        String.prototype.NoSpace = function () {
            return this.replace(/\s+/g, "");
        };

        //如果未验证成功,移动光标到文本框。
        if (!$(#user).validatebox(isValid)) {
            $(#user).focus();
        }
        else if (!$(#pwd).validatebox(isValid)) {
            $(#pwd).focus();
        }
        else {
            //获取文本框内容,并使用Ajax提交
            var user = $(#user).val().NoSpace();
            var pwd = $(#pwd).val().NoSpace();
            //MD5加密
            pwd = $.md5(pwd);

            //提示进度条
            $.messager.progress({
                width: 300,
                text: 正在验证登陆[{value}]%………………,
            });

            //Ajax后台验证
            $.ajax({
                type: post,
                url: ../Application/ashx/ValidLogin.ashx,
                data: {
                    user: user,
                    pwd: pwd,
                },
                //判断返回的值
                success: function (data) {
                    if (data == 1) {
                        $.messager.alert("提示", "有此用户!");
                        $.messager.progress(close);
                    } else if (data == 0) {
                        $.messager.alert("提示", "无此用户!");
                        $.messager.progress(close);
                    } else if (data == -1) {
                        $.messager.alert("提示", "服务器异常,请联系管理员!");
                        $.messager.progress(close);
                    } else {
                        $.messager.alert("提示", "浏览器异常,请联系管理员!");
                        $.messager.progress(close);
                    }
                }
            });
        }
    });
}) 

 

后台服务器代码:

using System.Threading;
using System.Web;
using System.Web.SessionState;

namespace EasyUI.Application.ashx
{
    /// <summary>
    /// ValidLogin 的摘要说明
    /// </summary>
    public class ValidLogin : IHttpHandler, IRequiresSessionState
    {
        /// <summary>
        /// 返回值
        /// </summary>
        enum ReturnValue
        {
            SelectUser = 1,//有用户
            NoSelectUser = 0,//没有找到用户
            WebError = -1//错误
        }

        public void ProcessRequest(HttpContext context)
        {
            

            Thread.Sleep(3000);//睡眠3s
            //获取账号/密码
            string user = context.Request["user"];
            string pwd = context.Request["pwd"];

            //验证
            try
            {
                //验证账户密码是否正确
                if (user == "123" && pwd == "mimamima")
                {
                    context.Response.Write((int)ReturnValue.SelectUser);
                    //如果存在用户,保存Session。
                    context.Session["user"] = user;
                }
                else
                {
                    context.Response.Write((int)ReturnValue.NoSelectUser);
                }
            }
            catch
            {
                context.Response.Write((int)ReturnValue.WebError);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

EasyUI - 后台管理系统 - 登陆模块

标签:

原文地址:http://www.cnblogs.com/KTblog/p/4940088.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!