EasyUi – 2.布局Layout + 3.登录界面
1.页面布局
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Easyui.Web.index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XX科技 - 监控</title> <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet"> <link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" /> <script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> <style> .nav-item { text-align: center; } .nav-item a { color: #000; text-decoration: none; } /*菜单js打开tab出现的滚动条隐藏*/ .panel-body-noborder { overflow: hidden; } </style> <script type="text/javascript"> $(function () { }) function addTab(title, href) { var tt = $('#main-center'); if (tt.tabs('exists', title)) { tt.tabs('select', title); } else { if (href) { var content = '<iframe scrolling="yes" frameborder="0" src="' + href + '" style="width:100%;height:100%;"></iframe>'; } else { var content = '未实现'; } tt.tabs('add', { title: title, closable: true, content: content }); } } </script> </head> <body id="cc" class="easyui-layout"> <div data-options="region:'north',split:true" style="height: 50px; background-color: gray"></div> <div data-options="region:'west',title:'导航菜单',split:true" style="width: 150px;"> <div id="aa" class="easyui-accordion" fit="true" style="height: auto;"> <div title="设备监控" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;"> <div class="nav-item"> <a href="javascript:addTab('设备申购')"> <img src="images/kdmconfig.png"></img><br /> <span>设备申购</span> </a> </div> <div class="nav-item"> <a href="javascript:addTab('设备档案','device/index')"> <img src="images/hammer_32.png"></img><br /> <span>设备档案</span> </a> </div> <div class="nav-item"> <a href="javascript:addTab('设备申购')"> <img src="images/kdmconfig.png"></img><br /> <span>设备申购</span> </a> </div> </div> <div title="系统设置" data-options="iconCls:'icon-wrench-screwdriver'" style="padding: 10px;"> <div title="业务操作" selected="true" style="overflow: auto;"> <div class="nav-item"> <a href="javascript:addTab('用户管理','AdminUser/main.html')"> <img src="images/32/users_business_32.png"></img><br /> <span>用户管理</span> </a> </div> <div class="nav-item"> <a href="javascript:addTab('设备申购')"> <img src="images/kdmconfig.png"></img><br /> <span>操作日志</span> </a> </div> <div class="nav-item"> <a href="javascript:addTab('设备维修')"> <img src="images/package_settings.png"></img><br /> <span>设备维修</span> </a> </div> </div> </div> </div> </div> <div data-options="region:'center'" style="padding: 5px; background: #eee;"> <div id="main-center" class="easyui-tabs" fit="true" border="false"> <div title="首页" style="padding: 20px;"> <img src="images/banner.gif"></img> <div style="margin-top: 20px;"> <p>xxxx有限公司。</p> <p> </p> <p>监控平台。</p> <p> </p> </div> </div> </div> </div> </body> </html>
2.登录界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户登录 - 防盗器监控管理系统</title> <link href="css/sexybuttons.css" rel="stylesheet" type="text/css" /> <link href="css/mainlogin.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet"> <link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" /> <script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> var LoginAndReg; function login() { var txtUserName = $("#txtUserName"); var txtPassword = $("#txtPassword"); if (txtUserName.val() == "") { alert("请输入用户名！"); txtUserName.focus(); return false; } else if (txtPassword.val() == "") { alert("请输入密码！"); txtPassword.focus(); return false; } else { //$("#btnLogin").click(function () { console.info($("#txtPassword").val()); var user = encodeSTR($("#txtUserName").val()); var pass = encodeSTR($("#txtPassword").val()); $.post( "Login.ashx", { txtUsername: user, txtPass: pass, }, function (e) { console.info(e); alert(e); if (e == "登录成功！") { window.location.href = "index.aspx"; } }, "html" ); //}); } } function encodeSTR(str) { var t = ""; for (var x = 0; x < str.length; x++) { var a = str.charCodeAt(x); if (x != 0) { t += '|'; } t += new Number(a).toString(10); } return t; } function decodeSTR(str) { var a1 = str.split('|'); for (var x = 0; x < a1.length; x++) { a1[x] = String.fromCharCode(a1[x]); } return a1.join(''); } function getsize() { var windowHeight = 0; var widowWidth = 0; if (typeof (window.innerHeight) == 'number') { windowHeight = window.innerHeight; widowWidth = window.innerWidth; } else { if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; widowWidth = document.documentElement.clientWidth; } else { if (document.body && document.body.clientHeight) { windowHeight = document.body.clientHeight; widowWidth = document.body.clientWidth; } } } return { width: widowWidth, height: windowHeight }; } $(function () { $('#btnLogin').click(function () { login(); return false; }); //响应键盘的回车事件 //$(this).keydown(function (event) { // if (event.keyCode == 13) { // event.returnValue = false; // event.cancel = true; // return login(); // } //}); //$('#txtorgcode').combobox({ // data:orgdata,valueField:'id',textField:'text',panelHeight:'300',width:160 //}) }) </script> </head> <body> <div id="LoginCircle"> <div id="LoginDoc"> <div id="SysName"></div> <form id="LoginFrom" method="post"> <div id="SysInput"> <!--<ul> <li>单位代码：</li> <li> <input id="txtorgcode" name="orgcode" value="" type="text" class="InputStyle" maxlength="18" /></li> </ul>--> <ul> <li>用户名：</li> <li> <input id="txtUserName" name="username" value="" type="text" class="InputStyle" maxlength="18" /></li> </ul> <ul> <li>密 码：</li> <li> <input name="password" type="pass" class="InputStyle" value="" id="txtPassword" /></li> </ul> <ul> <li> </li> </ul> <ul> <li></li> <li> <div style="width: 170px; text-align: left"> <button class="sexybutton" id="btnLogin"><span><span><span class="usergo">登录</span></span></span></button> <button class="sexybutton" type="reset"><span><span><span class="reload">重置</span></span></span></button> </div> </li> </ul> </div> </form> <div class="clear"> </div> </div> </div> <div id="Copy"> <font color="red">防盗器监控管理系统</font> Version 1.0 由XX科技提供技术支持！ <br /> </div> </body> </html>
一般处理程序
Login.ashx
using System; using System.Collections.Generic; using System.Data; using System.Data.Common; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.SessionState; using Easyui.Common; using Easyui.Common.DEncrypt; namespace Easyui.Web { //<summary> //Login 的摘要说明 //</summary> public class Login : IHttpHandler { HttpRequest Request; HttpResponse Response; HttpSessionState Session; HttpServerUtility Server; HttpCookie Cookie; public void ProcessRequest(HttpContext context) { context.Response.Buffer = true; context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1); context.Response.AddHeader("pragma", "no-cache"); context.Response.AddHeader("cache-control", ""); context.Response.CacheControl = "no-cache"; context.Response.ContentType = "text/plain"; Request = context.Request; Response = context.Response; Session = context.Session; Server = context.Server; //string userName = PageValidate.InputText(decodeSTR(Request["txtUsername"].ToString()), 30); //string Password = PageValidate.InputText(decodeSTR(Request["txtPassword"].ToString()), 30); string userName = Request["txtUsername"].ToString(); string Password = Request["txtPass"].ToString(); Easyui.BLL.TUser person = new Easyui.BLL.TUser(); DESEncrypt encrypt = new DESEncrypt(); //userName = encrypt.Encrypto(userName); //Password = encrypt.Encrypto(Password); bool checkPass = person.UserCheckIn11(decodeSTR(userName.ToString()), decodeSTR(Password.ToString())); if (!checkPass) { Response.Write("登陆失败！"); } else { //person.UserHistoryAdd(userName); //Session["userName"] = userName; //person.Log("登录成功！"); //this.Response.Redirect("index.aspx"); Response.Write("登录成功！"); } } public bool IsReusable { get { return false; } } private string decodeSTR(string str) { string[] str1 = str.Split('|'); string str2 = null; foreach (var item in str1) { str2 += (char)int.Parse(item); } return str2; } public string encode(string str) { var t = ""; for (var x = 0; x < str.Length; x++) { var a = Convert.ToByte(str[x]); if (x != 0) { t += '|'; } t += a; } return t; } ///// <summary> ///// 用户登录 用户登录信息加入 ///// </summary> ///// <param name="UserName"></param> ///// <param name="PassWord"></param> ///// <returns></returns> ////public bool UserCheckIn(string UserName, string PassWord) //{ // DbCommand dbcommand = db.GetStoredProcCommand("Person_UserCheckIn"); // db.AddInParameter(dbcommand, "@UserName", DbType.AnsiString, UserName); // db.AddInParameter(dbcommand, "@PassWord", DbType.AnsiString, PassWord); // dbcommand.CommandType = CommandType.StoredProcedure; // SqlDataReader sdr = (SqlDataReader)db.ExecuteReader(dbcommand); // if (sdr.Read()) // { // if (System.Convert.ToInt32(sdr["rowc"]) > 0) // { // HttpContext context = HttpContext.Current; // context.Session["UserName"] = UserName; // context.Session["UserClass"] = sdr["Usertype"]; // context.Session["Psn_id"] = sdr["Psn_id"]; // context.Session["Name"] = sdr["Name"]; // context.Session["Depart_id"] = sdr["Depart_id"]; // context.Session["DepartName"] = sdr["DepartName"]; // sdr.Close(); // return true; // } // } // else // { // sdr.Close(); // } // return false; //} } }
借用 疯狂秀才 的界面。
