第12章 · Flask 开发"好记星"博客

# ============ db.py：数据库操作的薄封装 ============
import sqlite3

DB_PATH = "notebook.db"      # 数据库文件名（项目根目录下）


def get_conn():
    # 拿一个连接。row_factory = Row 让查询返回的行能用 dict-like 访问
    conn = sqlite3.connect(DB_PATH)
    conn.row_factory = sqlite3.Row
    return conn


# ============ 用户相关 ============
def find_user(username, password):
    # 校验账号密码——返回行或 None
    conn = get_conn()
    user = conn.execute(
        "SELECT * FROM users WHERE username = ? AND password = ?",
        (username, password)   # ★ 用 ? 占位符，杜绝 SQL 注入
    ).fetchone()
    conn.close()
    return user


# ============ 文章相关 ============
def list_articles():
    # 列出所有文章（最新的在最上面）
    conn = get_conn()
    rows = conn.execute(
        "SELECT * FROM articles ORDER BY created DESC"
    ).fetchall()
    conn.close()
    return rows


def add_article(title, content, author):
    # 写入一篇新文章
    conn = get_conn()
    conn.execute(
        "INSERT INTO articles (title, content, author) VALUES (?, ?, ?)",
        (title, content, author)
    )
    conn.commit()             # ★ 写操作记得 commit！
    conn.close()

# ============ init_db.py：初始化数据库（只跑一次） ============
import sqlite3

conn = sqlite3.connect("notebook.db")
c = conn.cursor()

# 用户表：极简，3 个字段
c.execute("DROP TABLE IF EXISTS users")
c.execute("""
    CREATE TABLE users (
        id       INTEGER PRIMARY KEY AUTOINCREMENT,
        username TEXT UNIQUE NOT NULL,
        password TEXT NOT NULL
    )
""")

# 文章表：标题、正文、作者、自动时间戳
c.execute("DROP TABLE IF EXISTS articles")
c.execute("""
    CREATE TABLE articles (
        id      INTEGER PRIMARY KEY AUTOINCREMENT,
        title   TEXT NOT NULL,
        content TEXT NOT NULL,
        author  TEXT NOT NULL,
        created DATETIME DEFAULT CURRENT_TIMESTAMP
    )
""")

# 插一个测试用户
c.execute("INSERT INTO users (username, password) VALUES (?, ?)",
          ("admin", "123456"))

# 插两篇测试文章
c.execute("INSERT INTO articles (title, content, author) VALUES (?, ?, ?)",
          ("第一篇博客", "这是 Flask 博客的第一篇文章。", "admin"))
c.execute("INSERT INTO articles (title, content, author) VALUES (?, ?, ?)",
          ("学习笔记", "今天学了 Flask 的 Session 机制。", "admin"))

conn.commit()
conn.close()
print("✅ 数据库初始化完成：notebook.db")

# ============ app.py：Flask 主程序 ============
from functools import wraps
from flask import (
    Flask, request, session,
    render_template, redirect, url_for
)
import db


app = Flask(__name__)
# Session 必须设 SECRET_KEY，否则 Flask 拒绝写 session
# 实际项目里要用环境变量，课堂演示就硬编码
app.secret_key = "notebook-2026-secret"


# ============ "门卫"装饰器：要求登录 ============
# 用了它的视图，没登录的用户会被踢回登录页
def login_required(f):
    @wraps(f)
    def wrapper(*args, **kwargs):
        if "username" not in session:
            return redirect(url_for("login"))
        return f(*args, **kwargs)
    return wrapper


# ============ 路由 1：登录 ============
@app.route("/login", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        username = request.form["username"]
        password = request.form["password"]
        user = db.find_user(username, password)
        if user:
            # 登录成功：把用户名写进 session
            session["username"] = username
            return redirect(url_for("article_list"))
        return render_template("login.html",
                               error="用户名或密码错误")
    return render_template("login.html")


# ============ 路由 2：退出 ============
@app.route("/logout")
def logout():
    session.clear()                     # 清空所有 session
    return redirect(url_for("login"))


# ============ 路由 3：文章列表（要登录） ============
@app.route("/")
@login_required
def article_list():
    articles = db.list_articles()
    return render_template("list.html",
                           articles=articles,
                           username=session["username"])


# ============ 路由 4：写新博客（要登录） ============
@app.route("/create", methods=["GET", "POST"])
@login_required
def create():
    if request.method == "POST":
        title = request.form["title"]
        content = request.form["content"]
        db.add_article(title, content, session["username"])
        return redirect(url_for("article_list"))
    return render_template("create.html")


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><title>好记星 · 登录</title>
    <style>
        body { font-family: sans-serif;
               max-width: 360px; margin: 80px auto; }
        input { width:100%; padding:8px; margin:6px 0;
                box-sizing:border-box; }
        button { width:100%; padding:10px;
                 background:#3B6B9A; color:#fff;
                 border:none; cursor:pointer; }
        .err { color:#B83B2E; }
    </style>
</head>
<body>
    <h2>📝 好记星 · 登录</h2>

    <form method="post">
        <input name="username" placeholder="用户名">
        <input name="password" type="password" placeholder="密码">
        <button>登录</button>
    </form>

    {% if error %}<p class="err">❌ {{ error }}</p>{% endif %}
    <p style="color:#888">课堂账号：admin / 123456</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><title>好记星 · 我的博客</title>
    <style>
        body { font-family: sans-serif; max-width: 720px;
               margin: 30px auto; padding: 0 20px; line-height: 1.7; }
        article { padding: 14px 0; border-bottom: 1px solid #eee; }
        .meta { color: #888; font-size: 0.9em; }
        .topbar { display:flex; justify-content:space-between;
                  align-items:center; margin-bottom: 12px; }
        .btn { background:#D97B2B; color:#fff; padding:6px 12px;
               border-radius:4px; text-decoration:none; }
    </style>
</head>
<body>
    <div class="topbar">
        <h1>📝 我的博客</h1>
        <span>
            👋 {{ username }} |
            <a href="/create" class="btn">➕ 写新文章</a> |
            <a href="/logout">退出</a>
        </span>
    </div>

    <!-- 循环：list_articles 视图传过来的 articles -->
    {% for a in articles %}
        <article>
            <h2>{{ a.title }}</h2>
            <div class="meta">
                {{ a.author }} · {{ a.created }}
            </div>
            <p>{{ a.content }}</p>
        </article>
    {% else %}
        <p>还没有文章。点上面"写新文章"添一篇吧。</p>
    {% endfor %}
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><title>写新文章</title>
    <style>
        body { font-family: sans-serif;
               max-width: 600px; margin: 30px auto; }
        input, textarea { width:100%; padding:8px;
                          margin: 4px 0 12px; box-sizing:border-box; }
        textarea { height: 200px; }
        button { padding: 8px 18px; background:#3B6B9A;
                 color:#fff; border:none; cursor:pointer; }
    </style>
</head>
<body>
    <h2>✍️ 写一篇新文章</h2>

    <form method="post">
        <label>标题：<input name="title" required></label>
        <label>正文：<textarea name="content" required></textarea></label>
        <button>发布</button>
        <a href="/">返回列表</a>
    </form>
</body>
</html>