web系统（asp.net和C#）

敲敲敲-敲代码2025-10-03 8:35
复制代码 
<%@ 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">&times;</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);
        }
    }
}

这几个感觉就是在任意系统中比较通用

相关推荐
像是套了虚弱散7 小时前
DevEco Studio与Web联合开发：打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan7 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇7 小时前
【完整源码+数据集+部署教程】【天线＆水】舰船战舰检测与分类图像分割系统源码＆数据集全套：改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追8 小时前
Vue组件化开发
前端·html
艾德金的溪9 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长9 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
前端·数据库·vue.js
@PHARAOH9 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴9 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH307310 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）082025软件测试面试八股文（含答案+文档）09Labelme从安装到标注：零基础完整指南10【vue篇】Vue 项目中的静态资源管理：assets vs static 终极指南