Flask 從前端接收參數並操作 MySQL 數據庫完整指南

核心概念

Flask 本身不直接操作數據庫，而是通過擴展（如 Flask-SQLAlchemy、PyMySQL）實現。前端數據傳遞到後端主要有三種方式：URL 參數、表單提交、JSON 請求體。

環境準備

pip install flask flask-sqlalchemy pymysql

配置 MySQL 連接

import os
from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
# MySQL 連接 URI 格式：mysql+pymysql://用戶:密碼@主機:端口/數據庫
app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('DATABASE_URL', 'mysql+pymysql://root:password@localhost:3306/mydb')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
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_hash = db.Column(db.String(128), nullable=False)

    def set_password(self, password):
        self.password_hash = generate_password_hash(password)

    def check_password(self, password):
        return check_password_hash(self.password_hash, password)

接收前端參數的三種路由寫法

1. URL 查詢參數 (GET)

@app.route('/user')
def get_user():
    username = request.args.get('username')  # 獲取 ?username=xxx
    user = User.query.filter_by(username=username).first()
    return jsonify({'exists': user is not None})

2. 表單提交 (POST application/x-www-form-urlencoded)

@app.route('/register', methods=['POST'])
def register():
    username = request.form.get('username')
    password = request.form.get('password')
    if not username or not password:
        return jsonify({'error': '參數缺失'}), 400
    if User.query.filter_by(username=username).first():
        return jsonify({'error': '用戶已存在'}), 409
    user = User(username=username)
    user.set_password(password)
    db.session.add(user)
    db.session.commit()
    return jsonify({'message': '註冊成功'}), 201

3. JSON 請求體 (POST application/json)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    if not data:
        return jsonify({'error': '請求體必須為 JSON'}), 400
    username = data.get('username')
    password = data.get('password')
    user = User.query.filter_by(username=username).first()
    if user and user.check_password(password):
        return jsonify({'token': 'fake-jwt-token'})
    return jsonify({'error': '認證失敗'}), 401

前端調用示例 (fetch API)

// 註冊
fetch('/register', {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  body: new URLSearchParams({username: 'test', password: '123456'})
}).then(r => r.json()).then(console.log);

// 登錄
fetch('/login', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({username: 'test', password: '123456'})
}).then(r => r.json()).then(console.log);

關鍵提示

• 生產環境務必使用 HTTPS 傳輸敏感信息。
• 密碼絕不可明文存儲，示例中使用了 Werkzeug 的 generate_password_hash/check_password_hash。
• 避免在視圖函數中直接拼接 SQL，ORM 可有效防止注入攻擊。
• 大項目建議引入 Flask-Migrate 管理數據庫遷移。