首先,生成随机验证码 ValidateCode,看这里
https://blog.csdn.net/weixin_38211198/article/details/100005957
开始登录界面
后台代码
public class UserLoginController : Controller
{
public IUserInfoService UserInfoService { get; set; }
public ActionResult Index()
{
return View();
}
public ActionResult ShowCode()
{
Common.ValidateCode validateCode = new Common.ValidateCode();
//生成验证码
string vCode = validateCode.CreateVCode();
Session["vCode"] = vCode;
//生成验证码图像Byte
byte[] imgByte = validateCode.GetCodeImgByte();
//获取验证码图像
//Bitmap bitmap = validateCode.VCodeImg;
return File(imgByte, @"image/jpeg");
}
public ActionResult PrecessLogin()
{
//处理验证码
string strCode = Request["inputCode"];
string sessionCode = Session["vCode"] as string;
Session["vCode"] = null;
if (string.IsNullOrEmpty(sessionCode)|| strCode != sessionCode)
{
return Content("验证码错误!");
}
//处理用户名密码
string name = Request["inputName"];
string pwd = Request["inputPassword"];
short delNormal = (short)Model.DelFlagEnum.Normal;
var userInfo = UserInfoService.GetEntities(u => u.UName == name && u.Pwd == pwd && u.DelFlag == delNormal).FirstOrDefault();
if (userInfo == null)
{
return Content("用户名密码错误!");
}
Session["loginUser"] = userInfo;
//正确,跳转首页
return Content("ok");
}
}
前台代码
@{
Layout = "";
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color:skyblue;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
background-color:white;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: 10px;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
}
.form-signin input[id="inputCode"] {
float: left;
width: 100px;
}
#codeDiv {
width: 100%;
height: 46px;
}
#codeNumDiv {
float: right
}
#imgCode {
width: 80px;
height: 45px
}
</style>
</head>
<body>
<div class="container">
@using (Ajax.BeginForm("PrecessLogin", "UserLogin", new AjaxOptions() { OnSuccess = "afterLogin" },new { @class= "form-signin" }))
{
<h2 class="form-signin-heading">用户登录</h2>
<label for="inputName" class="sr-only">用户名</label>
<input type="text" id="inputName" name="inputName" class="form-control" placeholder="用户名" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="inputPassword" class="form-control" placeholder="密码" required>
<div id="codeDiv">
<label for="inputCode" class="sr-only">验证码</label>
<input type="text" id="inputCode" name="inputCode" class="form-control" placeholder="验证码" required>
<div id="codeNumDiv">
<img id="imgCode" src="/UserLogin/ShowCode?id=2" />
<a href="javascript:void(0)" onclick="changeCheckCode(); return false;">看不清,换一张</a>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住密码
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
<hr />
<footer>
<p>© 哈哈</p>
</footer>
}
</div>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function () {
//点击图片,改变验证码
$("#imgCode").click(changeCheckCode);
});
//改变当前图片地址
function changeCheckCode() {
var old = $("#imgCode").attr("src");
var now = new Date();
var str = old +
now.getDay() +
now.getMinutes() +
now.getSeconds();
$("#imgCode").attr("src", str);
}
//登录成功执行
function afterLogin(data) {
if (data == "ok")
window.location.href = "/Home/Index";
else
alert(data);
}
</script>
</body>
</html>
效果
参考
https://v3.bootcss.com/examples/signin/