Ext.js项目（一）

Ext.js项目（一）

这个项目整体采用代码生成器生成，具体看下图：

一、实现登录的思路：

1.添加系统CSS和JS

2.构建登录的Login.aspx的页面HTML

3.编写登录Ext.js的代码

4.编写CSS 实现登录与密码框前的小图标

5.实现登录验证码

6.实现登录的前后台编码

二、具体代码：

1.添加系统CSS和JS

2.构建登录的Login.aspx的页面HTML

3.编写登录Ext.js的代码

5.实现登录验证码

1.后台验证码的帮助类：

///

/// 产生一个随机数 ///

/// /// 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：

///

/// 根据用户名获取用户实体 ///

/// /// 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：

///

/// 根据用户名获取用户的实体 ///

/// /// 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; } }

效果图：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。