进行本文之前需要在数据库用户表里面增加一条用户数据,直接手动添加即可,未安全考虑密码一定要使用Md5加密后的,这里提供666666的Md5密文为(c831b04de153469d),本文完成登录模块的开发工作,登录页面设计将采用Div+Css简单进行设计,最终效果图如下:
Mvc一个页面模块至少要实现C层的逻辑代码跟,V层的页面代码,在浏览器访问地址时执行C层代码,在呈现页面,具体创建流程如下:
在解决方案管理器Controllers文件夹上面右键点击选择“添加”》“控制器”菜单添加一个LoginController控制器,最终效果如下:
知识讲解:LoginController类下面可以包含很多方法(专业术语叫Action),当我们访问http://域名/Login/Index地址的时候会执行这里的Index方法,这是asp.net mvc的访问机制,由路由控制,你也可以在GLobal.asax文件中自己配置路由。
在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);
}
}
|
知识讲解:
在项目开发中有许多公用类需要调用,比如Md5加密算法、日志记录、文件操作、验证码生成等类,正常一般将这些类作为DLL引入到项目里面,本教程直接使用类文件调用。教程中用到的类有:
CKEditorHelpers文章发布页面富文本控件使用,Cookies项目Cookies操作类,DESEncrypt加密解密,FileClasses文件操作,ClassesLib常用方法类库如安全接受url参数传递防止sql注入等,Md5加密解密,ValidateCode验证码生成类。
可以看到第二个方法上面带有[HttpPost]声明,这个是标记页面上点击登录按钮(也就是提交表单)时访问的,以区别浏览器访问的Login方法。
上面第二个方法的参数是AdminLoginViewModel类型,这是自己创建的ViewModel类,主要供页面层使用,具体的验证方法都在这里面,创建ViewModel是项目中必须的,例如用户注册页面一般都会有密码跟确认密码两个输入项,但是数据库Model对应的只有用户密码,这时就需要定义一个ViewModel供页面使用了。当然很多地方你可以直接只用数据库对应的Model供页面层使用,具体后面会讲解到,这里的AdminLoginViewModel创建方法及代码如下:
在项目的Models文件夹内创建一个ViewModels.cs类文件,如下图所示:
根据开发需要后面会继续往里面添加类,主要有页面列表中用到的类及增加修改页面用到的类。
一般我们系统会有增加、修改、删除、查询几个常见的对数据库的基本操作,这几个基本操作贯穿系统业务逻辑以完成复杂操作,很多应用系统开发技术层面的东西可能是简单的,具体业务逻辑分析可能是复杂的。
所有操作都是基于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();一句代码即可
|
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"
>版权所有:****************************** 地址:中国?山东</
div
>
</
div
>
</
body
>
</
html
>
|
最终运行效果如下:
技术交流QQ:806693619