Flask 功能使用總結與完整示例

一、Flask 核心功能總結

Flask 是輕量級 Web 框架，核心功能包括：

• 路由系統：通過 ?@app.route? 裝飾器定義 URL 與函數的映射。
• 模板引擎：默認使用 Jinja2，支持動態渲染 HTML。
• 請求處理：獲取請求參數、表單數據、文件上傳等。
• 響應處理：返回 JSON、HTML、重定向等。
• 會話管理：通過 ?session? 對象存儲用戶狀態。
• 擴展支持：可集成 Flask-SQLAlchemy（數據庫）、Flask-RESTful（API）等擴展。

二、完整示例：簡易待辦事項應用

以下是一個包含用戶認證、待辦事項管理的 Flask 應用示例：

from flask import Flask, render_template, request, redirect, url_for, session, jsonify
from flask_sqlalchemy import SQLAlchemy
import datetime
import uuid

初始化應用

app = Flask(name)
app.secret_key = ‘your_secret_key’ # 用于會話加密
app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///todo_app.db’
db = SQLAlchemy(app)

數據庫模型

class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), unique=True, nullable=False)
password = db.Column(db.String(120), nullable=False)
todos = db.relationship(‘Todo’, backref=‘user’, lazy=True)

class Todo(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
description = db.Column(db.Text)
due_date = db.Column(db.DateTime)
completed = db.Column(db.Boolean, default=False)
user_id = db.Column(db.Integer, db.ForeignKey(‘user.id’), nullable=False)

創建數據庫表

with app.app_context():
db.create_all()

路由：首頁 - 重定向到登錄頁

@app.route(’/’)
def index():
if ‘user_id’ in session:
return redirect(url_for(‘todo_list’))
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’)

    user = User.query.filter_by(username=username).first()if user and user.password == password:  # 實際應用中應使用密碼哈希session['user_id'] = user.idreturn redirect(url_for('todo_list'))return render_template('login.html', error='用戶名或密碼錯誤')
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():return render_template('register.html', error='用戶名已存在')# 創建新用戶new_user = User(username=username, password=password)db.session.add(new_user)db.session.commit()return redirect(url_for('login'))
return render_template('register.html')

路由：待辦事項列表

@app.route(’/todos’)
def todo_list():
if ‘user_id’ not in session:
return redirect(url_for(‘login’))

user = User.query.get(session['user_id'])
todos = Todo.query.filter_by(user_id=session['user_id']).all()
return render_template('todo_list.html', user=user, todos=todos)

路由：添加待辦事項

@app.route(’/todos/add’, methods=[‘GET’, ‘POST’])
def add_todo():
if ‘user_id’ not in session:
return redirect(url_for(‘login’))

if request.method == 'POST':title = request.form.get('title')description = request.form.get('description')due_date_str = request.form.get('due_date')due_date = Noneif due_date_str:due_date = datetime.datetime.strptime(due_date_str, '%Y-%m-%d')new_todo = Todo(title=title,description=description,due_date=due_date,user_id=session['user_id'])db.session.add(new_todo)db.session.commit()return redirect(url_for('todo_list'))return render_template('add_todo.html')

路由：更新待辦事項狀態

@app.route(’/todos/int:todo_id/toggle’, methods=[‘POST’])
def toggle_todo(todo_id):
if ‘user_id’ not in session:
return jsonify({‘status’: ‘error’, ‘message’: ‘未登錄’})

todo = Todo.query.filter_by(id=todo_id, user_id=session['user_id']).first()
if not todo:return jsonify({'status': 'error', 'message': '待辦事項不存在'})todo.completed = not todo.completed
db.session.commit()
return jsonify({'status': 'success', 'completed': todo.completed})

路由：登出

@app.route(’/logout’)
def logout():
session.clear()
return redirect(url_for(‘login’))

啟動應用

if name == ‘main’:
app.run(debug=True)

三、模板文件示例

假設模板文件存放在 ?templates? 目錄下：

1. login.html

登錄

{% if error %} {% endif %}

登錄 注冊新賬戶 ?

2. todo_list.html

我的待辦事項

添加待辦 登出

<ul>{% for todo in todos %}<li><input type="checkbox" onchange="toggleTodo({{ todo.id }})" {% if todo.completed %}checked{% endif %}><span style="text-decoration: {% if todo.completed %}line-through{% endif %}">{{ todo.title }}</span>{% if todo.due_date %}<span style="color: {% if todo.due_date < now and not todo.completed %}red{% else %}green{% endif %}">(截止: {{ todo.due_date.strftime('%Y-%m-%d') }})</span>{% endif %}</li>{% else %}<li>暫無待辦事項，點擊"添加待辦"創建</li>{% endfor %}
</ul><script>function toggleTodo(todoId) {fetch(`/todos/${todoId}/toggle`, {method: 'POST'}).then(response => response.json()).then(data => {if (data.status !== 'success') {alert(data.message);}});}
</script>

?

四、功能說明

1.?用戶認證：

• 注冊新用戶并存儲到數據庫。
• 登錄后通過會話（session）保持用戶狀態。
  2.?待辦事項管理：
• 列表展示：顯示所有待辦事項及完成狀態。
• 添加功能：支持標題、描述、截止日期。
• 狀態更新：通過 AJAX 異步切換完成狀態。
  3.?技術要點：
• 路由設計：RESTful 風格 URL。
• 數據庫操作：使用 SQLAlchemy ORM。
• 模板渲染：Jinja2 動態生成 HTML。
• 會話管理：Flask 內置 session 對象。

五、運行與擴展

1.?運行方式：
pip install flask flask-sqlalchemy
python app.py

訪問 ?http://127.0.0.1:5000? 使用應用。
2.?擴展方向：

• 添加密碼哈希（如 bcrypt）增強安全性。
• 集成 Flask-RESTful 提供 API 接口。
• 使用 Flask-Migrate 管理數據庫遷移。
• 添加文件上傳、用戶頭像等功能。

通過以上示例，可快速掌握 Flask 的核心功能和項目結構，適用于中小型 Web 應用開發。