Flask 小專案範例

包含：

  • 註冊帳號（存到 SQLite）
  • 登入/登出（用 Flask-Login 管理）
  • 密碼加密（用 Flask-Bcrypt）
  • 基本會員頁面保護（沒登入進不去）

超簡單版，保證 5 分鐘跑起來！

📂 專案目錄結構

/flask_app
    app.py
    /templates
        login.html
        register.html
        member.html

📜 1. app.py（主程式）

from flask import Flask, render_template, redirect, request, url_for
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
from flask_bcrypt import Bcrypt

app = Flask(__name__)
app.secret_key = 'your_secret_key'

# 資料庫設定
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)

# 登入管理設定
login_manager = LoginManager()
login_manager.login_view = 'login'
login_manager.init_app(app)

# 密碼加密
bcrypt = Bcrypt(app)

# 使用者資料表
class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(150), unique=True, nullable=False)
    password = db.Column(db.String(150), nullable=False)

# 載入使用者
@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))

# 首頁（登入頁面）
@app.route('/')
def login():
    return render_template('login.html')

# 註冊頁面
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        hashed_password = bcrypt.generate_password_hash(password).decode('utf-8')
        
        user = User(username=username, password=hashed_password)
        db.session.add(user)
        db.session.commit()
        
        return redirect('/')
    return render_template('register.html')

# 登入處理
@app.route('/login', methods=['POST'])
def login_post():
    username = request.form['username']
    password = request.form['password']
    
    user = User.query.filter_by(username=username).first()
    
    if user and bcrypt.check_password_hash(user.password, password):
        login_user(user)
        return redirect('/member')
    else:
        return redirect('/')

# 會員頁（需要登入才能進來）
@app.route('/member')
@login_required
def member():
    return render_template('member.html', name=current_user.username)

# 登出
@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect('/')

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

📜 2. templates/login.html

<!DOCTYPE html>
<html>
<head>
    <title>登入</title>
</head>
<body>
    <h1>登入</h1>
    <form action="/login" method="post">
        <input type="text" name="username" placeholder="帳號" required>
        <br><br>
        <input type="password" name="password" placeholder="密碼" required>
        <br><br>
        <button type="submit">登入</button>
    </form>
    <br>
    <a href="/register">還沒有帳號？註冊</a>
</body>
</html>

📜 3. templates/register.html

<!DOCTYPE html>
<html>
<head>
    <title>註冊</title>
</head>
<body>
    <h1>註冊帳號</h1>
    <form action="/register" method="post">
        <input type="text" name="username" placeholder="帳號" required>
        <br><br>
        <input type="password" name="password" placeholder="密碼" required>
        <br><br>
        <button type="submit">註冊</button>
    </form>
    <br>
    <a href="/">已有帳號？登入</a>
</body>
</html>

📜 4. templates/member.html

<!DOCTYPE html>
<html>
<head>
    <title>會員專區</title>
</head>
<body>
    <h1>歡迎，{{ name }}！</h1>
    <a href="/logout">登出</a>
</body>
</html>

✅ 完成後會有這些功能：

  • 註冊新帳號（密碼加密存入 SQLite）
  • 登入時比對加密密碼
  • 登入後才能進會員頁
  • 登出後會員頁無法直接訪問

🔥 安裝需要的套件（全部）

在你的專案資料夾下安裝：

pip install flask flask_sqlalchemy flask_login flask_bcrypt

🎯 小提醒

  • db.create_all() 只需要在第一次啟動時建立資料表。
  • 之後如果改了資料表，要用更進階的 Flask-Migrate（可以之後再學）。

🚀 小專案練習建議

  • 自己註冊幾個不同帳號試試看。
  • 改一改登入頁、會員頁，加上自己的版型。
  • 加驗證，比如「不能註冊重複帳號」。
  • 額外練習：用 Flask-WTF 替表單加強驗證！
文章標籤
全站熱搜
創作者介紹
創作者 liusming 的頭像
liusming

劉老師的跨域創想工坊

liusming 發表在 痞客邦 留言(1) 人氣(12)