<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="AdminHome.master.cs" Inherits="CarbonEmissionsSystem.CarbonWebPages.Admin.AdminHome" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head runat="server">
<meta charset="utf-8" />
<title>管理员后台 - .......系统名.....</title>
<!-- Bootstrap + FontAwesome -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
<style>
body {
background-color: #f4f9fc;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
.topbar {
background: linear-gradient(to right, #2980b9, #3498db);
color: white;
padding: 14px 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 16px;
}
.sidebar {
background: linear-gradient(to bottom, #2c3e50, #34495e);
min-height: 100vh;
color: white;
padding-top: 24px;
padding-bottom: 40px;
}
.sidebar a {
color: rgba(255,255,255,0.88);
display: block;
padding: 14px 26px;
text-decoration: none;
transition: all 0.3s ease;
font-size: 16px;
border-left: 4px solid transparent;
}
.sidebar a i {
margin-right: 10px;
min-width: 20px;
}
.sidebar a:hover {
background-color: rgba(255,255,255,0.1);
color: #fff;
}
.sidebar a.active {
background-color: rgba(52, 152, 219, 0.3);
color: #ffffff !important;
border-left: 4px solid #3498db;
font-weight: 600;
box-shadow: inset 4px 0 8px rgba(52, 152, 219, 0.5);
transition: background-color 0.3s ease;
}
.main-content {
padding: 30px 40px;
background-color: white;
min-height: calc(100vh - 70px);
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}
.btn-logout {
color: white;
border: 1px solid rgba(255,255,255,0.4);
background: transparent;
}
.btn-logout:hover {
background-color: rgba(255,255,255,0.15);
}
@media (max-width: 768px) {
.sidebar {
min-height: auto;
padding-bottom: 20px;
}
.main-content {
padding: 20px;
margin: 10px 0;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- 顶部栏 -->
<div class="topbar d-flex justify-content-between align-items-center">
<div>
<i class="fa-solid fa-leaf me-2"></i>
<strong>全球碳排放数据管理系统</strong>
<span class="ms-3 badge bg-light text-dark">管理员后台</span>
</div>
<div>
<span class="me-3">欢迎您,<strong>管理员</strong>!</span>
<asp:LinkButton ID="btnLogout" runat="server" CssClass="btn btn-sm btn-logout" OnClick="btnLogout_Click">
<i class="fa-solid fa-right-from-bracket me-1"></i>退出登录
</asp:LinkButton>
</div>
</div>
<!-- 页面主区域 -->
<div class="container-fluid">
<div class="row">
<!-- 左侧导航栏 -->
<div class="col-md-3 col-lg-2 sidebar">
<div class="px-4 pb-3">
<h5 class="text-white"><i class="fa-solid fa-bars me-2"></i>功能导航</h5>
</div>
<asp:HyperLink ID="lnkHome" runat="server" NavigateUrl="ManagerIndex.aspx"><i class="fa-solid fa-house"></i> 管理员首页</asp:HyperLink>
<asp:HyperLink ID="lnkQuery" runat="server" NavigateUrl="Query.aspx"><i class="fa-solid fa-magnifying-glass-chart"></i> 。。功能页名。。</asp:HyperLink>
<asp:HyperLink ID="lnkInput" runat="server" NavigateUrl="DataInput.aspx"><i class="fa-solid fa-pen-to-square"></i> 。。功能页名。。</asp:HyperLink>
<asp:HyperLink ID="lnkUpdate" runat="server" NavigateUrl="DataUpdate.aspx"><i class="fa-solid fa-rotate"></i> 。。功能页名。。</asp:HyperLink>
<asp:HyperLink ID="lnkDelete" runat="server" NavigateUrl="DataDelete.aspx"><i class="fa-solid fa-trash"></i> 。。功能页名。。</asp:HyperLink>
<asp:HyperLink ID="lnkUserManage" runat="server" NavigateUrl="UserManage.aspx"><i class="fa-solid fa-users"></i> 。。功能页名。。</asp:HyperLink>
<asp:HyperLink ID="lnkStats" runat="server" NavigateUrl="UserStatistics.aspx"><i class="fa-solid fa-chart-column"></i> 。。功能页名。。</asp:HyperLink>
<asp:HyperLink ID="lnkProfile" runat="server" NavigateUrl="PersonalInfo.aspx"><i class="fa-solid fa-user"></i> 个人信息</asp:HyperLink>
</div>
<!-- 主体内容区域 -->
<div class="col-md-9 col-lg-10">
<div class="main-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!-- 页面内容将插入此处 -->
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</form>
<!-- JS 引入 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
一个上左右的母页版
登录界面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="CarbonEmissionsSystem.CarbonWebPages.Login" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<title>用户登录 -.........</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<link href="login.css" rel="stylesheet" />
</head>
<body>
<!-- 系统名称 -->
<div class="system-title">
<h1>............</h1>
<p>................</p>
</div>
<!-- 时间显示 -->
<div class="time-display">
<i class="fas fa-clock"></i>
<span id="currentTime"></span>
</div>
<form id="form1" runat="server">
<div class="login-container">
<div class="login-header">
<i class="fas fa-leaf"></i>
</div>
<div class="mb-3">
<label for="txtUsername" class="form-label">用户名</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="请输入用户名" />
</div>
</div>
<div class="mb-3">
<label for="txtPassword" class="form-label">密码</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control" placeholder="请输入密码" />
</div>
</div>
<div class="mb-3">
<label for="ddlRole" class="form-label">用户类型</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-users-cog"></i></span>
<asp:DropDownList ID="ddlRole" runat="server" CssClass="form-select">
<asp:ListItem Text="普通用户" Value="user" />
<asp:ListItem Text="管理员" Value="admin" />
</asp:DropDownList>
</div>
</div>
<asp:Button ID="btnLogin" runat="server" Text="登 录" CssClass="btn btn-login w-100 mb-3" OnClick="btnLogin_Click" />
<div class="text-center">
<a href="Register.aspx" class="register-link">
<i class="fas fa-user-plus me-1"></i>还没有账号?立即注册
</a>
</div>
</div>
</form>
<!-- 关于开发者 -->
<div class="footer-info">
<a class="developer-link" id="developerBtn">
<i class="fas fa-info-circle"></i> 关于开发者
</a>
</div>
<!-- 开发者信息弹窗-模态弹窗(模态框) -->
<div class="modal-overlay" id="developerModal">
<div class="modal-content">
<span class="close-modal" id="closeModal">×</span>
<h4>关于开发者</h4>
<div id="developerInfoContent">
<p>................</p>
<p>开发者:............</p>
<p>.............</p>
<p>..................。</p>
</div>
</div>
</div>
<!-- 引入 Bootstrap 的 JS 功能(弹窗、按钮、模态框等) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 更新时间显示
function updateTime() {
const now = new Date();
const timeString = now.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
});
document.getElementById('currentTime').textContent = timeString;
}
updateTime();
setInterval(updateTime, 1000);
// 弹窗控制
document.getElementById('developerBtn').addEventListener('click', function () {
document.getElementById('developerModal').style.display = 'flex';
});
document.getElementById('closeModal').addEventListener('click', function () {
document.getElementById('developerModal').style.display = 'none';
});
window.addEventListener('click', function (event) {
if (event.target === document.getElementById('developerModal')) {
document.getElementById('developerModal').style.display = 'none';
}
});
</script>
</body>
</html>
login.css
/* 定义CSS变量,方便全局修改和管理样式 */
:root {
--primary-color: #2563eb; /* 主色调 - 蓝色 */
--primary-hover: #1d4ed8; /* 主色调悬停状态 - 深蓝色 */
--dark-color: #374151; /* 深色文字颜色 */
--glass-color: rgba(255, 255, 255, 0.92); /* 玻璃效果透明度 */
}
/* 全局页面样式 */
body {
/* 背景图片设置 */
background: url('../images/login-bg.jpg') no-repeat center center fixed;
background-size: cover; /* 背景图片覆盖整个页面 */
/* 字体设置 */
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
/* 布局设置 */
min-height: 100vh; /* 最小高度为视口高度 */
display: flex;
flex-direction: column; /* 垂直排列 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
/* 边距和定位 */
margin: 0;
padding: 20px;
position: relative;
color: #333; /* 默认文字颜色 */
}
/* 背景遮罩层 - 创建半透明渐变覆盖层 */
body::before {
content: ''; /* 伪元素必须内容 */
position: fixed; /* 固定定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 蓝紫色渐变背景 */
background: linear-gradient(135deg, rgba(28, 58, 148, 0.7), rgba(16, 42, 116, 0.8));
z-index: -1; /* 置于背景图片之上,内容之下 */
}
/* 系统标题样式 */
.system-title {
text-align: center; /* 文字居中 */
margin-bottom: 2rem; /* 下边距 */
color: white; /* 白色文字 */
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 文字阴影 */
}
/* 主标题样式 */
.system-title h1 {
font-size: 3.5rem; /* 大字号 */
margin: 0; /* 清除默认边距 */
font-weight: 700; /* 加粗 */
letter-spacing: 2px; /* 字母间距 */
}
/* 副标题样式 */
.system-title p {
font-size: 1.4rem; /* 较大字号 */
margin-top: 0.8rem; /* 上边距 */
font-weight: 300; /* 较轻的字重 */
}
/* 时间显示样式 */
.time-display {
position: absolute; /* 绝对定位 */
top: 25px; /* 距顶部距离 */
right: 25px; /* 距右侧距离 */
background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
color: #333; /* 文字颜色 */
padding: 10px 20px; /* 内边距 */
border-radius: 30px; /* 圆角 */
font-size: 1rem; /* 字号 */
font-weight: 500; /* 中等字重 */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/* 登录框容器样式 2 */
.login-container {
background: rgba(255, 255, 255, 0.58); /* 直接使用rgba调整透明度(0.85比原来更透明) */
border-radius: 16px;
padding: 28px 40px; /* 减少垂直内边距(padding)来降低高度 */
width: 100%;
max-width: 760px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18); /* 调整阴影更柔和 */
border: 1px solid rgba(255, 255, 255, 0.4); /* 边框更明显一些 */
backdrop-filter: blur(10px); /* 增加模糊度增强玻璃效果 */
margin: 20px auto 20px; /* 上边距10px(向上移动),下边距20px */
transform: translateY(-25px); /* 使用transform向上移动20px */
position: relative; /* 确保transform生效 */
}
/* 登录头部样式 */
.login-header {
text-align: center; /* 文字居中 */
margin-bottom: 0.5rem; /* 下边距 */
}
/* 登录图标样式 */
.login-header i {
font-size: 2.0rem; /* 大图标 */
color: var(--primary-color); /* 使用主色调 */
margin-bottom: 0.5rem; /* 下边距 */
}
/* 表单标签样式 */
.form-label {
font-weight: 600; /* 加粗 */
color: var(--dark-color); /* 使用深色文字 */
margin-bottom: 0.48rem; /* 下边距 */
font-size: 1rem; /* 标准字号 */
}
/* 输入框前缀样式 */
.input-group-text {
background-color: rgba(37, 99, 235, 0.1); /* 浅蓝色背景 */
border-color: rgba(37, 99, 235, 0.2); /* 边框颜色 */
color: var(--primary-color); /* 使用主色调 */
padding: 0.75rem; /* 内边距 */
}
/* 输入框和下拉框通用样式 */
.form-control, .form-select {
background-color: rgba(255, 255, 255, 0.95); /* 接近白色的背景 */
border-color: rgba(37, 99, 235, 0.2); /* 边框颜色 */
padding: 0.75rem; /* 内边距 */
font-size: 1rem; /* 标准字号 */
}
/* 登录按钮样式 */
.btn-login {
background-color: var(--primary-color); /* 使用主色调 */
color: white; /* 白色文字 */
padding: 0.75rem; /* 内边距 */
font-size: 1.1rem; /* 较大字号 */
font-weight: 600; /* 加粗 */
border: none; /* 无边框 */
border-radius: 8px; /* 圆角 */
margin-top: 1rem; /* 上边距 */
transition: all 0.3s; /* 过渡效果 */
width: 100%; /* 宽度100% */
}
/* 登录按钮悬停状态 */
.btn-login:hover {
background-color: var(--primary-hover); /* 使用悬停颜色 */
transform: translateY(-2px); /* 上移效果 */
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3); /* 阴影效果 */
}
/* 高亮文本样式 */
.highlight {
color: #86efac; /* 浅绿色 */
font-weight: 600; /* 加粗 */
}
/* 页脚信息样式 */
.footer-info {
position: fixed; /* 固定定位 */
bottom: 25px; /* 距底部距离 */
right: 25px; /* 距右侧距离 */
}
/* 开发者链接样式 */
.developer-link {
color: white; /* 白色文字 */
text-decoration: none; /* 无下划线 */
background: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
padding: 8px 16px; /* 内边距 */
border-radius: 20px; /* 圆角 */
font-size: 0.95rem; /* 较小字号 */
transition: all 0.3s; /* 过渡效果 */
border: 1px solid rgba(255, 255, 255, 0.1); /* 半透明边框 */
margin: 20px auto 20px; /* 上边距10px(向上移动),下边距20px */
}
/* 开发者链接悬停状态 */
.developer-link:hover {
background: rgba(0, 0, 0, 0.4); /* 加深背景 */
}
/* 模态框遮罩层 */
.modal-overlay {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
z-index: 1000; /* 置于顶层 */
}
/* 模态框内容样式 */
.modal-content {
background: white; /* 白色背景 */
padding: 2rem; /* 内边距 */
border-radius: 16px; /* 圆角 */
max-width: 500px; /* 最大宽度 */
width: 90%; /* 宽度90% */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}
/* 响应式设计 - 768px以下屏幕 */
@media (max-width: 768px) {
/* 调整系统标题大小 */
.system-title h1 {
font-size: 2.5rem;
}
/* 调整副标题大小 */
.system-title p {
font-size: 1.2rem;
}
/* 调整登录框内边距和宽度 */
.login-container {
padding: 30px;
max-width: 90%;
}
}
后端
using System; // 提供基本系统功能,如数据类型、事件、异常等。
using System.Data.SqlClient; // 用于连接和操作 SQL Server 数据库。
using System.Configuration; // 用于读取 Web.config 中的配置(如数据库连接字符串)。
namespace CarbonEmissionsSystem.CarbonWebPages
{
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 页面加载时执行(首次或回发),初始化操作
}
protected void btnLogin_Click(object sender, EventArgs e)//登录" 按钮后触发
{
string username = txtUsername.Text.Trim(); // 获取输入框中的用户名并去掉空格
string password = txtPassword.Text.Trim(); // 获取密码框中的密码
string selectedRole = ddlRole.SelectedValue; // 获取下拉框选择的角色(admin/user)
if (string.IsNullOrEmpty(username) || string.IsNullOrEmpty(password))
{
ShowAlert("请输入用户名和密码。");//若用户名或密码为空,则弹出警告并中断登录逻辑
return;
}
//读取名为 ConnStr 的数据库连接字符串
string ConnStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
using (SqlConnection conn = new SqlConnection(ConnStr))
{
conn.Open();
// 先判断用户名是否存在
string checkUserSql = "SELECT Password, Role, RealName FROM [User] WHERE Username = @Username";
SqlCommand cmd = new SqlCommand(checkUserSql, conn);
cmd.Parameters.AddWithValue("@Username", username);
SqlDataReader reader = cmd.ExecuteReader();
if (reader.Read()) // 有查询结果(用户存在)
{
// 用户名存在
string dbPassword = reader["Password"].ToString();
string dbRole = reader["Role"].ToString();
if (password == dbPassword)
{
// 判断选择的角色是否与数据库中角色一致
if (selectedRole != dbRole)
{
ShowAlert("选择的用户类型与用户名不匹配,请重新选择。");
return;
}
// 登录成功,设置 Session
Session["Username"] = username;
Session["Role"] = dbRole;
Session["RealName"] = reader["RealName"].ToString();
// 根据角色跳转不同首页(上-左-中框架)
if (dbRole == "admin")
Response.Redirect("~/CarbonWebPages/Admin/ManagerIndex.aspx");// 管理员跳转
else
Response.Redirect("~/CarbonWebPages/User/GlobalCO2Map.aspx");// 普通用户跳转
}
else
{
// 密码错误弹窗
ShowAlert("密码错误。");
}
}
else
{
// 用户名不存在弹窗
ShowAlert("用户名错误,请注册或重新输入。");
}
reader.Close();
}
}
/// <param name="message">提示信息文本ShowAlert 方法:弹窗提示封装</param>
private void ShowAlert(string message)// JavaScript 弹窗。例如输入错误、角色不匹配等情况都调用这个函数
{
string script = $@"
<script type='text/javascript'>
alert('{message}');
</script>";
ClientScript.RegisterStartupScript(this.GetType(), "alertMessage", script);
}
}
}
注册界面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="CarbonEmissionsSystem.CarbonWebPages.Register" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<title>碳排放系统 - 用户注册</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<!-- 自定义样式 -->
<link href="register.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server" novalidate>
<div class="register-container shadow-lg">
<h2><i class="fas fa-user-plus me-2"></i>用户注册</h2>
<div class="form-grid">
<!-- 第一行 -->
<div class="form-group">
<label class="form-label required" for="<%= txtUsername.ClientID %>">
<i class="fas fa-user"></i>用户名
</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="请输入用户名" />
</div>
<asp:RequiredFieldValidator ID="rfvUsername" runat="server"
ControlToValidate="txtUsername"
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 用户名不能为空"
Display="Dynamic"
CssClass="validation-error" />
</div>
<div class="form-group">
<label class="form-label required" for="<%= txtRealName.ClientID %>">
<i class="fas fa-id-card"></i>真实姓名
</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-id-card"></i></span>
<asp:TextBox ID="txtRealName" runat="server" CssClass="form-control" placeholder="请输入真实姓名" />
</div>
<asp:RequiredFieldValidator ID="rfvRealName" runat="server"
ControlToValidate="txtRealName"
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 真实姓名不能为空"
Display="Dynamic"
CssClass="validation-error" />
</div>
<!-- 第二行 -->
<div class="form-group">
<label class="form-label required" for="<%= txtPassword.ClientID %>">
<i class="fas fa-lock"></i>密码
</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control" placeholder="至少8位字符" />
</div>
<div class="password-strength">
<div class="password-strength-bar" id="passwordStrengthBar"></div>
</div>
<asp:RequiredFieldValidator ID="rfvPassword" runat="server"
ControlToValidate="txtPassword"
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 密码不能为空"
Display="Dynamic"
CssClass="validation-error" />
</div>
<div class="form-group">
<label class="form-label required" for="<%= ddlGender.ClientID %>">
<i class="fas fa-venus-mars"></i>性别
</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-venus-mars"></i></span>
<asp:DropDownList ID="ddlGender" runat="server" CssClass="form-select">
<asp:ListItem Text="请选择性别" Value="" />
<asp:ListItem Text="男" Value="男" />
<asp:ListItem Text="女" Value="女" />
</asp:DropDownList>
</div>
<asp:RequiredFieldValidator ID="rfvGender" runat="server"
ControlToValidate="ddlGender"
InitialValue=""
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 请选择性别"
Display="Dynamic"
CssClass="validation-error" />
</div>
<!-- 第三行 -->
<div class="form-group">
<label class="form-label required" for="<%= txtConfirmPassword.ClientID %>">
<i class="fas fa-check-circle"></i>确认密码
</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-check-circle"></i></span>
<asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" CssClass="form-control" placeholder="再次输入密码" />
</div>
<asp:RequiredFieldValidator ID="rfvConfirmPassword" runat="server"
ControlToValidate="txtConfirmPassword"
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 请再次输入密码"
Display="Dynamic"
CssClass="validation-error" />
<asp:CompareValidator ID="cvPasswords" runat="server"
ControlToValidate="txtConfirmPassword"
ControlToCompare="txtPassword"
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 两次输入的密码不一致"
Display="Dynamic"
CssClass="validation-error" />
</div>
<div class="form-group">
<label class="form-label required" for="<%= txtPhone.ClientID %>">
<i class="fas fa-phone"></i>联系电话
</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-phone"></i></span>
<asp:TextBox ID="txtPhone" runat="server" CssClass="form-control" placeholder="请输入11位手机号码" />
</div>
<asp:RequiredFieldValidator ID="rfvPhone" runat="server"
ControlToValidate="txtPhone"
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 电话不能为空"
Display="Dynamic"
CssClass="validation-error" />
<asp:RegularExpressionValidator ID="revPhone" runat="server"
ControlToValidate="txtPhone"
ValidationExpression="^\d{11}$"
ErrorMessage="<i class='fas fa-exclamation-circle'></i> 请输入11位数字的手机号码"
Display="Dynamic"
CssClass="validation-error" />
</div>
</div>
<asp:Button ID="btnRegister" runat="server" Text="立即注册"
CssClass="btn btn-primary btn-register"
OnClick="btnRegister_Click" />
<!-- <div class="text-center mt-3 text-muted full-width" style="font-size: 0.85rem;">
注册即表示您同意我们的<a href="#" class="text-decoration-none">服务条款</a>和<a href="#" class="text-decoration-none">隐私政策</a>
</div> -->
<a href="Login.aspx" class="login-link" tabindex="0">
<i class="fas fa-sign-in-alt"></i> 已有账号?点击登录
</a>
</div>
</form>
<!-- 添加密码强度检测的简单JavaScript -->
<script>
document.getElementById('<%= txtPassword.ClientID %>').addEventListener('input', function (e) {
var password = e.target.value;
var strengthBar = document.getElementById('passwordStrengthBar');
var strength = 0;
if (password.length > 0) strength += 20;
if (password.length >= 8) strength += 20;
if (/[A-Z]/.test(password)) strength += 20;
if (/[0-9]/.test(password)) strength += 20;
if (/[^A-Za-z0-9]/.test(password)) strength += 20;
strengthBar.style.width = strength + '%';
if (strength < 40) {
strengthBar.style.backgroundColor = '#e63757'; // 弱
} else if (strength < 80) {
strengthBar.style.backgroundColor = '#f6c343'; // 中
} else {
strengthBar.style.backgroundColor = '#00d97e'; // 强
}
});
</script>
</body>
</html>
样式
:root {
--primary-color: #2c7be5;
--primary-hover: #1a68d1;
--secondary-color: #6c757d;
--success-color: #00d97e;
--danger-color: #e63757;
--light-color: #f9fafd;
--dark-color: #12263f;
--border-radius: 8px;
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
body {
background: linear-gradient(135deg, rgba(44, 123, 229, 0.1) 0%, rgba(44, 123, 229, 0.05) 100%), url('../images/login-bg.jpg') no-repeat center center fixed;
background-size: cover;
font-family: 'Segoe UI', '微软雅黑', Arial, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: var(--dark-color);
}
.register-container {
background-color: rgba(255, 255, 255, 0.98);
padding: 2.5rem 3rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
max-width: 800px;
width: 100%;
transition: var(--transition);
border: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.register-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--success-color));
}
.register-container:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
h2 {
font-weight: 700;
color: var(--primary-color);
margin-bottom: 2rem;
text-align: center;
position: relative;
padding-bottom: 1rem;
grid-column: 1 / -1;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--success-color));
border-radius: 3px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.form-group {
margin-bottom: 0;
}
label.form-label {
font-weight: 600;
font-size: 0.9rem;
position: relative;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
color: var(--dark-color);
}
label.form-label i {
margin-right: 8px;
color: var(--primary-color);
font-size: 0.9rem;
}
/* 必填星号 */
label.form-label.required::after {
content: " *";
color: var(--danger-color);
font-weight: 700;
position: absolute;
right: -12px;
}
/* 输入框样式 */
.form-control, .form-select {
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
border: 1px solid #e3ebf6;
font-size: 0.95rem;
transition: var(--transition);
background-color: var(--light-color);
width: 100%;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
outline: none;
background-color: #fff;
}
/* 输入组图标 */
.input-group-text {
background-color: #e3ebf6;
border: none;
color: var(--primary-color);
}
/* 验证错误提示样式 */
.validation-error {
color: var(--danger-color);
font-size: 0.8rem;
margin-top: 0.3rem;
display: flex;
align-items: center;
}
.validation-error i {
margin-right: 5px;
font-size: 0.8rem;
}
/* 按钮样式 */
.btn-register {
background-color: var(--primary-color);
color: white;
border: none;
font-size: 1rem;
font-weight: 600;
padding: 0.8rem;
border-radius: var(--border-radius);
width: 100%;
transition: var(--transition);
margin-top: 1.5rem;
letter-spacing: 0.5px;
text-transform: uppercase;
position: relative;
overflow: hidden;
grid-column: 1 / -1;
}
.btn-register:hover, .btn-register:focus {
background-color: var(--primary-hover);
box-shadow: 0 5px 15px rgba(44, 123, 229, 0.4);
transform: translateY(-2px);
}
.btn-register:active {
transform: translateY(0);
}
/* 登录链接 */
.login-link {
display: block;
text-align: center;
margin-top: 1.5rem;
font-weight: 500;
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
font-size: 0.95rem;
grid-column: 1 / -1;
}
.login-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
/* 密码强度指示器 */
.password-strength {
margin-top: 0.5rem;
height: 5px;
background-color: #e9ecef;
border-radius: 5px;
overflow: hidden;
}
.password-strength-bar {
height: 100%;
width: 0;
background-color: var(--danger-color);
transition: width 0.3s ease;
}
/* 全宽项目 */
.full-width {
grid-column: 1 / -1;
}
/* 响应式调整 */
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.register-container {
padding: 2rem 1.5rem;
max-width: 500px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
}
后端
using System;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI;
namespace CarbonEmissionsSystem.CarbonWebPages
{
public partial class Register : Page
{
protected void Page_Load(object sender, EventArgs e) { }
protected void btnRegister_Click(object sender, EventArgs e)
{
// 获取用户输入
string username = txtUsername.Text.Trim();
string password = txtPassword.Text.Trim();
string confirmPassword = txtConfirmPassword.Text.Trim();
string realName = txtRealName.Text.Trim();
string gender = ddlGender.SelectedValue;
string phone = txtPhone.Text.Trim();
// 校验两次密码是否一致
if (password != confirmPassword)
{
ShowAlert("两次密码输入不一致!");
return;
}
// 连接数据库
string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connStr))
{
conn.Open();
// 检查用户名是否已存在
string checkSql = "SELECT COUNT(*) FROM [User] WHERE Username = @Username";
SqlCommand checkCmd = new SqlCommand(checkSql, conn);
checkCmd.Parameters.AddWithValue("@Username", username);
int count = (int)checkCmd.ExecuteScalar();
if (count > 0)
{
ShowAlert("用户名已存在,请更换!");
return;
}
// 插入新用户记录,默认角色为普通用户
string insertSql = "INSERT INTO [User] (Username, Password, RealName, Gender, Role, Phone) " +
"VALUES (@Username, @Password, @RealName, @Gender, 'user', @Phone)";
SqlCommand insertCmd = new SqlCommand(insertSql, conn);
insertCmd.Parameters.AddWithValue("@Username", username);
insertCmd.Parameters.AddWithValue("@Password", password);
insertCmd.Parameters.AddWithValue("@RealName", realName);
insertCmd.Parameters.AddWithValue("@Gender", gender);
insertCmd.Parameters.AddWithValue("@Phone", phone);
insertCmd.ExecuteNonQuery();
// 注册成功后弹窗并跳转到登录页
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('注册成功!即将跳转到登录页面。');window.location='Login.aspx';", true);
}
}
/// <summary>
/// 公用弹窗提示方法
/// </summary>
private void ShowAlert(string message)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", $"alert('{message}');", true);
}
}
}
这几个感觉就是在任意系统中比较通用