使用 Flask 实现简单的登录注册功能

目录

[1. 引言](#1. 引言)

[2. 环境准备](#2. 环境准备)

[3. 数据库设置](#3. 数据库设置)

[4. Flask 应用基本配置](#4. Flask 应用基本配置)

[5. 实现用户注册](#5. 实现用户注册)

[6. 实现用户登录](#6. 实现用户登录)

[7. 路由配置](#7. 路由配置)

[8. 创建前端页面](#8. 创建前端页面)

[9. 结论](#9. 结论)

---

1. 引言

在这篇文章中，我们将使用 Flask 框架创建一个简单的登录和注册系统。Flask 是一个轻量级的 Python Web 框架，适合快速开发 Web 应用。

2. 环境准备

• 安装 Flask：可以通过 pip 安装 Flask 和相关依赖：

  pip install Flask 
  

  以下是具体配置

from flask import Flask, render_template, request, render_template_string, redirect, url_for
from flask_mysqldb import MySQL
from werkzeug.security import generate_password_hash, check_password_hash
from config import Config  # 导入配置文件

• 

• 创建项目结构：

  flask_demologin/
  ├── app.py
  ├── config.py
  ├── templates/
  │   ├── login.html
  │   ├── res.html
  │   └── index.html
  └── static/
      └── css/
      └── img/

3. 数据库设置

• 使用 MySQL ：

  • 创建数据库及用户表。

    CREATE DATABASE demologin;
    USE demologin;

    CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
    );

4. Flask 应用基本配置

• config.py 文件配置数据库连接：

  class Config:
  MYSQL_HOST = 'localhost'
  MYSQL_USER = 'root'  # 替换为你的 MySQL 用户名
  MYSQL_PASSWORD = 'root'  # 替换为你的 MySQL 密码
  MYSQL_DB = 'demologin' # 替换为你的 数据库名称
  

5. 实现用户注册

• 在 app.py 中创建注册路由 ：

  @app.route('/register', methods=['POST'])
  def register():
      name = request.form.get('username')
      pwd = request.form.get('password')
  
      if not name or not pwd:
          return render_template_string("用户名和密码不能为空，<a href='/'>返回登录</a>"), 400
  
      cur = mysql.connection.cursor()
      cur.execute("SELECT * FROM users WHERE username = %s", (name,))
      user = cur.fetchone()
  
      if user:
          return render_template_string("用户名已存在，<a href='/'>返回登录</a>"), 400
  
      hashed_pwd = generate_password_hash(pwd)
      cur.execute("INSERT INTO users (username, password) VALUES (%s, %s)", (name, hashed_pwd))
      mysql.connection.commit()
      cur.close()
  
      return render_template_string("注册成功,<a href='/'>返回登录</a>"), 201

6. 实现用户登录

• 在 app.py 中创建登录路由 ：

  @app.route('/login', methods=['POST'])
  def login():
      name = request.form.get('username')
      pwd = request.form.get('password')
  
      if not name or not pwd:
          return render_template_string("用户名和密码不能为空，<a href='/'>返回注册</a>"), 400
  
      cur = mysql.connection.cursor()
      cur.execute("SELECT * FROM users WHERE username = %s", (name,))
      user = cur.fetchone()
  
      if user and check_password_hash(user[2], pwd):  # user[2] 是密码字段
          return redirect(url_for('home'))  # 登录成功，重定向到主页
      else:
          return "用户名或密码错误", 401
  

7. 路由配置

• 设置首页和重定向 ：

  @app.route('/')
  def home():
      return render_template('index.html')  # 渲染主页模板
  

  • 设置登录页面和注册页面和重定向：

    @app.route('/')
    def Index_login(): # put application's code here
    return render_template('login.html')

    @app.route('/res')
    def Index_res(): # put application's code here
    return render_template('res.html')

8. 创建前端页面

• login.html 和 res.html 的简单示例：

  <!-- login.html -->
  <div class="cont-parent"> 
          <div class="cont">
              <div class="form sign-in">
                  <h2>Welcome back, Doctor</h2>
                  <form action="/login" method="post">
                      <label>
                          <span>用户名</span>
                          <input type="text" name="username" placeholder="Username" required/>
                      </label>
                      <label>
                          <span>密码</span>
                          <input type="password" name="password" placeholder="Password" required/>
                      </label>
                      <button type="submit" class="submit">登录</button>
                  </form>
                  <p class="forgot-pass">忘记密码?</p>
                  <button type="button" class="fb-btn">链接 <span>facebook</span></button>
              </div>
              <div class="sub-cont">
                  <div class="img">
                      <div class="img__text m--up">
                          <h2>刚来?</h2>
                          <p>那就<a href="/res">注册</a>一个吧!</p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  
  <!-- res.html -->
  <div class="cont-parent"> 
      <div class="cont">
          <div class="form sign-in">
              <h2>Time to feel like home,</h2>
              <form action="/register" method="post">
                      <label>
                          <span>用户名</span>
                          <input type="text" name="username" placeholder="Username" required/>
                      </label>
                      <label>
                          <span>密码</span>
                          <input type="password" name="password" placeholder="Password" required/>
                      </label>
                      <button type="submit" class="submit">注册</button>
              </form>
                  <button type="button" class="fb-btn">Join with <span>facebook</span></button>
          </div>
          <div class="sub-cont">
              <div class="img">
                  <div class="img__text m--up">
                      <h2>已经有账号了?</h2>
                      <p>那就去<a href="/">登录</a>吧!</p>
                  </div>
  
              </div>
              
      </div>
      </div>
      </div>

9. 结论

通过本文，我们实现了一个基本的登录和注册功能。

以下是实现的效果图（前端靠大家自由发挥，提供的html代码进作为参考）