建站百科 Website News

元素中进行展示。

四、文章发布功能

表单类定义（使用 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）：

个人博客 - 发布文章发布新文章{{ form.csrf_token }}{{ form.title.label }} {{ form.title }}{{ form.content.label }} {{ form.content }}{{ form.submit }}

在这个模板中，创建了一个  表单元素，设置表单提交方法为 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 项目实战#