开始免费使用
当前位置：首页 > python编程入门自学 > Python Web开发实战：从零构建Flask博客系统

Python Web开发实战：从零构建Flask博客系统

Cora
Cora
发布时间：2026-11-12| 19人浏览过
原创

本文以从零构建简易个人博客系统为主线，详细讲解基于 Python 和 Flask 框架的 Web 开发全流程，涵盖项目环境搭建、ORM 数据模型设计、视图与路由处理、Jinja2 模板渲染以及文章增删改查功能的实现。

构建一个完整的 Web 系统需要打通用户请求、业务逻辑分发、数据持久化存储与界面渲染四项核心能力。本文使用轻量级 Python 框架 Flask 配合轻量关系型数据库 SQLite 与 SQLAlchemy ORM，从零实现一个具备文章查看、发布、详情阅读、编辑与删除（CRUD）功能的个人博客系统，梳理 Web 开发的标准流程与技术边界。
Python Web开发实战：从零构建Flask博客系统
缩略导读：Flask 博客系统核心技术分层与主要功能模块概览

一、系统架构与核心组件职责

在动手写代码之前，先厘清系统的职责划分。Web 应用本质上是一个“请求输入 - 逻辑处理 - 响应输出”的状态机。Flask 作为微框架，不强制绑定大型全家桶工具，而是通过简洁明确的 API 将各个组件紧密连接起来。

在这个简易博客系统中，核心划分为四个层次：

  • 路由与控制器（Routing & Views）：解析 HTTP 请求方法（GET/POST）与 URL 路径，调用业务逻辑，处理表单数据校验与视图重定向。
  • 对象关系映射（Flask-SQLAlchemy ORM）：将 Python 类（Model）与底层的关系型数据库表进行双向映射，避免直接拼装易受注入攻击的原生 SQL 字符串。
  • 模板渲染层（Jinja2 Templates）：将控制器传出的数据注入 HTML 模板，利用继承机制避免重复代码，自动对特殊字符进行实体转义防止 XSS 攻击。
  • 本地数据存储（SQLite）：采用单文件持久化存储（instance/blog.db），无需安装独立数据库服务器进程，零配置即开即用。
Python Web开发实战：从零构建Flask博客系统
图 1：Flask 博客系统分层协同架构
常见认知辨析：微框架是否只能写小型 Demo？

一种常见的说法是“Flask 只是微框架，缺少开箱即用的后台和约束，真正做业务系统必须直接上 Django”。这种说法看似合理，因为对于需要高度统一规范、快速搭后台的大型团队，Django 确实开箱完备。但认为 Flask“做不了正经项目”则脱离了实际。Flask 的“微”在于核心极简、无强行绑架，项目完全可以通过合理组织目录、拆分 Blueprint（蓝图）以及挂载成熟插件（如 Flask-Login、Flask-Migrate）灵活支撑复杂的企业级应用。理解从单文件逐步演化到模块化架构，是掌握 Web 开发的核心能力。

二、开发准备与项目初始化

推荐使用 Python 3.8+ 搭配标准库内置的 venv 模块创建隔离环境，确保项目依赖版本纯净，不污染系统全局 Python 环境。

Python Web开发实战：从零构建Flask博客系统
图 2：Flask 博客系统从零构建的标准实施步骤

1. 创建项目目录与虚拟环境

在终端中执行以下命令创建项目根目录并激活虚拟环境：

# 创建并进入项目目录
mkdir flask_blog
cd flask_blog

# 创建隔离的虚拟环境（名称为 venv）
python3 -m venv venv

# 激活虚拟环境（macOS/Linux）
source venv/bin/activate
# Windows 命令提示符请使用: venv\Scripts\activate

2. 安装依赖包

博客系统仅需安装两个核心包：flask 与 flask-sqlalchemy。运行安装命令：

pip install flask flask-sqlalchemy

3. 标准项目目录结构

为了让业务逻辑与界面模板清晰解耦，建立如下目录层级：

flask_blog/
├── app.py              # 应用入口、数据库配置与路由视图函数
├── templates/          # Jinja2 页面模板目录
│   ├── base.html       # 全局基础骨架模板（导航栏、通知插槽）
│   ├── index.html      # 博客首页（文章列表）
│   ├── detail.html     # 文章详情页
│   ├── create.html     # 发布新文章表单
│   └── edit.html       # 编辑已有文章表单
└── instance/           # 自动生成的本地 SQLite 数据库存储目录（由 Flask 管理）
    └── blog.db

三、数据模型设计与持久化

博客系统的核心实体是“文章”（Post）。每篇文章包含唯一主键标识、标题、正文内容以及创建时间。

1. 模型代码定义

在 app.py 中引入扩展并定义 Post 模型类：

from datetime import datetime
from flask import Flask, render_template, request, url_for, flash, redirect
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

# 配置数据库文件路径与安全密钥
app.config['SECRET_KEY'] = 'dev-secret-key-change-in-production'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

# 初始化 SQLAlchemy 扩展
db = SQLAlchemy(app)

class Post(db.Model):
    __tablename__ = 'posts'
    
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120), nullable=False)
    content = db.Column(db.Text, nullable=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)

    def __repr__(self):
        return f"<Post {self.id}: {self.title}>"
技术点辨析：初学阶段到底是用原生 SQL 还是 ORM？

初学者常听到两种对立意见：“不用 SQL 就学不会底层数据库原理”与“都 2026 年了谁还手写 SQL”。更客观的认知是：原生 SQL 能帮助建立关系代数和索引的基础认知，但用在 Web 视图中容易出现拼接漏洞（SQL 注入）和繁重的结果集类型转换代码；ORM 则把数据库行抽象为 Python 对象，自动处理参数化查询、数据迁移与连接池管理。在构建 Web 业务时，优先使用 ORM 能够保持业务层逻辑整洁与数据操作安全，而复杂多表聚合分析时再辅以优化过的 SQL。

2. 创建数据库与数据表

在 Flask 应用上下文中执行建表命令。可以在终端进入 Python 交互界面执行：

python3 -c "from app import app, db; app.app_context().push(); db.create_all()"

执行完成后，项目根目录下的 instance/ 文件夹中将自动生成 blog.db 文件，数据表 posts 创建完毕。

四、核心路由与业务控制逻辑

一个完整的博客系统围绕 CRUD（增查改删）五组核心视图函数展开。Flask 通过 @app.route 装饰器显式声明 URL 匹配规则与允许的 HTTP 方法。

Python Web开发实战：从零构建Flask博客系统
图 3：单次 HTTP 文章发布（POST /create）生命周期全解

1. 完整视图函数实现

在 app.py 中继续补充业务逻辑：

# 1. 首页：按时间倒序展示所有文章列表
@app.route('/')
def index():
    posts = Post.query.order_by(Post.created_at.desc()).all()
    return render_template('index.html', posts=posts)

# 2. 详情页：根据 ID 查询单篇文章，查不到时直接返回 404
@app.route('/post/<int:post_id>')
def detail(post_id):
    post = db.get_or_404(Post, post_id)
    return render_template('detail.html', post=post)

# 3. 创建文章：GET 返回输入表单，POST 提取参数写入数据库
@app.route('/create', methods=['GET', 'POST'])
def create():
    if request.method == 'POST':
        title = request.form.get('title', '').strip()
        content = request.form.get('content', '').strip()

        if not title:
            flash('文章标题不能为空！', 'error')
            return render_template('create.html', title=title, content=content)

        new_post = Post(title=title, content=content)
        db.session.add(new_post)
        db.session.commit()
        flash('文章发布成功！', 'success')
        # PRG 模式：通过重定向回首页，防止用户刷新页面导致重复提交
        return redirect(url_for('index'))

    return render_template('create.html')

# 4. 编辑文章：更新已有文章
@app.route('/post/<int:post_id>/edit', methods=['GET', 'POST'])
def edit(post_id):
    post = db.get_or_404(Post, post_id)
    if request.method == 'POST':
        title = request.form.get('title', '').strip()
        content = request.form.get('content', '').strip()

        if not title:
            flash('文章标题不能为空！', 'error')
            return render_template('edit.html', post=post)

        post.title = title
        post.content = content
        db.session.commit()
        flash('文章更新成功！', 'success')
        return redirect(url_for('detail', post_id=post.id))

    return render_template('edit.html', post=post)

# 5. 删除文章：仅允许 POST 请求触发删除，防止通过爬虫 GET 链接恶意清空数据
@app.route('/post/<int:post_id>/delete', methods=['POST'])
def delete(post_id):
    post = db.get_or_404(Post, post_id)
    db.session.delete(post)
    db.session.commit()
    flash(f'文章《{post.title}》已成功删除！', 'info')
    return redirect(url_for('index'))
安全提醒：为什么“删除”绝不能使用 GET 请求？

HTTP 规范明确规定 GET 请求应当是安全且幂等的，即只用于读取数据，不应产生破坏性副作用。如果把删除绑定在 GET /post/1/delete 上，搜索引擎爬虫索引、浏览器预加载或者带有链接的聊天预览卡片都会意外触发删除动作。因此破坏性写操作必须强制限制为 POST 方法。

五、Jinja2 模板层与页面渲染

Jinja2 提供了强大的模板继承能力。我们先编写全局通用的基础骨架 base.html，然后各个功能页面通过 {% extends "base.html" %} 复用布局，仅填充专属的 content 区块。

1. 基础骨架模板：templates/base.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}我的简易博客{% endblock %} - Flask 博客</title>
  <style>
    body { font-family: sans-serif; background: #faf9f6; color: #333; margin: 0; padding: 20px; }
    .nav { max-width: 720px; margin: 0 auto 20px; padding: 12px 0; border-bottom: 2px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
    .container { max-width: 720px; margin: 0 auto; background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .flash-messages { margin-bottom: 16px; }
    .flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; font-size: 14px; }
    .flash.success { background: #e8f5e9; color: #2e7d32; }
    .flash.error { background: #ffebee; color: #c62828; }
    .flash.info { background: #e3f2fd; color: #1565c0; }
    a { color: #556b2f; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .btn { display: inline-block; padding: 8px 16px; background: #556b2f; color: #fff; border-radius: 4px; border: none; cursor: pointer; }
  </style>
</head>
<body>
  <div class="nav">
    <h2 style="margin: 0;"><a href="{{ url_for('index') }}">Flask 简易博客</a></h2>
    <a class="btn" href="{{ url_for('create') }}">+ 发布新文章</a>
  </div>

  <div class="container">
    <!-- 闪现消息展示区域 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <div class="flash-messages">
          {% for category, message in messages %}
            <div class="flash {{ category }}">{{ message }}</div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    <!-- 各子页面内容插槽 -->
    {% block content %}{% endblock %}
  </div>
</body>
</html>

2. 首页列表模板：templates/index.html

{% extends 'base.html' %}

{% block title %}文章列表{% endblock %}

{% block content %}
  <h3 style="margin-top:0;">最新文章</h3>
  {% if posts %}
    {% for post in posts %}
      <div style="border-bottom: 1px solid #eee; padding: 16px 0;">
        <h4 style="margin: 0 0 6px;">
          <a href="{{ url_for('detail', post_id=post.id) }}">{{ post.title }}</a>
        </h4>
        <small style="color: #888;">发布于 {{ post.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
        <p style="color: #555; margin: 8px 0 0;">{{ post.content[:120] }}{% if post.content|length > 120 %}...{% endif %}</p>
      </div>
    {% endfor %}
  {% else %}
    <p style="color: #888;">暂无文章，点击右上角发布第一篇博客吧！</p>
  {% endif %}
{% endblock %}

3. 新建与编辑表单：templates/create.html

{% extends 'base.html' %}

{% block title %}撰写新文章{% endblock %}

{% block content %}
  <h3 style="margin-top:0;">发布新文章</h3>
  <form method="POST">
    <div style="margin-bottom: 14px;">
      <label style="display:block; margin-bottom: 4px; font-weight: bold;" for="title">标题</label>
      <input type="text" id="title" name="title" value="{{ title or '' }}" style="width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;" required>
    </div>
    <div style="margin-bottom: 14px;">
      <label style="display:block; margin-bottom: 4px; font-weight: bold;" for="content">正文内容</label>
      <textarea id="content" name="content" rows="10" style="width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;" required>{{ content or '' }}</textarea>
    </div>
    <button class="btn" type="submit">确认发布</button>
    <a href="{{ url_for('index') }}" style="margin-left: 10px;">取消</a>
  </form>
{% endblock %}

六、运行验证与调试排错

1. 启动本地开发服务器

在激活了虚拟环境的终端中，指定主入口文件并启动调试模式：

export FLASK_APP=app.py
export FLASK_ENV=development
flask run --port=5000

终端中会出现类似以下标准输出信息：

 * Serving Flask app 'app.py'
 * Debug mode: on
 * Running on http://127.0.0.1:5000 (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 123-456-789

2. 功能验证清单

测试场景 测试操作 预期结果
首页列表 访问 http://127.0.0.1:5000/ 若无数据展示“暂无文章”提示，右上角展示发布按钮
文章创建 点击发布按钮输入标题与内容并提交 自动重定向至首页，顶栏展示绿色“文章发布成功”提示
非空校验 清空标题直接点击提交 页面拦截提交并给出“文章标题不能为空”警示，正文内容不丢失
详情与编辑 点击标题进入详情，点击编辑修改内容 页面正确展示保存后的全新文本并更新时间
防非法删除 直接在浏览器输入 /post/1/delete (GET 请求) 服务器返回 405 Method Not Allowed，数据不被删除

七、系统总结与工程决策沉淀

通过构建这个轻量博客系统，我们完成了从虚拟环境建立、ORM 模型抽象、HTTP 动词约束、视图与参数解析，到 Jinja2 模板安全转义的完整全流程。这一链路涵盖了现代 Web 开发中绝大部分通用基础逻辑。

Python Web开发实战：从零构建Flask博客系统
图 4：Flask 博客系统核心技术决策与要点总结

在未来业务复杂度提升时，可以遵循以下演进路径对系统进行平滑重构：

  1. 引入工厂函数与 Blueprint（蓝图）：将单个 app.py 文件按业务拆解为 blog 蓝图、auth（用户认证）蓝图与统一配置层 config.py。
  2. 更换持久化存储源：由于引入了 SQLAlchemy ORM，当单机 SQLite 不再满足高并发写操作时，仅需将 SQLALCHEMY_DATABASE_URI 更改为 PostgreSQL 或 MySQL 连接串，无需重写数据查询逻辑。
  3. 生产级部署接入：开发模式内置的 flask run 单线程服务器仅用于本地调试。实际生产部署时，应使用 WSGI 容器（如 Gunicorn 或 uWSGI）配合 Nginx 反向代理与静态资源托管，实现生产级稳定性与并发承载。

相关文章

相关专题: python编程入门自学 Python Flask

免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。

作者最新文章

全部文章

Python 相关产品和应用

全部下载
python编程入门自学
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。

python编程入门自学
scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。

python编程入门自学
Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。

python编程入门自学
Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。

python编程入门自学
pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。

python编程入门自学FastAPI教程
FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架，支持类型提示和自动接口文档。

python编程入门自学Python Flask
Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。

python编程入门自学Django教程
Django

Django

6.1.2 · Windows

成熟的 Python Web 框架，适合构建内容站点和业务系统。

python编程入门自学
Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。

python编程入门自学
SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。