Python 实战:简易 Flask 博客项目

用Python和Flask搭建简易博客,可直观理解Web开发核心。1. 创建虚拟环境并安装Flask、Flask-SQLAlchemy等库;2. 编写app.py定义应用实例、数据库模型(Post)、表单(PostForm)及路由(首页、文章详情、创建文章);3. 使用Jinja2模板引擎构建base.html、index.html、post_detail.html和create_post.html,实现页面布局与内容渲染;4. 添加static/css/style.css美化界面;5. 集成markdown库解析Markdown内容,并通过highlight.js实现代码高亮;6. 运行app.py生成blog.db数据库,访问本地服务即可使用。该方案以轻量级框架提供高度灵活性,适合学习Web全流程开发。

python 实战:简易 flask 博客项目

用 Python 和 Flask 搭建一个简易博客,其实是理解现代 Web 应用开发核心概念最直接、最有趣的方式之一。它能让你亲手串联起前端展示、后端逻辑、数据库存储以及用户交互,从零开始构建一个能跑起来的网站,这种成就感是实打实的。

构建一个简易的 Flask 博客,我们通常会从几个核心组件入手:一个 Flask 应用实例作为骨架,SQLAlchemy 来处理数据库交互,Jinja2 模板引擎负责页面渲染,以及一些静态文件来美化界面。

首先,你需要设置一个隔离的开发环境。创建一个虚拟环境,然后安装必要的库:

pip install Flask Flask-SQLAlchemy Flask-WTF Markdown

接下来,我们逐步构建应用:

立即学习“Python免费学习笔记(深入)”;

1. 应用骨架 (

app.py

blog.py

)这是你的 Flask 应用入口。

from flask import Flask, render_template, request, redirect, url_for, flashfrom flask_sqlalchemy import SQLAlchemyfrom flask_wtf import FlaskFormfrom wtforms import StringField, TextAreaField, SubmitFieldfrom wtforms.validators import DataRequired, Lengthimport markdown # 用于解析Markdown内容import os# 配置应用app = Flask(__name__)app.config['SECRET_KEY'] = '一个非常安全的秘密密钥,生产环境请用复杂随机字符串' # 用于CSRF保护app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db' # 使用SQLite数据库app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = Falsedb = SQLAlchemy(app)# 数据库模型class Post(db.Model):    id = db.Column(db.Integer, primary_key=True)    title = db.Column(db.String(100), nullable=False)    content = db.Column(db.Text, nullable=False)    # 可以添加发布日期、作者等字段    def __repr__(self):        return f''# 表单定义class PostForm(FlaskForm):    title = StringField('标题', validators=[DataRequired(), Length(min=1, max=100)])    content = TextAreaField('内容', validators=[DataRequired()])    submit = SubmitField('发布')# 路由定义@app.route('/')def index():    posts = Post.query.order_by(Post.id.desc()).all()    return render_template('index.html', posts=posts)@app.route('/post/')def post_detail(post_id):    post = Post.query.get_or_404(post_id)    # 将Markdown内容转换为HTML    post_html_content = markdown.markdown(post.content, extensions=['fenced_code'])    return render_template('post_detail.html', post=post, post_html_content=post_html_content)@app.route('/create', methods=['GET', 'POST'])def create_post():    form = PostForm()    if form.validate_on_submit():        new_post = Post(title=form.title.data, content=form.content.data)        db.session.add(new_post)        db.session.commit()        flash('文章发布成功!', 'success')        return redirect(url_for('index'))    return render_template('create_post.html', form=form)# 运行应用if __name__ == '__main__':    with app.app_context():        db.create_all() # 在应用上下文中创建数据库表    app.run(debug=True)

2. 模板文件 (

templates/

)你需要创建

base.html

作为基础布局,

index.html

展示文章列表,

post_detail.html

展示单篇文章,以及

create_post.html

用于创建文章。

templates/base.html
      {% block title %}我的简易博客{% endblock %}     {# 代码高亮样式 #}    
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %}
    {% for category, message in messages %}
  • {{ message }}
  • {% endfor %}
{% endif %} {% endwith %} {% block content %}{% endblock %}
{# 代码高亮脚本 #} hljs.highlightAll(); {# 初始化代码高亮 #}
templates/index.html
{% extends "base.html" %}{% block title %}文章列表 - 我的简易博客{% endblock %}{% block content %}  

所有文章

{% for post in posts %}

{{ post.title }}

{# 这里可以展示文章摘要,或者不显示,直接点击进入详情 #}
{% else %}

还没有任何文章。

{% endfor %}{% endblock %}
templates/post_detail.html
{% extends "base.html" %}{% block title %}{{ post.title }} - 我的简易博客{% endblock %}{% block content %}  

{{ post.title }}

{{ post_html_content|safe }} {# 渲染Markdown转换为HTML的内容 #}
{% endblock %}
templates/create_post.html
{% extends "base.html" %}{% block title %}发布新文章 - 我的简易博客{% endblock %}{% block content %}  

发布新文章

{{ form.csrf_token }}
{{ form.title.label }}
{{ form.title(size=60) }} {% if form.title.errors %}
    {% for error in form.title.errors %}
  • {{ error }}
  • {% endfor %}
{% endif %}
{{ form.content.label }}
{{ form.content(rows=15, cols=80) }} {% if form.content.errors %}
    {% for error in form.content.errors %}
  • {{ error }}
  • {% endfor %}
{% endif %}
{{ form.submit() }}
{% endblock %}

3. 静态文件 (

static/css/style.css

)为了让页面看起来不那么简陋,可以加一点基础样式。

body {    font-family: sans-serif;    margin: 0;    padding: 0;    background-color: #f4f4f4;    color: #333;}.container {    max-width: 800px;    margin: 20px auto;    padding: 20px;    background-color: #fff;    border-radius: 8px;    box-shadow: 0 2px 4px rgba(0,0,0,0.1);}nav {    background-color: #333;    padding: 10px 0;    text-align: center;}nav a {    color: #fff;    text-decoration: none;    padding: 10px 15px;    margin: 0 5px;}nav a:hover {    background-color: #555;    border-radius: 4px;}h1, h2 {    color: #333;}.post-summary {    border-bottom: 1px solid #eee;    padding-bottom: 15px;    margin-bottom: 15px;}.post-summary:last-child {    border-bottom: none;}.post-summary h2 a {    text-decoration: none;    color: #007bff;}.post-summary h2 a:hover {    text-decoration: underline;}.flashes {    list-style: none;    padding: 0;    margin: 10px 0;}.flashes li {    padding: 10px;    margin-bottom: 10px;    border-radius: 5px;}.flashes .success {    background-color: #d4edda;    color: #155724;    border: 1px solid #c3e6cb;}/* Markdown content styling */.post-content img {    max-width: 100%;    height: auto;    display: block;    margin: 1em auto;}.post-content blockquote {    border-left: 4px solid #ccc;    padding-left: 10px;    color: #666;    margin: 1em 0;}.post-content pre {    background-color: #f8f8f8;    padding: 10px;    border-radius: 5px;    overflow-x: auto;}.post-content code {    font-family: monospace;    background-color: #eee;    padding: 2px 4px;    border-radius: 3px;}.post-content pre code {    background-color: transparent;    padding: 0;}

将这些文件放置在正确的目录结构中:

your_blog_project/├── app.py├── blog.db (首次运行后生成)├── templates/│   ├── base.html│   ├── index.html│   ├── post_detail.html│   └── create_post.html└── static/    └── css/        └── style.css

运行

python app.py

,然后在浏览器中访问

http://127.0.0.1:5000

,你就能看到一个最基础的博客了。从这里开始,你可以根据自己的需求添加用户认证、评论系统、文章编辑/删除功能等。

为什么选择 Flask 而不是 Django 来构建博客?

选择 Flask 来构建一个简易博客,对我来说,更多的是一种哲学上的偏好。Django 确实是“电池已包含”的框架,它提供了 ORM、管理后台、表单处理、认证系统等一切开箱即用的功能。如果你想快速搭建一个功能完备、结构复杂的应用,Django 绝对是效率的保证。它就像一个装修好的精装房,拎包入住。

但 Flask 就不一样了,它是一个微框架,只提供最核心的 WSGI 工具包和路由功能。这意味着你需要手动选择和集成数据库、表单、认证等各种组件。这种“自己动手”的感觉,对于初学者或者想深入理解 Web 工作原理的人来说,简直是福音。你可以清楚地看到每个组件是如何协同工作的,而不是被框架的“魔法”所掩盖。对于一个“简易博客”而言,Django 可能显得有些杀鸡用牛刀,它的许多内置功能我们可能根本用不上。Flask 的轻量级和灵活性,让我们可以从最基础的 HTTP 请求响应开始,一步步搭建出我们想要的功能,这种掌控感是无与伦比的。

如何为 Flask 博客选择合适的数据库?SQLite 够用吗?

为 Flask 博客选择数据库,其实是个挺有意思的问题,因为它直接关系到项目的复杂度和未来的扩展性。对于一个“简易博客”项目,我几乎可以毫不犹豫地说:SQLite 绝对够用,而且是初期最好的选择。

SQLite 是一个文件型的数据库,这意味着它不需要独立的数据库服务器进程,所有数据都存储在一个

.db

文件中。它的优点显而易见:零配置、易于部署、轻量级。在开发阶段,你不需要安装和配置 MySQL 或 PostgreSQL 这样的独立数据库服务,直接在你的项目中创建一个

.db

文件,然后 Flask-SQLAlchemy 就能轻松连接并操作它。这大大降低了入门门槛和开发环境的复杂性。

当然,如果你的博客未来流量巨大,需要处理高并发读写,或者数据量非常庞大,那么 SQLite 的性能瓶颈就会显现出来。那时,你可能就需要考虑切换到 PostgreSQL 或 MySQL 这样的关系型数据库,它们提供了更强大的事务处理、并发控制和数据完整性保障。但好在,Flask-SQLAlchemy 这样的 ORM 库,在很大程度上抽象了底层数据库的差异。这意味着,如果你一开始用 SQLite 搭建,未来需要升级时,修改数据库连接字符串和少量配置,通常就能迁移到其他数据库,而无需重写大部分模型代码。所以,从简易博客开始,用 SQLite 是一个非常明智且实用的选择。

博客文章如何实现 Markdown 支持和代码高亮?

在博客中实现 Markdown 支持和代码高亮,是提升写作体验和内容展示质量的关键一步。毕竟,谁也不想在写文章时被繁琐的 HTML 标签困扰,或者让代码块看起来像一堆乱码。

实现 Markdown 支持,核心思路是利用一个 Python 库将 Markdown 文本转换成 HTML。

markdown

库就是其中一个非常流行且易于使用的选择。你只需要

pip install markdown

,然后在你的 Flask 应用中,当从数据库取出文章内容准备渲染到页面时,用

markdown.markdown()

函数处理一下即可。

例如,在

post_detail

路由中,我们从数据库获取到文章内容

post.content

,然后:

import markdown# ...@app.route('/post/')def post_detail(post_id):    post = Post.query.get_or_404(post_id)    # 将Markdown内容转换为HTML    # extensions=['fenced_code'] 允许我们使用 ```python 这样的语法来定义代码块    post_html_content = markdown.markdown(post.content, extensions=['fenced_code'])    return render_template('post_detail.html', post=post, post_html_content=post_html_content)

在模板中,记得用

|safe

过滤器来告诉 Jinja2,这段 HTML 是安全的,不需要转义:

{{ post_html_content|safe }}

至于代码高亮,这通常是前端 JavaScript 库的职责。

highlight.js

Prism.js

是两个非常优秀的选项。它们的工作原理相似:你需要在页面中引入它们的 CSS 样式和 JavaScript 脚本,然后它们会自动扫描页面中的

...

标签,并根据代码语言(通过

class="python"

这样的类名指定)应用高亮样式。

highlight.js

为例:

引入 CSS 和 JS:

base.html


部分引入

highlight.js

的样式文件,并在


结束标签前引入其脚本文件。

    {# ... 其他样式 ... #}        {# ... 页面内容 ... #}        hljs.highlightAll(); {# 初始化代码高亮 #}

编写 Markdown 时指定语言: 当你在文章内容中插入代码块时,使用 Markdown 的 Fenced Code Blocks 语法,并指定语言:

```pythondef hello_flask():    return "Hello, Flask!"
这样,当 Markdown 被转换成 HTML 后,`highlight.js` 就能识别出 `` 标签内的代码,并应用漂亮的高亮效果了。这个过程把内容的编写和展示解耦,让你的博客既美观又易用。

以上就是Python 实战:简易 Flask 博客项目的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1373020.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Python动态列表初始化中可变对象引用问题解析与规避
上一篇 2025年12月14日 12:49:41
Python 异常处理在爬虫项目中的应用
下一篇 2025年12月14日 12:49:50

相关推荐

  • 修复Django电商项目中AJAX过滤产品列表图片不显示问题

    在Django电商项目中,当使用AJAX动态加载过滤后的产品列表时,常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式(如data-setbg属性结合JavaScript库)与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片,确保浏览…

    2026年5月10日
    700
  • 开源免费PHP工具 PHP开发效率提升利器

    推荐开源免费PHP开发工具以提升效率:VS Code、Sublime Text轻量高效,PhpStorm专业强大;调试用Xdebug、Kint、Ray;依赖管理选Composer;代码质量工具包括PHPStan、Psalm、PHP_CodeSniffer;数据库管理可用%ignore_a_1%MyA…

    2026年5月10日
    000
  • Matplotlib 地图中多类型图例的创建与优化

    Matplotlib 地图中多类型图例的创建与优化Matplotlib 地图中多类型图例的创建与优化Matplotlib 地图中多类型图例的创建与优化Matplotlib 地图中多类型图例的创建与优化

    本教程旨在解决matplotlib地图可视化中,如何在一个图例中同时展示颜色块(如区域分类)和自定义标记(如特定兴趣点)的问题。文章详细介绍了当传统`patch`对象无法正确显示标记时,如何利用`matplotlib.lines.line2d`创建标记图例句柄,并将其与颜色块图例句柄合并,从而生成一…

    2026年5月10日 用户投稿
    900
  • Golang JSON序列化:控制敏感字段暴露的最佳实践

    本教程探讨golang中如何高效控制结构体字段在json序列化时的可见性。当需要将包含敏感信息的结构体数组转换为json响应时,通过利用`encoding/json`包提供的结构体标签,特别是`json:”-“`,可以轻松实现对特定字段的忽略,从而避免敏感数据泄露,确保api…

    2026年5月10日
    000
  • 利用海象运算符简化条件赋值:Python教程与最佳实践

    本文旨在探讨Python中海象运算符(:=)在条件赋值场景下的应用。通过对比传统if/else语句与海象运算符,以及条件表达式,分析海象运算符在简化代码、提高可读性方面的优势与局限性。并通过具体示例,展示如何在列表推导式等场景下合理使用海象运算符,同时强调其潜在的复杂性及替代方案,帮助开发者更好地掌…

    2026年5月10日
    300
  • 怎么在PHP代码中实现图片上传功能_PHP图片上传功能实现与安全处理教程

    首先创建含enctype的HTML表单,再用PHP接收文件,检查目录、移动临时文件,验证类型与大小,生成唯一文件名,并调整php.ini限制以确保上传成功。 如果您尝试在PHP项目中添加图片上传功能,但服务器无法正确接收或保存文件,则可能是由于表单配置、文件处理逻辑或安全限制的问题。以下是实现该功能…

    2026年5月10日
    300
  • HTML如何隐藏滚动条或去除滚动条

    滚动条可以存在也可以不存在,本文主要介绍了html 隐藏滚动条和去除滚动条的方法的相关资料,大家一起来学习一下html隐藏滚动条或去除滚动条的方法吧。 1. html 标签加属性 XML/HTML Code复制内容到剪贴板 2.body中加入以下代码 立即学习“前端免费学习笔记(深入)”; html…

    用户投稿 2026年5月10日
    100
  • vscode上怎么运行html_vscode上运行html步骤【指南】

    首先保存文件为.html格式,再通过浏览器或Live Server插件打开预览;推荐安装Live Server实现本地服务器运行与实时刷新,提升开发体验。 在 VS Code 上运行 HTML 文件并不需要复杂的配置,只需几个简单步骤即可预览页面效果。VS Code 本身是一个代码编辑器,不直接运行…

    2026年5月10日
    100
  • css max-height属性怎么用

    max-height 属性设置元素的最大高度。 说明 该属性值会对元素的高度设置一个最高限制。因此,元素可以比指定值矮,但不能比其高。不允许指定负值。 注意:max-height 属性不包括外边距、边框和内边距。 立即学习“前端免费学习笔记(深入)”; 值描述none 默认。定义对元素被允许的最大高…

    2026年5月10日
    100
  • RichHandler与Rich Progress集成:解决显示冲突的教程

    在使用rich库的`richhandler`进行日志输出并同时使用`progress`组件时,可能会遇到显示错乱或溢出问题。这通常是由于为`richhandler`和`progress`分别创建了独立的`console`实例导致的。解决方案是确保日志处理器和进度条组件共享同一个`console`实例…

    2026年5月10日
    300
  • 修复点击时按钮抖动:CSS垂直对齐实践

    本文探讨了在Web开发中,交互式按钮(如播放/暂停按钮)在点击时发生意外垂直位移的问题。通过分析CSS样式变化对元素布局的影响,我们发现这是由于按钮不同状态下的边框样式和内边距改变,以及默认的垂直对齐行为共同作用所致。核心解决方案是利用CSS的vertical-align属性,将其设置为middle…

    2026年5月10日
    100
  • 页面中文本域的值怎么设置

    标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。 注释:在文本输入区内的文本行间,用 …

    2026年5月10日
    000
  • 使用 Jupyter Notebook 进行探索性数据分析

    Jupyter Notebook通过单元格实现代码与Markdown结合,支持数据导入(pandas)、清洗(fillna)、探索(matplotlib/seaborn可视化)、统计分析(describe/corr)和特征工程,便于记录与分享分析过程。 Jupyter Notebook 是进行探索性…

    2026年5月10日
    000
  • 如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南

    HTML表单通过标签构建,包含action和method属性定义数据提交目标与方式,常用input类型如text、password、email等适配不同输入需求,配合label、required、placeholder提升可用性,结合textarea、select、button等控件实现完整交互,是…

    2026年5月10日
    300
  • 前端缓存策略与JavaScript存储管理

    根据数据特性选择合适的存储方式并制定清晰的读写与清理逻辑,能显著提升前端性能;合理运用Cookie、localStorage、sessionStorage、IndexedDB及Cache API,结合缓存策略与定期清理机制,可在保证用户体验的同时避免安全与性能隐患。 前端缓存和JavaScript存…

    2026年5月10日
    200
  • HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧

    首先利用原生touch事件实现滑动判断,再通过preventDefault解决滚动冲突,接着引入Hammer.js处理复杂手势,最后通过优化点击区域、避免事件冲突和增加视觉反馈提升体验。 在移动端浏览器中,HTML5网页可以通过触摸事件实现手势操作,提升用户体验。虽然原生JavaScript提供了基…

    2026年5月10日
    000
  • 深入理解 Express.js 中 next() 参数的作用与中间件机制

    本文深入探讨 express.js 中间件函数中的 `next()` 参数。它负责将控制权传递给请求-响应周期中的下一个中间件或路由处理程序。文章将详细解释 `next()` 的工作原理、中间件的注册与执行顺序,以及不正确使用 `next()` 可能导致请求挂起的风险,并通过代码示例和实际应用场景,…

    2026年5月10日
    000
  • Python命令怎样使用profile分析脚本性能 Python命令性能分析的基础教程

    使用Python的cProfile模块分析脚本性能最直接的方式是通过命令行执行python -m cProfile your_script.py,它会输出每个函数的调用次数、总耗时、累积耗时等关键指标,帮助定位性能瓶颈;为进一步分析,可将结果保存为文件python -m cProfile -o ou…

    2026年5月10日
    000
  • PHP动态生成表单输入与POST数据获取实践指南

    本教程详细阐述了如何在php中根据动态数据源(如数据库值)生成多个表单输入框,并演示了如何通过post方法准确无误地获取这些动态生成的输入值。文章强调了正确的输入框命名策略,避免了常见的命名误区,并提供了完整的代码示例,确保开发者能够高效处理动态表单数据。 动态生成表单输入 在Web开发中,我们经常…

    2026年5月10日
    000
  • Python递归函数追踪与性能考量:以序列打印为例

    本文深入探讨了Python中一种递归打印序列元素的方法,并着重演示了如何通过引入缩进参数来有效追踪递归函数的执行流程和参数变化。通过实际代码示例,文章揭示了递归调用可能带来的潜在性能开销,特别是对调用栈空间的需求,以及Python默认递归深度限制可能导致的错误,为读者提供了理解和优化递归算法的实用见…

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信