这个项目整体采用代码生成器生成，具体看下图：
一、实现登录的思路：
1.添加系统CSS和JS
2.构建登录的Login.aspx的页面HTML
3.编写登录Ext.js的代码
4.编写CSS 实现登录与密码框前的小图标
5.实现登录验证码
6.实现登录的前后台编码
二、具体代码：
1.添加系统CSS和JS
<script type="text/javascript" src="/Web/Ext/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="/Web/Ext/ext-all-debug.js"></script> <script src="/Web/JavaScript/Common/Global.js" type="text/javascript"></script>
2.构建登录的Login.aspx的页面HTML
<body>
<div id="hello-win" class="x-hidden">
<div class="x-window-header">登录入口</div>
<div id="hello-tabs">
<img src="images/systemBanner.jpg"/>
</div>
<div id='loginInfo' style='color:red;padding-left:120px;'>
请输入已经通过审核的用户名与密码进行登陆！
</div>
</div>
</body>
3.编写登录Ext.js的代码
<script type="text/javascript">
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "/ExtOA.Web/Ext/resources/images/default/s.gif";
var loginForm = new Ext.FormPanel({
el: "hello-tabs",
id: "loginForm",
name: "loginForm",
border: false,
//配置项
items: {
//xtype可作为Ext控件的简写，都会对应一个Ext控件
xtype: "tabpanel",
//第一项
activeTab: 0,
defaults: { autoHeight: true, bodyStyle: "padding:10px" },
items: [
{
title: "管理员登录",
//显示对应的div
contentEl: "loginInfo",
//排列的方式
layout: "form",
defaults: { 230 },
//默认的类型
defaultType: "textfield",
//里面具体的内容
items:
[
{
//引入css样式的写法
cls: "user",
fieldLabel: "帐号",
name: "staffName",
style: "font-size:15px",
//不允许为空
allowBlank: false,
//提示
blankText: "帐号不允许为空!"
},
{
cls: "key",
fieldLabel: "密码",
name: "staffPwd",
style: "font-size:15px",
//文本类型
inputType: "password",
allowBlank: false,
blankText: "密码不允许为空!"
},
{
fieldLabel: "验证码",
id: "validateCode",
name: "validateCode",
maxlength: 4,
100,
//大小
style: "font-size:15px",
allowBlank: false,
blankText: "请输入验证码!"
},
]
},
//第二块选项卡
{
title: "关于本系统",
layout:"",
html: "OA办公平台 v 1.0<br> 版权所有 孙丽媛 © <br/>技术支持:13593372136@163.com"
}
]
}
});
//创建windows窗体对象
var win = new Ext.Window({
el: "hello-win",
490,
height: 280,
//关闭的时候隐藏
closeAction: "hide",
//内部为透明的
plain: true,
//为模态显示
modal: true,
//是否允许折叠
collapsible: true,
//是否允许拖动
draggable: true,
//是否允许关闭
closable: false,
//登录窗体作为项
items: loginForm,
buttons: [
{
text: "确定",
handler: function () {
//判断是否通过验证
if (win.getComponent("loginForm").form.isValid()) {
//进行提交
win.getComponent("loginForm").form.submit({
url: "handler/CheckLogin.aspx",
waitTitle: "提示",
waitMsg: "正在登录验证,请稍候...",
method: "POST",
success: function (form,action) {
var loginResult = action.result.success;
if (loginResult) {
window.location.href = action.result.href;
} else {
Ext.Msg.alert("提示",action.result.message);
}
},
failure: function (form,action) {
Ext.Msg.alert("提示", action.result.message);
//失败得到图片的对象
var imgSN = Ext.getDom("imgSnCode");
if (imgSN)
{
//加参数
imgSN.src="handler/VerifyCode.aspx?datetime=" + (new Date()).getTime();
}
},
});
}
// alert("确定");
}
},
{
text: "重置",
handler: function () {
//获取loginFrom的主建 或者直接获取
win.getComponent("loginForm").form.reset();
// loginForm
//alert("重置");
}
}
]
});
//让窗体显示
win.show();
//得到验证码控件
var db = Ext.getDom("validateCode");
//得到父节点
var db2 = Ext.get(db.parentNode);
//用DomHelper得到getDom 的值
db2.createChild([{ tag: "span", html: " " }, { tag: "img", id: "imgSnCode",style:"cursor:pointer",title:"看不清楚？", src: "handler/VerifyCode.aspx", align: "absbottom" }]);
//让验证码刷新
var imgSN = Ext.get("imgSnCode");
if (imgSN) {
imgSN.on("click", function () {
this.dom.src = "handler/VerifyCode.aspx?datetime=" + (new Date()).getTime();
});
}
})
</script>
5.实现登录验证码
1.后台验证码的帮助类：
/// <summary>
/// 产生一个随机数
/// </summary>
/// <param name="codeCount"></param>
/// <returns></returns>
private string CreateRandomCode(int codeCount)
{
string allChar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,w,x,y,z";
string[] allCharArray = allChar.Split(',');
string randomCode = "";
int temp = -1;
Random rand = new Random();
for (int i = 0; i < codeCount; i++)
{
if (temp != -1)
{
rand = new Random(i * temp * ((int)DateTime.Now.Ticks));
}
int t = rand.Next(35);
if (temp == t)
{
//不相等的话继续产生
return CreateRandomCode(codeCount);
}
temp = t;
randomCode += allCharArray[t];
}
return randomCode;
}
private void CreateImage(string checkCode)
{
//创建宽度
int iwidth = (int)(checkCode.Length * 11.5);
System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 20);
Graphics g = Graphics.FromImage(image);
Font f = new System.Drawing.Font("Arial", 10, System.Drawing.FontStyle.Bold);
Brush b = new System.Drawing.SolidBrush(Color.Blue);
//g.FillRectangle(new System.Drawing.SolidBrush(Color.Blue),0,0,image.Width, image.Height);
g.Clear(Color.White);
g.DrawString(checkCode, f, b, 3, 3);
System.IO.MemoryStream ms = new System.IO.MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
//清空内容项
Response.ClearContent();
Response.ContentType = "image/Jpeg";
//客户端输出二进制数据
Response.BinaryWrite(ms.ToArray());
g.Dispose();
image.Dispose();
}
2.前台js的调用：（动态产生图片）
//得到验证码控件
var db = Ext.getDom("validateCode");
//得到父节点
var db2 = Ext.get(db.parentNode);
//用DomHelper得到getDom 的值
db2.createChild([{ tag: "span", html: " " }, { tag: "img", id: "imgSnCode", src: "handler/VerifyCode.aspx", align: "absbottom" }]);
3.后台核心代码：
1.指向的页面： （为aspx页面）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="VerifyCode.aspx.cs" Inherits="VerifyCode" %>
private void Page_Load(object sender, System.EventArgs e) { string checkCode = CreateRandomCode(4);//产生一个数字+字母组合的随机四位数 Session["CheckCode"] = checkCode; //将此四位数保存至Session,供登录验证 CreateImage(checkCode);//根据此验证码产生图片返回到调用端 }
6.实现登录的前后台编码
前台：重置按钮：
win.getComponent("loginForm").form.reset();
确认按钮：（通过Submit提交）
//判断是否通过验证
if (win.getComponent("loginForm").form.isValid()) {
//进行提交
win.getComponent("loginForm").form.submit({
url: "handler/CheckLogin.aspx",
waitTitle: "提示",
waitMsg: "正在登录验证,请稍候...",
method: "POST",
success: function (form,action) {
var loginResult = action.result.success;
if (loginResult) {
window.location.href = action.result.href;
} else {
Ext.Msg.alert("提示",action.result.message);
}
},
failure: function (form,action) {
Ext.Msg.alert("提示", action.result.message);
//失败得到图片的对象
var imgSN = Ext.getDom("imgSnCode");
if (imgSN)
{
//加参数
imgSN.src="handler/VerifyCode.aspx?datetime=" + (new Date()).getTime();
}
},
});
后台代码：CheckLogin.aspx
string username = Request["staffName"].ToString();
string password = Request["staffPwd"].ToString();
string reqCheckCode = Request["validateCode"].ToString();
//保存在session中的验证码
string checkCode = Session["CheckCode"].ToString();
//思路：先检查验证码是否正确，是否存在用户名，最后判断密码
if (checkCode != reqCheckCode)
{
Response.Write("{success:false,message:'登录失败，您输入的验证码和系统产生的不一致，请重新输入!'}");
}
else {
ExtOA.Biz.UserInfoBiz helper = new ExtOA.Biz.UserInfoBiz();
ExtOA.Ent.UserInfo userinfo = helper.GetUserInfoByUserName(username);
if (userinfo != null)
{
if (userinfo.PassWord == password)
{
Session["CurrentUser"]==userinfo;
Response.Write("{success:true,href:'/Web/Manage/DeskTop/index.aspx',message:''}");
}
else
{
Response.Write("{success:false,message:'登录失败,您输入的密码不正确，请与管理员联系!'}");
}
}
else
{
Response.Write("{success:false,message:'登录失败,您的用户名尚未通过验证，请与管理员联系!'}");
}
后台代码部分思路：
1.ExtOA.IDal添加一个新方法
2. ExtOA.SqlServerDal实现ExtOA.IDal方法
3.UserInfoBiz业务逻辑层中调用ExtOA.SqlServerDal中的方法
4.CheckLogin中调用UserInfoBiz
ExtOA.IDal：
UserInfo GetUserInfoByUserName(string usernaem);
ExtOA.SqlServerDal：
/// <summary>
/// 根据用户名获取用户实体
/// </summary>
/// <param name="usernaem"></param>
/// <returns></returns>
public UserInfo GetUserInfoByUserName(string usernaem)
{
UserInfo result = null;
string sql = "Get_UserInfo_By_UserName";
using (System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(ConnectionString))
{
System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(sql, connection);
command.CommandType = System.Data.CommandType.StoredProcedure;
//command.CommandTimeout = 0;
System.Data.SqlClient.SqlParameter p_userName = command.Parameters.Add("@UserName", SqlDbType.VarChar);
p_userName.Direction = ParameterDirection.Input;
p_userName.IsNullable = false;
p_userName.Value = usernaem;
connection.Open();
using (SqlDataReader dr = command.ExecuteReader())
{
if (dr.Read())
{
result = new UserInfo();
result = PopulateUserInfoFromIDataReader(dr);
}
dr.Close();
}
command.Dispose();
connection.Close();
}
return result;
}
UserInfoBiz：
/// <summary>
/// 根据用户名获取用户的实体
/// </summary>
/// <param name="usernaem"></param>
/// <returns></returns>
public UserInfo GetUserInfoByUserName(string usernaem)
{
try
{
IUserInfoDR dal = UserInfoDal.Create(Config.Instance().Dal, Config.Instance().MyConnectstring);
return dal.GetUserInfoByUserName(usernaem);
}
catch (Exception ex)
{
//log.Error("SetUserInfo err:",ex);
return null;
}
}
效果图：
