桌球比賽即時記錄系統 - 程式設計介紹

此頁面詳細介紹了桌球比賽即時記錄系統的程式設計，包括前後端的處理，以及 Flask 的應用。

前端設計

前端使用了 HTML、CSS 以及 Bootstrap 框架來構建響應式設計，使頁面在不同設備上都能夠友好展示。

<form id="add-team-form" action="/add_team" method="POST" class="form-inline mb-3">
    <input type="text" name="team_name" id="team_name" class="form-control mr-2" placeholder="隊伍名稱">
    <button type="submit" class="btn btn-primary">新增隊伍</button>
</form>
        

後端設計

後端使用了 Flask 框架，並使用了 Flask-Login 來管理用戶認證，Flask-SQLAlchemy 來處理數據庫操作。

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

app = Flask(__name__, static_folder='static')
app.config['SECRET_KEY'] = 'your_secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db'
db = SQLAlchemy(app)
login_manager = LoginManager(app)
login_manager.login_view = 'login'

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)
        

Flask 路由

使用 Flask 的路由來處理不同的請求，並渲染對應的模板。

@app.route('/')
def intro():
    return render_template('intro.html')

@app.route('/welcome')
def welcome():
    return render_template('welcome.html')

@app.route('/main')
@login_required
def index():
    return render_template('index.html', data=data)
        

數據管理

使用 JSON 文件來保存和加載應用的數據，確保數據的持久性。

data = {}

default_data = {
    "league_name": "青椒小聯賽",
    "logo": "static/logo.png",
    "show_logo": True,
    "league_name_font_size": "32px",
    "league_name_color": "#000000",
    "teams": ["預設隊伍1", "預設隊伍2"],
    "matches": [],
    "background_image": "static/logo.PNG",
    "background_type": "gradient",
    "background_start": "#99f2c8",
    "background_end": "#96c93d",
}

data = default_data.copy()

def load_data():
    global data
    if os.path.exists('data.json'):
        try:
            with open('data.json', r, encoding='utf-8') as f:
                data.update(json.load(f))
        except json.JSONDecodeError:
            save_data()
    else:
        save_data()

def save_data():
    with open('data.json', w, encoding='utf-8') as f:
        json.dump(data, f, ensure_ascii=False, indent=4)
        

登入機制

使用 Flask-Login 來實現用戶登入和登出功能，保護部分頁面需要登入才能訪問。

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        user = User.query.filter_by(username=username).first()
        if user and user.password == password:
            login_user(user)
            return redirect(url_for('index'))
        return '帳號或密碼錯誤'
    return render_template('login.html')

@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('welcome'))