注意：以下所提供的代码是使用pycharm软件运行的。

（1）首先，需要在数据库中创建关联的用户数据表（使用手机号和密码登录进入主页面）：

from django.db import models
from django.contrib.auth.models import AbstractUser


class Studentuser(AbstractUser):

    student_profile = models.OneToOneField(
        'Student',
        on_delete=models.CASCADE,
        null=True,
        blank=True
    )
    role = models.CharField('角色', max_length=1, choices=[('1', '普通用户'), ('2', '管理员')], default='1')
    phone_number = models.CharField('手机号', max_length=11, unique=True, null=True, blank=True)

    class Meta:
        db_table = 'studentuser'

注意：数据表中创建了角色role，分为普通用户，管理员用户。如果不需要，可去除。

（2）在views.py文件中写入所需登录注册逻辑函数：

def register_view(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        confirm_password = request.POST.get('confirm_password')
        role = request.POST.get('role')  # 获取角色值
        phone_number = request.POST.get('phone_number')
        if password != confirm_password:
            messages.error(request, '两次输入的密码不一致')
            return redirect('register')

        if Studentuser.objects.filter(username=username).exists():
            messages.error(request, '该用户名已存在')
            return redirect('register')

        if Studentuser.objects.filter(phone_number=phone_number).exists():
            messages.error(request, '该手机号已被注册')
            return redirect('register')

            # 创建用户时指定 role 和 phone_number 字段
        user = Studentuser.objects.create_user(
            username=username,
            password=password,
            role=role,
            phone_number=phone_number
        )
        user.save()
        messages.success(request, '注册成功，请登录')
        return redirect('login')

    return render(request, 'regit.html')


def login_view(request):
    if request.method == 'POST':
        phone_number = request.POST.get('phone_number')
        password = request.POST.get('password')
        try:
            user = Studentuser.objects.get(phone_number=phone_number)
            if user.check_password(password):
                login(request, user)
                return redirect('home')
            else:
                messages.error(request, '手机号或密码错误')
        except Studentuser.DoesNotExist:
            messages.error(request, '手机号或密码错误')
    return render(request, 'login.html')

注意：只是提供了逻辑函数代码，import、from前缀根据个人情况填写。

（3）登录界面实现（login.html）

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css'%}">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        /* 线条背景容器 */
        .bg-lines {
            position: fixed;
            width: 100%;
            height: 100vh;
            z-index: -2; /* 比原有背景低一层 */
            pointer-events: none;
        }

        /* 背景容器 */
        .bg-container {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #e0f2f1, #b2ebf2, #81d4fa);
            overflow: hidden;
            z-index: -1;
            mix-blend-mode: multiply; /* 混合模式 */
        }

        /* 背景粒子 */
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: rgba(139, 233, 253, 0.3);
            border-radius: 50%;
            animation: float 3s linear infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* 登录容器 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: transparent;
            padding: 20px;
        }

        .login-container {
            background: white;
            padding: 35px 40px;
            border-radius: 15px;
            box-shadow: 0 8px 24px rgba(128, 186, 239, 0.2);
            width: 100%;
            max-width: 450px;
            transition: transform 0.3s ease;
        }

        .login-container:hover {
            transform: translateY(-5px);
        }

        /* 标题样式 */
        .login-title {
            text-align: center;
            font-size: 2.2rem;
            color: #1a73e8;
            margin-bottom: 30px;
            font-weight: 600;
            position: relative;
        }

        .login-title::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -8px;
            width: 60px;
            height: 3px;
            background: #1a73e8;
            transform: translateX(-50%);
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 0.9rem;
            color: #5f6368;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-control {
            height: 48px;
            font-size: 1rem;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 0 15px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: #1a73e8;
            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
        }

        /* 按钮样式 */
        .btn-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
        }

        .login-btn {
            background: linear-gradient(180deg, #1a73e8, #1559b3);
            color: white;
            font-size: 1rem;
            font-weight: 500;
            padding: 12px 35px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
        }

        .register-btn {
            color: #1a73e8;
            font-size: 0.9rem;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .register-btn:hover {
            color: #115293;
        }
    </style>
</head>

<body>

    <!-- 线条背景 -->
    <canvas class="bg-lines" id="linesCanvas"></canvas>

    <!-- 动态背景 -->
    <div class="bg-container">
        <div class="particle" style="left: 10%; animation-delay: 0.5s;"></div>
        <div class="particle" style="left: 30%; animation-delay: 1.2s;"></div>
        <div class="particle" style="left: 50%; animation-delay: 0.8s;"></div>
        <div class="particle" style="left: 70%; animation-delay: 1.5s;"></div>
        <div class="particle" style="left: 90%; animation-delay: 0.3s;"></div>
    </div>

    <div class="login-container">
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
        <h2 class="login-title">用户登录</h2>
        <form method="post" action="{% url 'login' %}" class="mt-4">
            {% csrf_token %}
            <div class="form-group">
                <label class="form-label" for="phone_number">手机号</label>
                <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="请输入手机号" required>
            </div>
            <div class="form-group">
                <label class="form-label" for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <div class="btn-group">
                <button type="submit" class="login-btn">登录</button>
                <a href="{% url 'register' %}" class="register-btn" onclick="redirectToRegister()">立即注册</a>
            </div>
        </form>
    </div>

    <script>

         // 华丽线条绘制逻辑
        const canvas = document.getElementById('linesCanvas');
        const ctx = canvas.getContext('2d');

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        function drawLines() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 线条样式配置
            const lineConfig = {
                count: 8,          // 线条数量
                maxAmplitude: 120, // 最大波动幅度
                lineWidth: 2,      // 线条粗细
                speed: 0.002,      // 动画速度
                colors: ['rgba(100, 181, 246, 0.15)', 'rgba(156, 204, 101, 0.15)', 'rgba(255, 183, 77, 0.15)']
            };

            const time = Date.now() * lineConfig.speed;

            for(let i = 0; i < lineConfig.count; i++) {
                ctx.beginPath();
                ctx.moveTo(0, canvas.height/2);

                // 创建波浪路径
                for(let x = 0; x <= canvas.width; x += 5) {
                    const y = canvas.height/2 + Math.sin(x * 0.01 + time + i) * lineConfig.maxAmplitude * Math.sin(time*0.5);
                    ctx.lineTo(x, y);
                }

                // 样式设置
                ctx.strokeStyle = lineConfig.colors[i % lineConfig.colors.length];
                ctx.lineWidth = lineConfig.lineWidth;
                ctx.stroke();
            }

            requestAnimationFrame(drawLines);
        }

        // 初始化
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        drawLines();

        // 鼠标浮动视差效果
        const bgContainer = document.querySelector('.bg-container');
        document.addEventListener('mousemove', (e) => {
            const x = e.clientX / window.innerWidth;
            const y = e.clientY / window.innerHeight;

            bgContainer.style.backgroundPosition = `calc(-${x * 100}px) calc(-${y * 100}px)`;

            // 粒子跟随效果（可选增强）
            const particles = document.querySelectorAll('.particle');
            particles.forEach((particle, index) => {
                const speed = 0.5 + index * 0.1;
                particle.style.left = `calc(${x * 100}% + ${(Math.random() - 0.5) * 20}px)`;
                particle.style.top = `calc(${y * 100}% + ${(Math.random() - 0.5) * 20}px)`;
                particle.style.opacity = 1 - Math.abs(x - 0.5) * 2;
            });
        });

    </script>
</body>

</html>

注意：上面给的代码实现界面样式和布局可根据自己需要修改

（4）注册界面实现（regit.html）

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <style>
        :root {
            --primary-color: #4361ee;
            --hover-color: #3f37c9;
            --background-blur: 8px;
        }

        body {
            background-image: url('{% static "img/66.jpg" %}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 2rem;
            position: relative;
        }

        .register-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(var(--background-blur));
            border-radius: 1.5rem;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            padding: 2.5rem;
            width: 100%;
            max-width: 460px;
            margin: auto;
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: transform 0.3s ease;
        }

        .register-container:hover {
            transform: translateY(-5px);
        }

        .form-label {
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .form-control {
            border: 2px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 0.75rem 1.25rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }

        .btn-primary {
            background: var(--primary-color);
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: var(--hover-color);
            transform: translateY(-2px);
        }

        .form-footer {
            margin-top: 1.5rem;
            text-align: center;
            color: #6b7280;
        }

        .form-footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .form-footer a:hover {
            color: var(--hover-color);
        }

        .password-requirements {
            color: #6b7280;
            font-size: 0.85rem;
            margin: 0.5rem 0;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <!-- 消息提示区域 -->
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}

        <h2 class="text-center mb-4" style="color: #1f2937; font-weight: 700; margin-top: -1rem;">
            创建新账户
        </h2>

        <form method="post" action="{% url 'register' %}" id="registerForm">
            {% csrf_token %}
            <div class="mb-4">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" name="username"
                       placeholder="请输入用户名" required>
                <small class="text-muted">请输入正确的用户名</small>
            </div>

            <!-- 新增角色选择 -->
            <div class="mb-4">
                <label for="role" class="form-label">用户角色</label>
                <select class="form-select" id="role" name="role" required>
                    <option value="" selected disabled>请选择角色</option>
                    <option value="1">普通用户</option>
                    <option value="2">管理员</option>
                </select>
            </div>

             <div class="mb-4">
                <label for="phone_number" class="form-label">手机号</label>
                <input type="text" class="form-control" id="phone_number" name="phone_number"
                       placeholder="请输入手机号" required>
            </div>

            <div class="mb-4">
                <label for="password" class="form-label">登录密码</label>
                <input type="password" class="form-control" id="password" name="password"
                       placeholder="请输入1-20位密码" required>
                <div class="password-requirements">
                    可包含字母、数字和特殊符号（@$!%*?&）
                </div>
            </div>

            <div class="mb-4">
                <label for="confirm_password" class="form-label">确认密码</label>
                <input type="password" class="form-control" id="confirm_password"
                       name="confirm_password" placeholder="请再次输入密码" required>
            </div>

            <button type="submit" class="btn btn-primary w-100">
                立即注册
            </button>
        </form>

        <div class="form-footer">
            已有账户？ <a href="{% url 'login' %}">返回登录</a>
        </div>
    </div>

    <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>

注意：body样式代码中关联了img目录下66.jpg背景图片，可修改成已有的其他照片。

# html # css # 数据库 # pycharm # django
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区