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

一、项目准备

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

二、文章列表展示功能

1. 后端路由与数据查询逻辑：
   在 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 模板进行渲染展示。

2. HTML 模板设计（article_list.html）：

    
    
    



    
我的博客文章列表
    

        {% for article in articles %}
        
{{ article.title }}
        {% endfor %}
    

在这个模板中，首先设置了页面标题等基本信息，并且引入了外部的 CSS 文件（styles.css，后续会介绍样式设计）。然后通过 Jinja2 模板引擎的循环语法 {% for article in articles %} 遍历从后端传递过来的文章列表，为每篇文章生成一个列表项

@app.route('/article/')
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 '
文章不存在
'

    
    
    



    
{{ article.title }}
    

        {{ article.content }}
    

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('发布文章')

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)

    
    
    



    
发布新文章
    

        {{ form.csrf_token }}
        
{{ form.title.label }} {{ form.title }}
        
{{ form.content.label }} {{ form.content }}
        
{{ form.submit }}
    

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;
}