asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发

进行本文之前需要在数据库用户表里面增加一条用户数据,直接手动添加即可,未安全考虑密码一定要使用Md5加密后的,这里提供666666的Md5密文为(c831b04de153469d),本文完成登录模块的开发工作,登录页面设计将采用Div+Css简单进行设计,最终效果图如下:

Mvc一个页面模块至少要实现C层的逻辑代码跟,V层的页面代码,在浏览器访问地址时执行C层代码,在呈现页面,具体创建流程如下:

一、登录C层(Controllers)创建

1、创建Login控制器类

在解决方案管理器Controllers文件夹上面右键点击选择“添加”》“控制器”菜单添加一个LoginController控制器,最终效果如下:

知识讲解:LoginController类下面可以包含很多方法(专业术语叫Action),当我们访问http://域名/Login/Index地址的时候会执行这里的Index方法,这是asp.net mvc的访问机制,由路由控制,你也可以在GLobal.asax文件中自己配置路由。

2、创建登录Login Action

在LoginController类中创建两个Login方法,两个方法参数不一样用途也不一样,分别完成浏览器访问的时候执行的方法和输入用户名、密码点击登录按钮时候验证用户信息的方法,验证通过跳转到后台管理页面,验证失败返回具体原因到登录页面,具体代码如下:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

/// <summary>

        /// 管理用户登录

        /// </summary>

        /// <returns></returns>

        public ActionResult AdminLogin()

        {

            return View();

        }

        [HttpPost]

        public ActionResult AdminLogin(AdminLoginViewModel LgModel)

        {

            try

            {

                //因为数据库存储的密码是Md5加密的,所以这里也需要Md5加密后跟数据库做对比

                string loginPass = Md5.Encrypt(LgModel.loginPass);

                //Model层验证判断

                if (ModelState.IsValid)

                {

                    //用户名验证

                    var resName = db.SYS_USER.Where(c => c.USERNAME == LgModel.loginName).Count();

                    //用户名+密码验证

                    var resPass = db.SYS_USER.Where(c => c.USERNAME == LgModel.loginName && c.USERPASS == loginPass).Count();

                    //用户名查询不唯一,有可能用户名输入错误,有可能存在多个同名用户

                    if (resName != 1)

                    {

                        ModelState.AddModelError("loginName", "登录失败,用户名错误。");

                    }

                    //到这一步,如果不成立说明密码不对

                    else if (resPass != 1)

                    {

                        ModelState.AddModelError("loginPass", "登录失败,密码错误。");

                    }

                    else if (Session["ValidateCode"].ToString() != LgModel.ValidateCode)

                    {

                        ModelState.AddModelError("ValidateCode", "验证码输入错误!");

                        return View();

                    }

                    //登录成功

                    else if (resPass == 1)

                    {

                        //登录成功后需要将关键信息存入到Session或者Cookies中方便后面使用,这里存入Cookies。

                        //取得用户ID号

                        var res = db.SYS_USER.Single(m => m.USERNAME == LgModel.loginName);

                        //记录用户ID

                        Cookies.SetCookie("UserId", res != null ? res.ID : "", 0);

                        //记录用户名

                        Cookies.SetCookie("LoginName", res != null ? res.USERNAME : "", 0);

                        //记录真实姓名

                        Cookies.SetCookie("RealName", res != null ? res.REALNAME : "", 0);

                        Session.Timeout = 1440; //session 保存时间

                        //日志记录

                        ClassesLib.InsertLog("用户" + res.USERNAME + "登陆后台", "后台登陆");

                        return Redirect("/Home/AdminIndex");

                    }

                }

                return View(LgModel);

            }

            catch (Exception e)

            {

                ModelState.AddModelError("loginName", e.Message);

                return View(LgModel);

            }

        }

知识讲解:

1.项目公共类库

在项目开发中有许多公用类需要调用,比如Md5加密算法、日志记录、文件操作、验证码生成等类,正常一般将这些类作为DLL引入到项目里面,本教程直接使用类文件调用。教程中用到的类有:

CKEditorHelpers文章发布页面富文本控件使用,Cookies项目Cookies操作类,DESEncrypt加密解密,FileClasses文件操作,ClassesLib常用方法类库如安全接受url参数传递防止sql注入等,Md5加密解密,ValidateCode验证码生成类。

2.[HttpPost]

可以看到第二个方法上面带有[HttpPost]声明,这个是标记页面上点击登录按钮(也就是提交表单)时访问的,以区别浏览器访问的Login方法。

3.ViewModel

上面第二个方法的参数是AdminLoginViewModel类型,这是自己创建的ViewModel类,主要供页面层使用,具体的验证方法都在这里面,创建ViewModel是项目中必须的,例如用户注册页面一般都会有密码跟确认密码两个输入项,但是数据库Model对应的只有用户密码,这时就需要定义一个ViewModel供页面使用了。当然很多地方你可以直接只用数据库对应的Model供页面层使用,具体后面会讲解到,这里的AdminLoginViewModel创建方法及代码如下:

在项目的Models文件夹内创建一个ViewModels.cs类文件,如下图所示:

根据开发需要后面会继续往里面添加类,主要有页面列表中用到的类及增加修改页面用到的类。

4.Codefirst常用操作介绍

一般我们系统会有增加、修改、删除、查询几个常见的对数据库的基本操作,这几个基本操作贯穿系统业务逻辑以完成复杂操作,很多应用系统开发技术层面的东西可能是简单的,具体业务逻辑分析可能是复杂的。

所有操作都是基于DbContent的,所以在类中首先定义DbContent变量,如下所示:

1)查询

查询主要有三种方法

A.根据主键查询,代码如下:

?


1

var model = db.SITE_ARTICLE.Find(主键字段值);

这样根据主键可以直接查找到数据库里面的某条数据(仅仅一条数据),一般在修改操作中用到的最多,model.TITLE="新文章标题";配合保存方法就把文章标题给修改了。

B.多条件查询,代码如下:

?


1

var resPass = db.SYS_USER.Where(c => c.USERNAME == LgModel.loginName && c.USERPASS == loginPass).ToList()

这里主要用到的Where,后面是查询条件组合,查询结果一般是多条数据。

C.自己写查询语句,很多复杂的查询还是自己写查询语句方便,哈哈,代码如下:

?


1

2

string sqlStr = "SELECT ID,NAME,ORDERNO,IFCLOSE,LINKADDR,PID AS _PARENTID FROM SITE_COLUMN WHERE 1=1 " + define;

var list = db.Database.SqlQuery<ColumnTreeGridList>(sqlStr).ToList();//获取总页数

2)增加

增加首先定义一个类变量,然后给各个属性赋值,最后提交到数据库即可,代码如下:

?


1

2

3

4

5

6

var model = new SYS_USER();

model.ID = ClassesLib.GetIdByTime();

 model.REALNAME = "张三";

 //.....

db.SYS_USER.Add(model);

db.SaveChanges();

3)修改

修改直接使用上面讲的第一种查询方法,查询出数据然后之间给类属性赋新值即可,代码如下:

?


1

2

3

4

var tmpModel = db.SYS_USER.Find(sysRole.ID);

tmpModel.REALNAME = "新名字";

UpdateModel(tmpModel);

db.SaveChanges();

UpdateModel(tmpModel);也可以没有这句代码。

4)删除

修改直接使用上面讲的第一种查询方法,查询数据后直接remove即可,代码如下:

?


1

2

3

var tmpModel = db.SYS_USER.Find(dataId);

db.SYS_USER.Remove(tmpModel);

db.SaveChanges();

5)保存

?


1

db.SaveChanges();一句代码即可

二、V层页面创建

?


1

2

3

4

public ActionResult AdminLogin()

 {

      return View();

}

在上面方法内右键点击,选择添加视图菜单,如下操作:

打开添加视图对话框,界面如下:

设置完成后点击添加按钮,即可生成登录页面,效果如下:

对应生成代码如下:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {

    @Html.ValidationSummary(true)

    <fieldset>

        <legend>AdminLoginViewModel</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.loginName)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.loginName)

            @Html.ValidationMessageFor(model => model.loginName)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.loginPass)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.loginPass)

            @Html.ValidationMessageFor(model => model.loginPass)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.ValidateCode)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.ValidateCode)

            @Html.ValidationMessageFor(model => model.ValidateCode)

        </div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

<div>

    @Html.ActionLink("Back to List", "Index")

</div>

知识讲解:

1、运行项目

运行项目之前需要修改项目默认路由,打开Global.asax文件,修改如下:

然后点击常用工具栏运行按钮即可

2、页面验证

asp.net默认提供两个级别验证,用户输入信息的时候会首先进行页面级Js验证,用户点击提交按钮时进行后台Model层验证。

?


1

2

3

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

这些是asp.net mvc自带的验证脚本。

3、Html form表单生成

?


1

@using (Html.BeginForm()) {

这句代码将生成Html的form标签,默认Action方法对应后台

?


1

2

3

[HttpPost]

        public ActionResult AdminLogin(AdminLoginViewModel LgModel)

        {

这个方法。

以上的页面要求不是我们最终想要的结果,还需要将我们自己设计的登录布局页面套入才行,页面布局可以使用Div+Css去实现,具体需要笔者自己去学习,这里不再讲解。

最终代码如下:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

@model SiteDataBase.Models.AdminLoginViewModel

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <title>网站后台管理系统</title>

    <link href="../../Content/Css/Login.css" rel="stylesheet" />

    <link href="../../Content/Css/Button.css" rel="stylesheet" />

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //获取验证码

            $("#KanBuQingHuanYiZhang").bind("click", function () {

                $("#YanZhengMaImage").attr("src", "/Login/GetValidateCode?time=" + (new Date()).getTime());

            });

        });

    </script>

</head>

<body>

    <div id="login-content">

        <div class="logo" style="background:url(../../Content/Images/login_top.png)">

            <div style="line-height:60px;text-align:right;margin-right:20px;font-size:22px;font-weight:bold;">V3.3</div>

        </div>

        <div class="input-content">

            @using (Html.BeginForm())

            {

                <div class="user-box">

                    <div class="edit-label">@Html.LabelFor(model => model.loginName):</div>

                    <div class="edit-text"><span>@Html.EditorFor(model => model.loginName) </span><span>@Html.ValidationMessageFor(model => model.loginName)</span></div>

                </div>

                <div class="user-box">

                    <div class="edit-label">@Html.LabelFor(model => model.loginPass):</div>

                    <div class="edit-text"><span>@Html.PasswordFor(model => model.loginPass) </span><span>@Html.ValidationMessageFor(model => model.loginPass)</span></div>

                </div>

                <div class="clear"></div>

                <div class="user-box">

                    <div class="edit-label">验 证 码:</div>

                    <div class="loginValid">

                        @Html.EditorFor(model => model.ValidateCode)

                    </div>

                    <div class="loginYzm">

                        <img class="YanZhengImg" id="YanZhengMaImage" style="cursor: pointer;" src="/Login/GetValidateCode" alt="验证码" height="32px" width="80px">

                    </div>

                    <div class="clear"></div>

                    <div style="text-align: left; padding-left: 100px;"><a href="#" class="ChangeYZM" id="KanBuQingHuanYiZhang">看不清换一张</a> @Html.ValidationMessageFor(model => model.ValidateCode)</div>

                </div>

                <div class="clear"></div>

                <div class="user-btn">

                    <input type="submit" class="button white" value="登陆系统" />

                </div>

            }

            <div class="desc">专业 合作 微笑 责任</div>

        </div>

        <div class="copyright">版权所有:******************************&nbsp;&nbsp;&nbsp;&nbsp;地址:中国?山东</div>

    </div>

</body>

</html>

最终运行效果如下:

点击下载本教程源码

技术交流QQ:806693619

时间: 2024-08-04 04:17:46

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发的相关文章

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里讲的主要是通过Codefirst方式实现的. 一.M层简单介绍 1.M层很形象的将数据库里面的各个表格映射成了C#当中的类,比如上篇文章创建的用户表: ? 1 2 3 4 5 6 7 8 9 10 11 12 CREATE TABLE [dbo].[SYS_USER](          [ID]

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模板,本文主要讲解如何创建这个后台模板,本文创建的后台模板不集成到项目内部,只是静态html页面.后台模板是系统开发必须的,一般小公司有个3套后台模板就够用了.本项目后台模板主要是jquery easyui插件创建的,不需要美工设计就可以创建出来,而且效果还可以,具体效果图如下: 这个版面的缺点是,只能适应2层

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

/****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[SITE_ARTICLE]( [ID] [nvarchar](36) NOT NULL,--ID [TITLE] [nvarchar](100) NULL,--新闻标题 [COLID] [nvarchar](36) NULL,--所属栏

开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo(转)

热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI.它有完整的demo和强大AIP手册,使我在开发过程中得心 应手.以下是这篇博文Demo程序的演示效果: 解决方案如图1所示 图1 Domain:领域模型 Dao:持久层 Service:服务层 WebSite:表示层 Common:通用类 首页如图2所示,可以选择中文和English. 图2 英文首

[转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI.它有完整的demo和强大AIP手册,使我在开发过程中得心应手.以下是这篇博文Demo程序的演示效果: 解决方案如图1所示 图1 Domain:领域模型 Dao:持久层 Service:服务层 WebSite:表示层 Common:通用类 首页如图2所示,可以选择中文和English. 图2 英文首页

React Native Android原生模块开发实战|教程|心得|如何创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看iOS篇的点这里<React Native iOS原生模块开发>). 我平时在用React Native开发App时会

React Native iOS原生模块开发实战|教程|心得|如何创建React Native iOS原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691432) 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看Android篇的点这里<React Native Android原生模块开发>). 我平时在用React Nativ

React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息.为大家精心准备的React Native视频教程公布了,大家现能够看视频学React Native了. 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得.来分享给大家,但实在抽不开身.今天看了一下日历发现立即就春节了.所以就赶在春节之前将这篇博文写好并公布(事实上是两篇

ASP.NET MVC5+EF6+LayUI实战教程,通用后台管理系统框架(4)- 漂亮的登录界面

前言 这一讲,给大家添加登录页面 实现 添加Login的Index视图 @{ Layout = null; } <!DOCTYPE html> <html class="loginHtml"> <head> <meta charset="utf-8"> <title>登录--BYCMS后台管理系统</title> <meta name="renderer" conten