最近在做.net 的一个项目，我们的开发是基于MVC+EF+B层和D层以及封装好的底层方法的这样子一个框架。这是一个档案管理系统，毋庸置疑，在做系统时，要先登录。那么，MVC如何实现登陆呢？
思路：
和普通登陆一样，输入用户名和密码，为空判断，然后调用方法，和数据库信息进行对不，若相同，则登陆成功，把ID信息存到session或cookie中，其他页面直接验证session或cookie来判断用户是否登陆。
实现：
常言道，说的容易，做着难。先分析这个需求，按照我的思路，要先建一个controller，然后生成一个view，在view中写好页面。做出提交的按钮。js写出提交后的判断，然后再Ajax调用controller方法，验证，然后跳转页面。
逻辑非常清晰，也不难，下面是我的代码。
view的代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>管理系统</title>
<link href="~/CSS/Loginstyle.css" rel="stylesheet" />
<link href="~/CSS/Loginbody.css" rel="stylesheet" />
<link href="~/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet" />
@*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
<script src="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>
<script src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
<script src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Content/DatePicker/WdatePicker.js"></script>
@*日期格式的引用*@
<style type="text/css">
<!--
.STYLE1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
}
-->
</style>
<script type="text/javascript">
//调用js登陆方法验证用户名，和密码 如果通过，条页面！
function login() {
//获取用户名和密码
var userid = $("#username").val();
var password = $("#password").val();
//验证用户名不为空
if (userid == "" || null ) {
$.messager.alert("提示", "请输入用户名", "info");
return;
}
//验证密码不为空
else if (password == "" || null) {
$.messager.alert("提示", "请输密码", "info");
return;
} else {
//验证通过，调用LoginController中的confirmation（）方法，去B层验证密码是否正确
$.ajax({
url: "/Login/confirmation",
data: { userid: userid, password: password }, //传入的数据
type: "POST", //返回的类型
dataType: 'text',
success: function (data) { //接收返回的数据 判断 成功则跳页面，失败则返回
if (data == "OK") {
//$.messager.alert("提示", "登陆成功，请您重新输入！", "info");
// //location.reload(true);
window.location.href = "../Main/Main";//你可以跟换里面的网址，以便成功后跳转
//$("#myTable").hide("slow");
//$("#success").show("slow");
} else if (data == "error") {
$.messager.alert("提示", "用户名或密码不正确，请您重新输入！", "info");
//$("#error").show("slow");
//$("#load").hide("slow");
}else{
alert("输入异常，请重新输入！");}
},
error: function () { alert("输入异常，请重新输入！") }, //错误提示
});
}
}
</script>
</head>
<body>
<div>
<!--<input type="text" placeholder="系统"> -->
<h1 class="STYLE1" style="margin-top:40px;margin-left:260px;"><img width="854" height="110" src="~/CSS/index_clip_image002_0005.png" alt="系统" /></h1>
</div >
<div class="container" style="margin-top:30px;">
<section id="content">
<form action="">
<h1>登录</h1>
<div>
<input type="text" placeholder="用户名" required="" id="username" />
</div>
<div>
<input type="password" placeholder="密码" required="" id="password" />
</div>
<div>
<span class="help-block u-errormessage" id="js-server-helpinfo"> </span></div>
<input name="submit" type="button" class="btn btn-primary" id="js-btn-login" value="登录" style="margin-left:120px" onclick ="login()"/>
@*<input name="submit" type="submit" class="btn btn-primary" id="js-btn-login" value="登录" style="margin-left:120px"/> *@
<div>
@* <input type="submit" value="Log in" /> <a href="#"></a>
<a href="#">Register</a>*@
</div>
</form>
</section>
</div>
</body>
</html>
然后是controller中的代码
<pre name="code" class="csharp"> /// <summary>
/// 登陆视图
/// </summary>
/// <returns></returns>
public ActionResult Login()
{
return View();
}
/// <summary>
/// d登陆方法验证
/// </summary>
/// <returns>OK 或者error</returns>
public string confirmation()
{
//获取前台传回的数据
string userid = Request["userid"];
string password = Request["password"];
//声明spring容器中的LoginBll
ILoginBll loginbll = SpringHelper.GetObject<ILoginBll>("LoginBll");
List<UserInfoViewModel> user = loginbll.QueryUser(userid);
//如果验证通过，则把数据存到session中，返回成功
if (user[0].pwd == password)
{
Session["userID"] = userid;
Session["realName"] = user[0].realName;
Session["JID"] = user[0].admin ;
return "OK";
}
//验证不通过，返回失败
else
{
return "error";
}
}
这个登陆，可以说非常简单，但是，在做的过程中，却一再的报错。在调试的过程中，你发现，他哪里都走了，调用也成功了，可是，在最后，就是返回失败。最开始，我一直在思考问题出在哪里，运行时，明明已经返回了OK 为什么还是失败呢？
聪明的你，可能会想到，是Ajax的错误。没错，确实出在了Ajax上，在这里，我好好说说这个错误，也是因为这个错误，我才加上了error: function () { alert("输入异常，请重新输入！") }, //错误提示，这句话。这个错误，其实非常简单，如果，Ajax的返回数据类型是json，那么，在后面的数据接收中，就要判断和解析返回的json数据，但是，我的数据，明显返回的是String类型，在这，我们有注意到，直接给json的dataType一个String的值，就是dataType:
‘String‘,其实，这是一个误区，Ajax的datetype类型是没有String的 ，与之对应的是text类型。所以，在这个小点上，我花了很长时间。在此做个笔记，与大家分享。
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-12-23 02:45:52