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，后面是查询条件组合，查询结果一般是多条数据。

Ｃ.自己写查询语句，很多复杂的查询还是自己写查询语句方便，哈哈，代码如下：

?

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

转载于:https://www.cnblogs.com/kwstu/p/7798317.html