首页 > 代码库 > Ext.js项目（一）
Ext.js项目（一）
这个项目整体采用代码生成器生成，具体看下图：
一、实现登录的思路：
1.添加系统CSS和JS
2.构建登录的Login.aspx的页面HTML
3.编写登录Ext.js的代码
4.编写CSS 实现登录与密码框前的小图标
5.实现登录验证码
6.实现登录的前后台编码
二、具体代码：
1.添加系统CSS和JS
<script type="text/javascript" src="http://www.mamicode.com/Web/Ext/adapter/ext/ext-base-debug.js"></script><script type="text/javascript" src="http://www.mamicode.com/Web/Ext/ext-all-debug.js"></script><script src="http://www.mamicode.com/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="http://www.mamicode.com/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: { width: 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, width: 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", width: 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 = http://www.mamicode.com/action.result.href;"提示",action.result.message); } }, failure: function (form,action) { Ext.Msg.alert("提示", action.result.message); //失败得到图片的对象 var imgSN = Ext.getDom("imgSnCode"); if (imgSN) { //加参数 imgSN.src="http://www.mamicode.com/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 = "http://www.mamicode.com/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 = http://www.mamicode.com/action.result.href;"提示",action.result.message); } }, failure: function (form,action) { Ext.Msg.alert("提示", action.result.message); //失败得到图片的对象 var imgSN = Ext.getDom("imgSnCode"); if (imgSN) { //加参数 imgSN.src="http://www.mamicode.com/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 = http://www.mamicode.com/usernaem;>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; } }
效果图：
Ext.js项目（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。