写在前面

今天回来的比较早，就趁着有空，把登录的代码更新一下。上篇文章实现了ajax的注册，这篇将实现登录，实现目标，ajax登录方式，如果勾选记住我，则下次不再输入用户名密码，直接跳转到网盘界面。

系列文章

[EF]vs15+ef6+mysql code first方式

[实战]MVC5+EF6+MySql企业网盘实战(1)

[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码

[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

[Bootstrap]modal弹出框

[实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面，头像等比例压缩

[实战]MVC5+EF6+MySql企业网盘实战(5)——页面模板

[实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册

[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录

代码

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="企业,网盘,企业网盘">

    <meta name="author" content="Muhammad Usman">

    <title>登录</title>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <link href="~/Content/Css/bootstrap-cerulean.min.css" rel="stylesheet" />

    <link href="~/Content/Css/charisma-app.css" rel="stylesheet" />

    <link href="~/Content/Css/jquery.noty.css" rel="stylesheet" />

    <link href="~/Content/Css/elfinder.min.css" rel="stylesheet" />

    <link href="~/Content/Css/elfinder.theme.css" rel="stylesheet" />

    <link href="~/Content/Css/jquery.iphone.toggle.css" rel="stylesheet" />

    <link href="~/Content/Css/animate.min.css" rel="stylesheet" />

    <script>

        $(function () {

            //多选框

            $("#chkRemember").click(function () {

                if (!$(this).attr("checked")) {

                    $(this).attr("checked", 'checked');

                } else {

                    $(this).removeAttr("checked");

                };

            });

            //为登录按钮注册单击事件

            $('#btnLogin').click(function () {

                $.ajax({

                    type: "post",

                    url: "/UserInfo/Login",

                    data: { userName: $("#txtUserName").val(), pwd: $("#txtPwd").val(), remember: $("#chkRemember").attr('checked') },

                    dataType: "json",

                    success: function (data) {

                        console.log(data);

                        data = JSON.parse(data);

                        if (data.code == 200) {

                        } else {

                            $("#loginMsg").html("<span style='color:red;'>"+data.msg+"</span>");

                        };

                    }, error: function (msg) {

                        alert(data);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <div class="row">

        <div class="row">

            <div class="col-md-12 center login-header">

                <h2>欢迎使用 Wolfy企业网盘</h2>

            </div>

            <!--/span-->

        </div><!--/row-->

        <div class="container">

            <div class="row">

                <div class="well col-md-5 center login-box">

                    <div class="alert alert-info" id="loginMsg">

                        请使用用户名和密码登录

                    </div>

                    <fieldset>

                        <div class="input-group input-group-lg">

                            <span class="input-group-addon"><i class="glyphicon glyphicon-user red"></i></span>

                            <input type="text" class="form-control" id="txtUserName" placeholder="用户名">

                        </div>

                        <div class="clearfix"></div><br>

                        <div class="input-group input-group-lg">

                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock red"></i></span>

                            <input type="password" class="form-control" id="txtPwd" placeholder="密码">

                        </div>

                        <div class="clearfix"></div>

                        <div class="input-prepend">

                            <label class="remember" for="chkRemember"><input type="checkbox" name="chkRemember" id="chkRemember" value="1" /> 记住我</label>

                        </div>

                        <div class="clearfix"></div>

                        <p class="center col-md-5">

                            <button type="button" class="btn btn-primary" id="btnLogin">登录</button>

                        </p><a href="/UserInfo/Register" class="right" style="float:right;">注册</a>

                    </fieldset>

                </div>

                <!--/span-->

            </div><!--/row-->

        </div><!--/fluid-row-->

    </div>

</body>

</html>

Login.cshtml

目前还是使用session来保持状态，使用在action上加特性的方式，留待以后优化。

        [HttpGet]

        public ActionResult Login()

        {

            UserInfo userInfo = null;

            if (Request.Cookies["n"] != null && Request.Cookies["p"] != null)

            {

                string userName = Request.Cookies["n"].Value;

                string pwd = Request.Cookies["p"].Value;

                userInfo = _userInfoServiceRepository.Find(x => x.UserName == userName && x.Pwd == pwd);

                if (userInfo!=null)

                {

                    if (Session["user"] == null)

                    {

                        Session["user"] = userInfo;

                    }

                    //更新最后一次登录时间

                    userInfo.LoginDt = DateTime.Now;

                    _userInfoServiceRepository.Update(userInfo);

                    _userInfoServiceRepository.SaveChanges();

                }

            }

            return View();

        }

        /// <summary>

        /// 登录

        /// </summary>

        /// <param name="userName"></param>

        /// <param name="code"></param>

        /// <returns></returns>

        [HttpPost]

        public JsonResult Login(string userName, string pwd, string remember)

        {

            if (!_userInfoServiceRepository.Exist(userName))

            {

                return new JsonResult() { Data = "{\"code\":500,\"msg\":\"用户名不存在\"}" };

            }

            if (!string.IsNullOrEmpty(pwd))

            {

                pwd = MD5Helper.GetMD5FromString(pwd);

            }

            else

            {

                return new JsonResult() { Data = "{\"code\":500,\"msg\":\"密码不能为空\"}" };

            }

            UserInfo userInfo = _userInfoServiceRepository.Find(x => x.UserName == userName && x.Pwd == pwd);

            if (userInfo == null)

            {

                return new JsonResult() { Data = "{\"code\":500,\"msg\":\"用户名和密码不匹配\"}" };

            }

            if (!string.IsNullOrEmpty(remember) && remember.Equals("checked"))

            {

                HttpCookie nameCookie = new HttpCookie("n", userName);

                nameCookie.Expires = DateTime.Now.AddDays();

                //将md5串写入cookie，或者再次进行AES加密写入

                HttpCookie pwdCookie = new HttpCookie("p", pwd);

                pwdCookie.Expires = DateTime.Now.AddDays();

                Response.Cookies.Add(nameCookie);

                Response.Cookies.Add(pwdCookie);

            }

            //登录成功写入session

            Session["user"] = userInfo;

            //更新登录状态

            userInfo.LoginDt = DateTime.Now;

            _userInfoServiceRepository.Update(userInfo);

            _userInfoServiceRepository.SaveChanges();

            return new JsonResult() { Data = "{\"code\":200,\"msg\":\"登录成功\"}" };

        }

测试

登录成功后，跳转到FileList页面。

总结

关于ajax方式登录的内容就到这里。下面将进入网盘的主页。

[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录的更多相关文章

  1. [实战]MVC5+EF6+MySql企业网盘实战(28)——其他列表

    写在前面 本篇文章将实现,其他文件类型的列表. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF ...

  2. [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表

    写在前面 本篇文章将实现应用列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘 ...

  3. [实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

    写在前面 最近又开始忙了,工期紧比较赶,另外明天又要去驾校,只能一个功能一个功能的添加了,也许每次完成的功能确实不算什么,等将功能都实现了,然后在找一个好点的ui对前端重构一下. 系列文章 [EF]v ...

  4. [实战]MVC5+EF6+MySql企业网盘实战(2)——验证码

    写在前面 断断续续,今天算是把验证码的东东弄出来了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5 ...

  5. [实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

    写在前面 上篇文章简单介绍了项目的结构,这篇文章将实现用户的注册.当然关于漂亮的ui,这在追后再去添加了,先将功能实现.也许代码中有不合适的地方,也只有在之后慢慢去优化了. 系列文章 [EF]vs15 ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(1)

    写在前面 不久前,一个朋友让帮他弄一个单位的企业网盘的管理站点,一直忙,最近抽出了点时间,也想琢磨琢磨mvc,ef,mysql,这算是边琢磨,边实践吧. 系列文章 [实战]MVC5+EF6+MySql ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(26)——音乐列表

    写在前面 本篇文章将实现,音乐列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网 ...

  8. [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表

    写在前面 上篇文章实现了视频列表,本篇文章继续实现其他的文件列表.功能相似.这里就不再赘述. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...

  9. [实战]MVC5+EF6+MySql企业网盘实战(24)——视频列表

    写在前面 上篇文章实现了文档列表,所以实现视频列表就依葫芦画瓢就行了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...

  10. [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表

    写在前面 上篇文章实现了图片列表,这篇文章实现文档列表将轻车熟路,因为逻辑基本相似,只是查询条件的不同.这里将txt,doc,docx,ppt,pptx,xls,xlsx的文件都归为文档列表中. 系列 ...

随机推荐

  1. Windows10实用技巧-固定快捷方式到磁贴菜单方式

    快捷方式固定到磁贴 Win10的开始菜单中的磁贴功能比较不错,可以在不清理桌面上其他软件的情况下直接唤醒需要的应用.  但是比较麻烦的是一些应用或快捷方式并不能直接固定到上面. 后来发现所有Windo ...

  2. 对于redis框架的理解（二）

    之前梳理过redis main函数主体流程 大体是 initServerConfig() -> loadServerConfig() -> daemonize() -> initSe ...

  3. need

    php面试题: http://lib.csdn.net/article/php/43624 小程序: 官方手册: https://mp.weixin.qq.com/debug/wxadoc/dev/d ...

  4. 前端PHP入门-019-内置函数之数学函数-很重要

    查看帮助文档为主 函数名 描述 实例 输入 输出 abs() 求绝对值 $abs = abs(-4.2); //4.2 数字 绝对值数字 ceil() 进一法取整 echo ceil(9.999); ...

  5. 使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型

    使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献Tensorflow实战Google深度学习框架 实验平台: T ...

  6. turn服务部署

    centos7.2 git clone https://github.com/coturn/coturnyum -y install openssl-develyum install openssl ...

  7. css之display:inline-block布局--转

    css之使用display:inline-block来布局   css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...

  8. Debian sudo自动补全

    解决 debian sudo TAB 键不能自动补全命令的原因 一般情况,命令行输入 sudo apt-get ins 按 tab ,它后面会自动补全为 install 如果右面写了包的名的一部分,按 ...

  9. Codeforces 221 A. Little Elephant and Function

    A. Little Elephant and Function time limit per test 2 seconds memory limit per test 256 megabytes in ...

  10. MySQL的连接类型

    首先我们来创建两个数据表: 结构: 我们用内连接来查看一下: select *  from test1 join  test2 on test1.aid=test2.aid; 由于内连接是等值连接,所 ...