MVC北京络捷斯特第三方物流系统技术解析（二）登陆
登陆：对于用户进行登陆
界面效果图：
图（一）
登陆功能实现：
第一步：数据库
1表和表的关系
图（2）
表1：用户表（pw_GongDianLuRu）
用于存放钟表录入的信息
| 列名 | 数据类型 | 主键/外键 | 说明 |
| UserNameID | int | 主键 | 用户名ID |
| UserName | char (50) |
| 用户名 |
| Password | char (50) |
| 密码 |
| PersonnelID | int | 外键 | 员工ID |
| YouYongFou | bit |
| 有用否 |
第二步：控制器（controllers）
图（3）
#region//生成验证码
public string CreateValidateCode(int length)
{
int[] randMembers = new int[length];
int[] validateNums = new int[length];
string validateNumberStr = "";
//生成起始序列值
int seekSeek = unchecked((int)DateTime.Now.Ticks);
Random seekRand = new Random(seekSeek);
int beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000);
int[] seeks = new int[length];
for (int i = 0; i < length; i++)
{
beginSeek += 10000;
seeks[i] = beginSeek;
}
//生成随机数字
for (int i = 0; i < length; i++)
{
Random rand = new Random(seeks[i]);
int pownum = 1 * (int)Math.Pow(10, length);
randMembers[i] = rand.Next(pownum, Int32.MaxValue);
}
//抽取随机数字
for (int i = 0; i < length; i++)
{
string numStr = randMembers[i].ToString();
int numLength = numStr.Length;
Random rand = new Random();
int numPosition = rand.Next(0, numLength - 1);
validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1));
}
//生成验证码
for (int i = 0; i < length; i++)
{
validateNumberStr += validateNums[i].ToString();
}
return validateNumberStr;
}
public byte[] CreateValidateGraphic(string validateCode)
{
Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 12.0), 22);
Graphics g = Graphics.FromImage(image);
try
{
//生成随机生成器
Random random = new Random();
//清空图片背景色
g.Clear(Color.White);
//画图片的干扰线
for (int i = 0; i < 25; i++)
{
int x1 = random.Next(image.Width);
int x2 = random.Next(image.Width);
int y1 = random.Next(image.Height);
int y2 = random.Next(image.Height);
g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
}
Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic));
LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),
Color.Blue, Color.DarkRed, 1.2f, true);
g.DrawString(validateCode, font, brush, 3, 2);
//画图片的前景干扰点
for (int i = 0; i < 100; i++)
{
int x = random.Next(image.Width);
int y = random.Next(image.Height);
image.SetPixel(x, y, Color.FromArgb(random.Next()));
}
//画图片的边框线
g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
//保存图片数据
MemoryStream stream = new MemoryStream();
image.Save(stream, ImageFormat.Jpeg);
//输出图片流
return stream.ToArray();
}
finally
{
g.Dispose();
image.Dispose();
}
}
public ActionResult GetValidateCode(string RandomNumber)
{
string code = CreateValidateCode(5);
Session["ValidateCode"] = code;
byte[] bytes = CreateValidateGraphic(code);
return File(bytes, @"image/jpeg");
}
#endregion
#region 登陆
public ActionResult LoginXiTong(string YanZhengMa,string UserName, string Password)
{
if (YanZhengMa.Equals(Session["ValidateCode"]))
{
var tbRenYuanGongZhong = from RenYuans in JC.SYSUserNameList
where RenYuans.UserName.Equals(UserName) && RenYuans.Password.Equals(Password)
select new
{
UserName = RenYuans.UserName,
Password = RenYuans.Password,
};
List<Dictionary<string, object>> kkk = new List<Dictionary<string, object>>();
foreach (var item in tbRenYuanGongZhong)
{
Dictionary<string, object> itemWuliao = new Dictionary<string, object>();
foreach (System.Reflection.PropertyInfo p in item.GetType().GetProperties())
{
itemWuliao.Add(p.Name, p.GetValue(item, null).ToString().Trim());
}
kkk.Add(itemWuliao);
}
return Json(kkk, JsonRequestBehavior.AllowGet);
}
else {
return Json("错误", JsonRequestBehavior.AllowGet);
}
}
第三步、视图层（views）
2.1.3（图1）
2.1.3（图2）
Html代码
<styletype="text/css">/*内联样式表*/
.div1{
padding-left:30px;/*左内边距30px*/
background:url(../../Content/图/images/1.png)4px no-repeat;
/*设置背景图片，位置（距左边）：4px,不重复，格式：background:url（背景连接） 位置 重复类型
重复类型有：repeat(水平和垂直方向重复),repeat-x(水平方向重复),repeat-y(垂直方向重复),no-repeat(不重复)*/
background-color:#FFFFFF;/*设置背景颜色为白色*/
width:140px;/*设置宽度*/
height:25px;/*设置高度*/
line-height:25px;/*设置行高*/
border:1px solid#ccc;
/*设置边框，格式:border:边框宽度 边框类型 边框颜色
边框类型有：dotted(点状线),solid(实线),double(双线),dashed(虚线)
*/
}
.div2{
padding-left:30px;
background:url(../../Content/图/images/2.png)4px no-repeat;
background-color:#FFFFFF;
width:140px;
height:25px;
line-height:25px;
border:1px solid#ccc;
}
input{
border:0;/*设置边框为无边框*/
font-size:18px; /*设置字体大小*/
}
#vCode{
background-color:#FFFFFF;
border:1px solid#ccc;
outline:none;
}
</style>
<body>
<divid="sourceCode" class="easyui-window" title="代码浏览"data-options="closed:true"style="width:500px;height:200px;padding:10px;">
<iframeid = "sourceCodeIFrame" style="width:98%;height:98%"></iframe>
</div>
<imgsrc="../../Content/图/img/主界面.png"width="100%" height="100%" style="z-index:-100;position:absolute;left:0;top:0">
<tablewidth="100%"border="0"cellpadding="0"cellspacing="0"style="margin-top: 40px;">
<tr>
<tdheight="200" style="text-align: center;"><fontstyle="font-size: 38px;font-family:微软雅黑;color: rgb(86, 127, 213);"><imgsrc="../../Content/图/img/3.png"/></font></td>
</tr>
</table>
<tablewidth="543" height="255"border="0"align="center"cellpadding="0"cellspacing="0"style="margin-top: -40px;">
<tr>
<tdbackground="../../Content/图/images/kuang.png"><tablewidth="320" border="0" align="center"cellpadding="0" cellspacing="15">
<tr>
<td width="25%"><spanclass="STYLE2">用户名：</span></td>
<td width="75%"><divclass="div1">
<input name="userName"type="text" id="userName" style="height:22px;width:137px;outline:none;vertical-align:middle;"/>
</div></td>
</tr>
<tr>
<td width="25%"><spanclass="STYLE2">密 码：</span></td>
<td width="75%"><divclass="div2">
<input name="pwd"type="password" id="pwd" style="height:22px;width:137px;outline:none;vertical-align:middle;"/>
</div></td>
</tr>
<tr>
<td><spanclass="STYLE2">验证码：</span></td>
<td>
<div id="vCodeBorder"style="float:left;margin-right:4px;"><inputname="vCode" type="text" id="vCode"size="7" /></div><div><imgid="vCodeImg" style="width:65px;height:28px"></div>
</td>
</tr>
<tr>
<td colspan="2"><divalign="center"><imgsrc="../../Content/图/images/login.png"style="cursor:hand"width="81" height="26" οnclick="loginOnClick()"/></div> </td>
</tr>
</table></td>
</tr>
</table>
</body>
3-3、jQuery代码
$(document).ready(function () {
$("#vCodeImg").attr("src","/JiChuXinXiGuanLi/GetValidateCode?RandomNumber="+ Math.random());
$('#userName').keydown(function(e) {
if (e.keyCode == 13) {
loginOnClick();
}
});
$('#pwd').keydown(function(e) {
if (e.keyCode == 13) {
loginOnClick();
}
});
//回车触发时间
$('#vCodeBorder').keydown(function(e) {
if (e.keyCode == 13) {
loginOnClick();
}
});
$("#vCodeBorder").bind("click",function() {
MathRandom();
this.src ="/JiChuXinXiGuanLi/GetValidateCode?RandomNumber="+ Math.random();
});
});
//随机数
function MathRandom() {
for (var i = 0; i< 6; i++) {
Num += Math.random();
}
}
function loginOnClick() {
$.getJSON("/JiChuXinXiGuanLi/LoginXiTong?YanZhengMa="+ $("#vCodeBorder").val() +"&"
+"UserName=" + $("#userName").val()+"&"
+ "Password=" + $("#pwd").val(),
function (data) {
if (data !=null&& data.toString() != "") {
alert("登陆成功");
window.location.href ="/Main/Main";
} else {
alert("登录失败");
//更新验证码
MathRandom();
$("#Erro").html(data)
$("#vCodeBorder").val("");
$("#vCodeImg").attr("src","/Main/GetValidateCode?RandomNumber="+ Math.random());
}
});
}
仅供学习，禁止用于商业用途
2994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
