Python 30 天实战:个人博客网站开发(基础部分)

gaoyangw 2025-01-11 12:53 21 浏览 0 评论

经过前面一系列对 Flask、数据库操作以及表单处理等知识的学习，今天我们将把这些知识综合运用起来，开发一个简单的个人博客网站的后端部分，并搭配基础的 HTML、CSS 进行页面布局和样式设计，打造出具备基本外观与功能的博客网站雏形。

一、项目准备

技术选型与环境搭建：后端框架选用 Flask，它能方便地处理路由、请求和响应等 Web 相关操作。数据库方面继续使用 SQLAlchemy 来连接和操作数据库，这里以 SQLite 数据库为例进行演示（方便本地开发和测试）。前端页面使用 HTML 构建页面结构，CSS 进行样式设计，实现简单的页面布局和美化。
数据库设计与模型定义（使用 SQLAlchemy）：
首先创建一个表示文章的数据库表模型，代码如下：

from flask import Flask
from sqlalchemy import create_engine, Column, Integer, String, Text
from sqlalchemy.orm import sessionmaker, declarative_base

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:///blog_database.db"
engine = create_engine(app.config['SQLALCHEMY_DATABASE_URI'])
Session = sessionmaker(bind=engine)
db_session = Session()

Base = declarative_base()

class Article(Base):
    __tablename__ = 'articles'
    id = Column(Integer, primary_key=True)
    title = Column(String(100), nullable=False)
    content = Column(Text, nullable=False)

Base.metadata.create_all(engine)

在上述代码中，定义了 Article 类继承自 declarative_base() 创建的基类，该类对应数据库中的 articles 表，包含 id（文章唯一标识，整数类型主键）、title（文章标题，字符串类型且不能为空）、content（文章内容，使用 Text 类型来存储较长的文本，也不能为空）这几个字段。通过 Base.metadata.create_all(engine) 语句让 SQLAlchemy 根据这个模型创建对应的数据库表结构。

二、文章列表展示功能

后端路由与数据查询逻辑：
在 Flask 应用中定义路由来获取并展示文章列表，代码如下：

from flask import render_template

@app.route('/')
@app.route('/articles')
def article_list():
    articles = db_session.query(Article).all()
    return render_template('article_list.html', articles=articles)

在上述代码中，定义了两个路由（根路由 '/' 和 /articles 路由）都指向 article_list 函数，该函数通过 db_session.query(Article).all() 查询出数据库中所有的文章记录，以列表形式返回，然后将这个包含文章对象的列表传递给 article_list.html 模板进行渲染展示。

HTML 模板设计（article_list.html）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人博客 - 文章列表</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <h1>我的博客文章列表</h1>
    <ul>
        {% for article in articles %}
        <li><a href="{{ url_for('article_detail', article_id=article.id) }}">{{ article.title }}</a></li>
        {% endfor %}
    </ul>
</body>

</html>

在这个模板中，首先设置了页面标题等基本信息，并且引入了外部的 CSS 文件（styles.css，后续会介绍样式设计）。然后通过 Jinja2 模板引擎的循环语法 {% for article in articles %} 遍历从后端传递过来的文章列表，为每篇文章生成一个列表项 <li>，列表项中包含文章标题的链接，链接指向文章详情页面（通过 url_for 函数生成对应的 URL，传递文章的 id 参数给文章详情页面路由）。

三、文章详情页面功能

后端路由与根据文章 ID 查询逻辑：

@app.route('/article/<int:article_id>')
def article_detail(article_id):
    article = db_session.query(Article).filter_by(id=article_id).first()
    if article:
        return render_template('article_detail.html', article=article)
    return '<h1>文章不存在</h1>'

在上述代码中，定义了 /article/<int:article_id> 路由，用于接收文章的 id 参数，通过 db_session.query(Article).filter_by(id=article_id).first() 从数据库中查询对应 id 的文章记录，如果找到文章则将其传递给 article_detail.html 模板进行渲染展示，若文章不存在则返回相应的提示信息。

HTML 模板设计（article_detail.html）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人博客 - 文章详情</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <h1>{{ article.title }}</h1>
    <div class="article-content">
        {{ article.content }}
    </div>
</body>

</html>

在这个模板中，展示了文章的标题和内容，标题通过 {{ article.title }} 获取传递过来的文章对象的标题属性进行展示，文章内容则放在一个具有特定类名（article-content，方便 CSS 样式设置）的 <div> 元素中进行展示。

四、文章发布功能

表单类定义（使用 Flask-WTF）：

from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired

class ArticleForm(FlaskForm):
    title = StringField('文章标题', validators=[DataRequired(message='标题不能为空')])
    content = TextAreaField('文章内容', validators=[DataRequired(message='内容不能为空')])
    submit = SubmitField('发布文章')

在上述表单类中，定义了文章标题字段（title）、文章内容字段（content），都添加了不能为空的验证规则，还有一个提交按钮字段（submit）用于触发表单提交操作。

后端路由与表单处理及数据保存逻辑：

from flask import render_template, redirect, url_for
from flask_wtf import FlaskForm

@app.route('/create_article', methods=['GET', 'POST'])
def create_article():
    form = ArticleForm()
    if form.validate_on_submit():
        title = form.title.data
        content = form.content.data
        new_article = Article(title=title, content=content)
        db_session.add(new_article)
        db_session.commit()
        return redirect(url_for('article_list'))
    return render_template('create_article.html', form=form)

在上述代码中，定义了 /create_article 路由来处理文章发布相关操作，支持 GET（用于显示文章发布页面）和 POST（用于处理表单提交）两种请求方法。在函数中先创建 ArticleForm 的实例 form，如果表单提交且通过验证，就获取表单中的标题和内容数据，创建一个新的 Article 对象并添加到数据库会话中，提交事务将新文章保存到数据库，最后重定向到文章列表页面。若表单未提交或验证不通过，则渲染 create_article.html 模板展示文章发布页面以及可能的错误提示信息。

HTML 模板设计（create_article.html）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人博客 - 发布文章</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <h1>发布新文章</h1>
    <form method="post">
        {{ form.csrf_token }}
        <p>{{ form.title.label }} {{ form.title }}</p>
        <p>{{ form.content.label }} {{ form.content }}</p>
        <p>{{ form.submit }}</p>
    </form>
</body>

</html>

在这个模板中，创建了一个 <form> 表单元素，设置表单提交方法为 POST，并且渲染了表单类中的各个字段（包括 csrf_token 用于防止跨站请求伪造攻击），用户可以在相应的输入框中输入文章标题和内容，点击提交按钮触发表单提交操作。

五、简单的 CSS 样式设计（styles.css，示例部分样式）

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

a {
    text-decoration: none;
    color: #0066cc;
}

.article-content {
    margin: 20px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}

上述 CSS 代码对页面的整体字体、背景颜色、标题样式、列表样式、链接样式以及文章内容展示区域的样式等进行了简单设置，让页面看起来更加整洁、美观。

通过今天这个综合练习，我们搭建起了一个简单个人博客网站的后端基础部分，实现了文章列表展示、文章详情查看以及文章发布等核心功能，并通过简单的 HTML、CSS 设计让网站具备了基本的外观。后续可以继续在此基础上完善功能，比如添加用户认证、评论功能等，以及进一步优化页面的样式设计。

#个人博客开发# #Flask 综合应用# #数据库与 Web 应用# #HTML CSS 基础# #Web 功能构建# #Python 项目实战#

网站开发

Python 30 天实战:个人博客网站开发(基础部分)

一、项目准备

二、文章列表展示功能

三、文章详情页面功能

四、文章发布功能

五、简单的 CSS 样式设计（styles.css，示例部分样式）

相关推荐

取消回复欢迎你发表评论:

指数蛙分享提升百度指数的方法教程

如何查询自己连接的WiFi无线网络或者是数据流量使用了多少流量?

SEO优化技巧探讨-必应SEO优化快速排名与推广方法-墨家研究院

今日头条关键词优化怎么做? 今日头条关键字查询

不限速!这6个磁力下载工具推荐，强到离谱!

10个珍藏多年的宝藏网站分享，个个都很厉害，资源+工具一网打尽

你想要的8个宝藏网站来喽!

抖音识图功能，开启流量新渠道!

在线查询与防御:网站安全挂马检测指南

无需翻墙:精选网站大集合无需付费的网站大全推荐

Python 30 天实战:个人博客网站开发(基础部分)

一、项目准备

二、文章列表展示功能

三、文章详情页面功能

四、文章发布功能

五、简单的 CSS 样式设计（styles.css，示例部分样式）

相关推荐

取消回复欢迎 你 发表评论:

指数蛙分享提升百度指数的方法教程

如何查询自己连接的WiFi无线网络或者是数据流量使用了多少流量?

SEO优化技巧探讨-必应SEO优化快速排名与推广方法-墨家研究院

今日头条关键词优化怎么做? 今日头条关键字查询

不限速!这6个磁力下载工具推荐，强到离谱!

10个珍藏多年的宝藏网站分享，个个都很厉害，资源+工具一网打尽

你想要的8个宝藏网站来喽!

抖音识图功能，开启流量新渠道!

在线查询与防御:网站安全挂马检测指南

无需翻墙:精选网站大集合 无需付费的网站大全推荐

取消回复欢迎你发表评论:

无需翻墙:精选网站大集合无需付费的网站大全推荐