1.添加LoginController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CZBK.ItcastOA.WebApp.Controllers
{
public class LoginController : Controller
{
//
// GET: /Login/
IBLL.IUserInfoService UserInfoService { get; set; }
public ActionResult Index()
{
return View();
}
#region 完成用户登录
public ActionResult UserLogin()
{
string validateCode = Session["validateCode"] != null ? Session["validateCode"].ToString() : string.Empty;
if (string.IsNullOrEmpty(validateCode))
{
return Content("no:验证码错误!!");
}
Session["validateCode"] = null;//进行验证后,立即清掉
string txtCode = Request["vCode"];//从客户端拿到的验证码
if (!validateCode.Equals(txtCode, StringComparison.InvariantCultureIgnoreCase))
{
return Content("no:验证码错误!!");
}
string userName=Request["LoginCode"];
string userPwd=Request["LoginPwd"];
var userInfo=UserInfoService.LoadEntities(u=>u.UName==userName&&u.UPwd==userPwd).FirstOrDefault();//根据用户名找用户
if (userInfo != null)
{
// Session["userInfo"] = userInfo;
//产生一个GUID值作为Memache的键.
// System.Web.Script.Serialization.JavaScriptSerializer
string sessionId = Guid.NewGuid().ToString();
Common.MemcacheHelper.Set(sessionId, Common.SerializeHelper.SerializeToString(userInfo)
,DateTime.Now.AddMinutes(20));//将登录用户信息存储到Memcache中。
Response.Cookies["sessionId"].Value = sessionId;//将Memcache的key以Cookie的形式返回给浏览器。
return Content("ok:登录成功");
}
else
{
return Content("no:登录失败");
}
}
#endregion
#region 显示验证码
public ActionResult ShowValidateCode()
{
Common.ValidateCode vliateCode = new Common.ValidateCode();
string code=vliateCode.CreateValidateCode(4);//产生验证码
Session["validateCode"] = code;//产生的验证码必须存到Session中
byte[]buffer=vliateCode.CreateValidateGraphic(code);//将验证码画到画布上.
return File(buffer,"image/jpeg");//返回给前台img的src属性
}
#endregion
}
}
2.在controllers.xml里面增加下面代码
<object type="CZBK.ItcastOA.WebApp.Controllers.LoginController, CZBK.ItcastOA.WebApp" singleton="false" >
<property name="UserInfoService" ref="UserInfoService" />
</object>
3.添加视图
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>ItcastOA后台管理系统登录</title>
<script type="text/javascript">
if (window.parent.window != window) {
window.top.location.href = "/Home/CheckLogin";
}
</script>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function changeCheckCode() {
$("#img").attr("src", $("#img").attr("src") + 1);//避免缓存
}
function afterLogin(data) {
var serverData = data.split(':');
if (serverData[0] == "ok") {
window.location.href="/Home/Index"
} else {
$("#errorMsg").css("display", "block");
$("#errorMsg").text(serverData[1]);
changeCheckCode(); //必须添加这个切换验证码
}
}
</script>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
body
{
text-align: center;
background: #4974A4;
}
#login
{
width: 740px;
margin: 0 auto;
font-size: 12px;
}
#loginlogo
{
width: 700px;
height: 100px;
overflow: hidden;
background: url('/Content/Images/login/logo.png') no-repeat;
margin-top: 50px;
}
#loginpanel
{
width: 729px;
position: relative;
height: 300px;
}
.panel-h
{
width: 729px;
height: 20px;
background: url('/Content/Images/login/panel-h.gif') no-repeat;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
}
.panel-f
{
width: 729px;
height: 13px;
background: url('/Content/Images/login/panel-f.gif') no-repeat;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 3;
}
.panel-c
{
z-index: 2;
background: url('/Content/Images/login/panel-c.gif') repeat-y;
width: 729px;
height: 300px;
}
.panel-c-l
{
position: absolute;
left: 60px;
top: 40px;
}
.panel-c-r
{
position: absolute;
right: 20px;
top: 50px;
width: 222px;
line-height: 200%;
text-align: left;
}
.panel-c-l h3
{
color: #556A85;
margin-bottom: 10px;
}
.panel-c-l td
{
padding: 7px;
}
.login-text
{
height: 24px;
left: 24px;
border: 1px solid #e9e9e9;
background: #f9f9f9;
}
.login-text-focus
{
border: 1px solid #E6BF73;
}
.login-btn
{
width: 114px;
height: 29px;
color: #E9FFFF;
line-height: 29px;
background: url('/Content/Images/login/login-btn.gif') no-repeat;
border: none;
overflow: hidden;
cursor: pointer;
}
#txtUsername, #code, #txtPassword
{
width: 191px;
}
#logincopyright
{
text-align: center;
color: White;
margin-top: 50px;
}
a
{
color: Black;
}
a:hover
{
color: Red;
text-decoration: underline;
}
</style>
</head>
<body style="padding: 10px">
<div id="login">
<div id="loginlogo">
</div>
<div id="loginpanel">
<div class="panel-h">
</div>
<div class="panel-c">
<div class="panel-c-l">
@using (Ajax.BeginForm("UserLogin", "Login", new { }, new AjaxOptions() {HttpMethod="post",OnSuccess="afterLogin",LoadingElementId="div1"}, new { id="loginForm"}))
{
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" colspan="2">
<h3>
请使用ItcastOA管理系统账号登录</h3>
</td>
</tr>
<tr>
<td align="right">
账号:
</td>
<td align="left">
<input type="text" name="LoginCode" id="LoginCode" class="login-text" />
</td>
</tr>
<tr>
<td align="right">
密码:
</td>
<td align="left">
<input type="password" name="LoginPwd" id="LoginPwd" value="123" class="login-text" />
</td>
</tr>
<tr>
<td>
验证码:
</td>
<td align="left">
<input type="text" class="login-text" id="code" name="vCode" value="1" />
</td>
</tr>
<tr>
<td>
</td>
<td>
//加Id配合js防止缓存
<img id="img" src="/Login/ShowValidateCode?id=1" style="float: left; height: 24px;" />
<div style="float: left; margin-left: 5px; margin-top: 10px;">
<a href="javascript:void(0)" οnclick="changeCheckCode();return false;">看不清,换一张</a>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" id="btnLogin" value="登录" class="login-btn" /><span id="errorMsg" style="font-size:14px;color:red;display:none"></span>
<div id="div1" style="display:none">正在登录,请稍后....</div>
</td>
</tr>
</tbody>
</table>
}
</div>
<div class="panel-c-r">
<p>
请从左侧输入登录账号和密码登录</p>
<p>
如果遇到系统问题,请联系网络管理员。</p>
<p>
如果没有账号,请联系网站管理员。
</p>
<p>
......</p>
</div>
</div>
<div class="panel-f">
</div>
</div>
<div id="logincopyright">
Copyright ? 2015 itcast.com
</div>
</div>
</body>
</html>