EasyUi – 2.布局Layout + 3.登录界面

时间:2023-01-04 13:07:57

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="data:images/kdmconfig.png"></img><br />
<span>设备申购</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备档案','device/index')">
<img src="data:images/hammer_32.png"></img><br />
<span>设备档案</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备申购')">
<img src="data: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="data:images/32/users_business_32.png"></img><br />
<span>用户管理</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备申购')">
<img src="data:images/kdmconfig.png"></img><br />
<span>操作日志</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备维修')">
<img src="data: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="data:images/banner.gif"></img>
<div style="margin-top: 20px;">
<p>xxxx有限公司。</p>
<p>&nbsp;</p>
<p>监控平台。</p>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</body>
</html>

EasyUi – 2.布局Layout + 3.登录界面

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>密&nbsp;&nbsp;&nbsp;码:</li>
<li>
<input name="password" type="pass" class="InputStyle" value="" id="txtPassword" /></li>
</ul>
<ul>
<li>&nbsp;</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>&nbsp;
<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(-);
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 = ; x < str.Length; x++)
{ var a = Convert.ToByte(str[x]); if (x != )
{
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;
//} }
}

借用  疯狂秀才 的界面。

EasyUi – 2.布局Layout + 3.登录界面