Document

【零基础入门网站开发】deepseek零基础开发登录注册系统

2025-02-18
dfer
5
html5 CSDN

【零基础入门网站开发】deepseek零基础开发登录注册系统

1.在网上搜索想要的网页进行截图，将不想要的元素打马赛克。
2.向deeepeek输入提示词语和截图,等待生成。结果如下所示：
3.将deepseek生成的HTML拷贝到html文件中，效果图如下：
4.欢迎大家加入到深度学习和LLM交流群，QQ:1029629549

1.在网上搜索想要的网页进行截图，将不想要的元素打马赛克。

在这里插入图片描述

2.向deeepeek输入提示词语和截图,等待生成。结果如下所示：

提示词：优化登录注册页面，进行css优化，并且可通过flask框架进行部署，数据存到sqlalchemy数据库中

在这里插入图片描述

3.将deepseek生成的HTML拷贝到html文件中，效果图如下：

经过deepseek的生成，将代码如下结构图拷贝，得到的效果图：

auth_system/
├── app.py
├── models.py
├── templates/
│   ├── base.html
│   ├── login.html
│   └── register.html
├── static/
│   └── auth.css
└── requirements.txt

Flask应用 (app.py)

from flask import Flask, render_template, request, redirect, url_for, flash
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash, check_password_hash
from models import db, User

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///auth.db'
app.config['SECRET_KEY'] = 'your-secret-key-here'
db.init_app(app)

@app.route('/')
def home():
    return redirect(url_for('login'))

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        remember = True if request.form.get('remember') else False
        
        user = User.query.filter_by(username=username).first()
        
        if not user or not check_password_hash(user.password_hash, password):
            flash('用户名或密码错误', 'error')
            return redirect(url_for('login'))
            
        # 实际应使用Flask-Login管理会话
        flash('登录成功', 'success')
        return redirect(url_for('dashboard'))
        
    return render_template('login.html')

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        
        if User.query.filter_by(username=username).first():
            flash('用户名已存在', 'error')
            return redirect(url_for('register'))
            
        new_user = User(
            username=username,
            password_hash=generate_password_hash(password)
        )
        db.session.add(new_user)
        db.session.commit()
        
        flash('注册成功，请登录', 'success')
        return redirect(url_for('login'))
    
    return render_template('register.html')

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=False)

数据库模型 (models.py)
python

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password_hash = db.Column(db.String(128), nullable=False)
    created_at = db.Column(db.DateTime, default=db.func.now())

基础模板 (templates/base.html)

<!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="{{ url_for('static', filename='auth.css') }}">
</head>
<body>
    <div class="auth-container">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="alert-box">
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        
        {% block content %}{% endblock %}
        
        <footer class="auth-footer">
            © 2024 智能AI助手 | 网络开发部
        </footer>
    </div>
</body>
</html>

登录页面 (templates/login.html)

{% extends "base.html" %}

{% block content %}
<div class="auth-card">
    <h2 class="auth-title">用户登录</h2>
    
    <form method="POST" class="auth-form">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required autofocus>
        </div>
        
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>
        </div>
        
        <div class="form-options">
            <label class="remember-me">
                <input type="checkbox" name="remember"> 记住我
            </label>
            <a href="/forgot-password" class="forgot-password">忘记密码？</a>
        </div>
        
        <button type="submit" class="auth-button">登录</button>
    </form>
    
    <div class="auth-switch">
        没有账号？ <a href="{{ url_for('register') }}">立即注册</a>
    </div>
</div>
{% endblock %}

注册页面 (templates/register.html)

{% extends "base.html" %}

{% block content %}
<div class="auth-card">
    <h2 class="auth-title">新用户注册</h2>
    
    <form method="POST" class="auth-form">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>
        </div>
        
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>
        </div>
        
        <button type="submit" class="auth-button">立即注册</button>
    </form>
    
    <div class="auth-switch">
        已有账号？ <a href="{{ url_for('login') }}">立即登录</a>
    </div>
</div>
{% endblock %}

CSS优化 (static/auth.css)

:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    --background: #f8f9fa;
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

body {
    font-family: 'Segoe UI', system-ui;
    background: var(--background);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.auth-card {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.auth-title {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 2rem;
}

.auth-form .form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-weight: 500;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: var(--transition);
}

input:focus {
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
}

.forgot-password {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.9rem;
}

.auth-button {
    width: 100%;
    padding: 1rem;
    background: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.auth-button:hover {
    background: #2980b9;
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    color: #666;
}

.auth-switch a {
    color: var(--secondary-color);
    text-decoration: none;
}

.alert-box {
    margin-bottom: 1.5rem;
}

.alert {
    padding: 0.8rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.alert-success {
    background: #d4edda;
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
}

.auth-footer {
    text-align: center;
    margin-top: 2rem;
    color: #666;
    font-size: 0.9rem;
}

在这里插入图片描述

4.欢迎大家加入到深度学习和LLM交流群，QQ:1029629549

上一篇：几秒钟就充满电！科学

下一篇：暂无数据