钟表维修管理系统技术解析(二) 登陆验证
登陆功能,通过输入账号,和密码,加上验证码防止用户频繁刷新登陆;因为密码要进行安全性管理,用MD5加密技术,把密码转换成32位字符,通过账号和处理后的密码对数据库进行查询,是否存在该用户,或者是否输入正确的密码;
登陆界面用到的控件有:
控件名称 | 说明 |
文本控件(easyui-textbox) | 第一要设置每个控件的id,第二设置大小不设置也有默认,第三(data-options)是数据操作:可以设置控件的一些属性和事件 |
按钮(easyui-linkbutton) | |
图片显示标签(img) |
登陆功能的实现:
第一步:数据库
2.1图(2)
表1:员工表(sys_YuanGong)
列名 | 数据类型 | 主键/外键 | 说明 |
YuanGongID | int | 主键 | 员工ID |
LuRuYuanID | int | 外键 | 录入员ID |
YuanGongZhuangTaiID | int | 外键 | 员工状态ID |
MenDianID | int | 外键 | 门店ID |
ZhiWuID | Int | 外键 | 职务 |
JueSeID | int | 外键 | 角色ID |
YuanGongBianHao | nchar(50) |
| 员工编号 |
YuanGongXingMing | nchar(50) |
| 员工姓名 |
XingBie | nchar(50) |
| 性别 |
JiGuan | nchar(50) |
| 籍贯 |
XueLi | nchar(50) |
| 学历 |
ChuShengRiQi | date |
| 出生日期 |
ShenFenZhengHao | nchar(18) |
| 身份证号 |
RuZhiRiQi | data |
| 入职日期 |
RuZhiDiDian | nchar(50) |
| 入职地点 |
YiDongShouJi | int |
| 移动手机 |
JiaTingDianHua | nchar(50) |
| 家庭电话 |
DiXin | decimal(18, 2) |
| 底薪 |
JiShiFou | bit |
| 技术否 |
HunFou | bit |
| 婚否 |
TongXunDiZhi | nchar(50) |
| 通讯地址 |
BeiZhu | nchar(50) |
| 备注 |
MiMa | nchar(50) |
| 密码 |
表2:门店表(sys_MenDian)
列名 | 数据类型 | 主外键 | 说明 |
MenDianID | int | 主键 | 门店ID |
LuRuYuanID | int | 外键 | 录入员ID |
ChengShi | nchar(50) |
| 城市 |
MenDianBianHao | nchar(50) |
| 门店编号 |
GongZuoZhanMingCheng | nchar(50) |
| 门店名称 |
LianXiDianHua | nchar(50) |
| 联系电话 |
ChuanZhenDianHua | nchar(50) |
| 传真号码 |
YouZhengBianMa | nchar(50) |
| 邮政编码 |
DianNaoXiTong | nchar(50) |
| 电脑系统 |
KuanDaiYongHu | nchar(50) |
| 宽带账号 |
KuanDaiMiMa | nchar(50) |
| 宽带密码 |
XiangXiDiZhi | nchar(50) |
| 详细地址 |
BeiZhu | nchar(500) |
| 备注 |
BaoXiuZhengCi | text |
| 保修政策 |
JianLiShiJian | date |
| 建立时间 |
YouXiaoFou | bit |
| 有效否 |
ZongGongSi | int |
| 总公司(1为true,0为false) |
表3:角色表(sys_JueSe)
列名 | 数据类型 | 主键/外键 | 说明 |
JueSeID | int | 主键 | 角色ID |
LuRuYuanID | int | 外键 | 录入员ID |
BuMenID | int | 外键 | 部门ID |
JueSeMingCheng | nchar(10) |
| 角色名称 |
YouXiaoFou | Bit |
| 有效否 |
表4:部门表(sys_BuMen)
列名 | 数据类型 | 主键/外键 | 说明 |
BuMenID | int | 主键 | 部门ID |
LuRuYuanID | int | 外键 | 录入员ID |
BuMenMingCheng | Nchar(10) |
| 部门名称ID |
BeiZhu | Nchar(10) |
| 备注ID |
YouXiaoFou | Bit |
| 有效否 |
表5:权限表(sys_QuanXian)
列名 | 数据类型 | 主键/外键 | 说明 |
QuanXianID | int | 主键 | 权限ID |
LuRuYuanID | int | 外键 | 录入员ID |
QuanXianMingCheng | Nchar(50) |
| 权限名称 |
YouXiaoFou | bit |
| 有效否 |
表6:角权表(sys_JueQuan)
列名 | 数据类型 | 主键/外键 | 说明 |
JueQuanID | int | 主键 | 角权ID |
LuRuYuanID | int | 外键 | 录入员ID |
JueSeID | int | 外键 | 角色ID |
QuanXianID | int | 外键 | 权限ID |
YouXiaoFou | Bit |
| 有效否 |
表7:日志表(sys_UserLoginLog)
列名 | 数据类型 | 主键/外键 | 说明 |
LoginID | int | 主键 | 日志ID |
StaffID | int | 外键 | 员工ID |
operationLog | Nchar(50) |
| 操作内容 |
operationDate | date |
| 操作时间 |
控件使用方法:
1. 文本框(easyui-textbox)
作用:用于显示,编辑文本2.1.2 (图3)
创建文本框控件代码:
<input class="phone-input" id="txtUser" style="width:250px;background:#fff;margin-bottom:4%;border:1px solid #ccc;padding:4%;font-size:95%;color:#555;"/>
获取文本控件值的代码:
$("#txtUser").val();
赋值给文本框的代码:
$("#txtUser").textbox('setValue', "");
2、按钮(easyui-linkbutton)
2.1.2 (图4)
创建按钮界面层代码:
<a class="goodButton" οnclick="UserLogin()" style="width:276px;height:40px;line-height:40px;">登 录</a>
jQuery代码定义点击事件的方法://验证账号和密码
function UserLogin() {
//表单提交方法传值
$.ajax({
type: 'post',
url: '/Main/UserLogin?strValidateCode=' + $("#txtvaliCode").val() + '&' + 'strAccountNumber=' + $("#txtUser").val() + '&' + 'strPassword=' + $("#txtPassword").val(),
success: function (data) {
if (data == "true") {
window.location.href = "/Main/Index";//验证成功登陆到主界面
} else {
MathRandom();
$("#Erro").html(data)
$("#txtvaliCode").val("");
$("#valiCode").attr("src", "/Main/GetValidateCode?RandomNumber=" + Math.random());
}
}
});
}
第二步:控制器(Controllers)
2.1.(图5)
linq语法查询数据
1、登陆验证的函数
/// <summary>
/// 登陆验证
/// </summary>
/// <param name="strValidateCode">验证码</param>
/// <param name="strAccountNumber">账号</param>
/// <param name="strPassword">密码</param>
/// <returns></returns>
public string UserLogin(string strValidateCode, string strAccountNumber, string strPassword)
{
var returnstring = "";
try
{
var MD5Password = SetMD5(strPassword);//通过MD5加密
if (Session["ValidateCode"].ToString() == strValidateCode)//判断输入的验证码是否正确
{
try
{
//通过账号和密码验证是否输入正确的账号和密码
var LoginUser = (from dtUser in myMdl.sys_YuanGong
join dtCompany in myMdl.sys_MenDian on dtUser.MenDianID equals dtCompany.MenDianID
where dtUser.YuanGongBianHao == strAccountNumber && dtUser.MiMa == MD5Password && dtUser.YouXiaoFou == true
select dtUser).Single<Models.sys_YuanGong>();
var intMenDianID = LoginUser.MenDianID; ;
var UserCompany = (from dtUserCompany in myMdl.sys_MenDian
where dtUserCompany.MenDianID == intMenDianID
select dtUserCompany).Single<Models.sys_MenDian>();
Session["YongHuID"] = LoginUser.YuanGongID;//用Session记录用户ID
Session["DengLuRen"] = LoginUser.YuanGongXingMing;//用户名称
Session["RoleID"] = LoginUser.JueSeID;//角色ID
Session["ShopID"] = LoginUser.MenDianID;//门店ID
Session["HeadOfficeIs"] = UserCompany.ZongGongSi;//是否总公司号
//用户票证
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(
LoginUser.YuanGongID.ToString(),
true,
1000000
);
//缓存
HttpCookie cookie = new HttpCookie(
FormsAuthentication.FormsCookieName,
FormsAuthentication.Encrypt(ticket));
Response.Cookies.Add(cookie);
returnstring = UesrLog("登陆系统", "true", Convert.ToInt32(Session["YongHuID"]));//记录用户登陆日志
}
catch
{
returnstring = "登陆名或密码错误!";
}
}
else
{
returnstring= "验证码错误!";
}
}
catch {
returnstring= "系统出错!请联系管理员!";
}
return returnstring;
}
/// <summary>
/// MD5加密
/// </summary>
/// <param name="strSource">需要加密的字符</param>
/// <returns></returns>
public string SetMD5(string strSource)
{
Return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSource, "MD5");
}
/// <summary>
/// 设置登陆日志
/// </summary>
/// <param name="log">操作信息</param>
/// <param name="returnstring">返回值内容</param>
/// <param name="intUesrID">登陆用户ID</param>
/// <returns></returns>
public string UesrLog(string log,string returnstring,int intUesrID)
{
var logstring = "";
Models.sys_UserLoginLog UserLog = new Models.sys_UserLoginLog();
UserLog.StaffID = Convert.ToInt32(intUesrID);//登陆人
UserLog.operationLog = log;//设置日志内容
UserLog.operationDate = DateTime.Now;//设置当前时间
myMdl.sys_UserLoginLog.AddObject(UserLog);
int j = myMdl.SaveChanges();
if (j > 0)//判断是否保存成功
{
logstring = returnstring;
}
return logstring;
}
第三步、视图层(views)
Html代码:
<div style="height:30px"></div>
<input class="phone-input" id="txtUser" style="width:250px;background:#fff;margin-bottom:4%;border:1px solid #ccc;padding:4%;font-size:95%;color:#555;"/><br />
<input type="password" id="txtPassword" style="width:250px;background:#fff;margin-bottom:4%;border:1px solid #ccc;padding:4%;font-size:95%;color:#555;"/><br />
<p>
<input id="txtvaliCode" style="width:150px;height:10px;background:#fff;margin-bottom:1%;border:1px solid #ccc;padding:4%;font-size:95%;color:#555;"/>
<img id="valiCode" style="cursor: pointer;" alt="验证码">
</p>
<a class="goodButton" οnclick="UserLogin()" style="width:276px;height:40px;line-height:40px;">登 录</a>
<br />
<label id="Erro" style=" color:#fff; font-size:15px; font-family:楷体"></label>
jQuery代码:
history.forward();//限制浏览器在登陆界面返回
var Num = "";
$(document).ready(function () {
$("#valiCode").attr("src", "/Main/GetValidateCode?RandomNumber=" + Math.random());//随机生成数字,用于区分验证码
$('#txtUser').keydown(function (e) {
if (e.keyCode == 13) {//键盘回车事件
UserLogin();
}
});
$("#txtPassword").keydown(function (e) {
if (e.keyCode == 13) {
UserLogin();
}
});
$('#txtvaliCode').keydown(function (e) {
if (e.keyCode == 13) {
UserLogin();
}
});
$("#valiCode").bind("click", function () {
MathRandom();
this.src = "/Main/GetValidateCode?RandomNumber=" + Math.random();
});
});
function MathRandom() {
for (var i = 0; i < 6; i++) {
Num += Math.random();
}
}
function UserLogin() {
//表单提交方法传值
$.ajax({
type: 'post',
url: '/Main/UserLogin?strValidateCode=' + $("#txtvaliCode").val() + '&' + 'strAccountNumber=' + $("#txtUser").val() + '&' + 'strPassword=' + $("#txtPassword").val(),
success: function (data) {
if (data == "true") {
window.location.href = "/Main/Index";
} else {
MathRandom();
$("#Erro").html(data)//错误提示
$("#txtvaliCode").val("");//错误时清空文本
$("#valiCode").attr("src", "/Main/GetValidateCode?RandomNumber=" + Math.random());//改变验证码
}
}
});
}
登陆完成进入主界面: