Copyright © 1998-2023 maxiaoke.com All rights reserved.

当前位置:　 首页>> 技术小册>> Flask框架入门指南

小册名称：Flask框架入门指南

实战项目一：搭建个人博客系统

引言

在Flask框架的学习旅程中，通过实战项目来巩固理论知识并提升实践能力是至关重要的。本章将引导你通过一系列步骤，从零开始搭建一个功能完备的个人博客系统。这个项目不仅能帮助你深入理解Flask的核心概念，如路由、模板渲染、表单处理、数据库操作等，还能让你体验到将理论知识应用于实际项目开发的乐趣。

项目概述

我们的个人博客系统将具备以下基本功能：

  1. 用户注册与登录：用户能够注册新账户并通过账户登录系统。
  2. 文章发布与管理：登录后的用户可以发布新文章，查看、编辑及删除自己的文章。
  3. 文章展示：所有公开文章都将展示在博客首页，支持按时间排序和分页显示。
  4. 用户个人页面：每个用户拥有个人页面，展示其所有文章。
  5. 评论系统：读者可以对文章进行评论，评论需经管理员审核后显示。

环境搭建

在开始编码之前，请确保你的开发环境已经安装了以下工具：

  • Python 3.x
  • Flask
  • Flask-Login（用于用户会话管理）
  • Flask-SQLAlchemy（ORM工具，简化数据库操作）
  • Flask-WTF（集成WTForms，简化表单处理）
  • 其他可能需要的库，如Flask-Migrate（数据库迁移）、Pillow（图像处理）等

你可以通过pip安装这些库：

  1. pip install Flask Flask-Login Flask-SQLAlchemy Flask-WTF Flask-Migrate Pillow

数据库设计

我们将使用SQLite作为数据库，因为它轻量级且易于配置。首先，定义数据库模型：

  1. from flask_sqlalchemy import SQLAlchemy
  2. from datetime import datetime
  4. db = SQLAlchemy()
  6. class User(db.Model):
  7.     id = db.Column(db.Integer, primary_key=True)
  8.     username = db.Column(db.String(80), unique=True, nullable=False)
  9.     email = db.Column(db.String(120), unique=True, nullable=False)
  10.     password = db.Column(db.String(200), nullable=False)
  11.     posts = db.relationship('Post', backref='author', lazy=True)
  13. class Post(db.Model):
  14.     id = db.Column(db.Integer, primary_key=True)
  15.     title = db.Column(db.String(200), nullable=False)
  16.     content = db.Column(db.Text, nullable=False)
  17.     timestamp = db.Column(db.DateTime, default=datetime.utcnow)
  18.     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
  20. class Comment(db.Model):
  21.     id = db.Column(db.Integer, primary_key=True)
  22.     body = db.Column(db.Text, nullable=False)
  23.     timestamp = db.Column(db.DateTime, default=datetime.utcnow)
  24.     approved = db.Column(db.Boolean, default=False)
  25.     post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=False)
  26.     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)

项目结构

建议的项目结构如下：

  1. /your-blog-project
  2.     /app
  3.         /__init__.py
  4.         /models.py  # 存放数据库模型
  5.         /routes.py  # 定义路由和视图函数
  6.         /templates  # 存放HTML模板
  7.             /layout.html  # 基础模板
  8.             /index.html
  9.             /login.html
  10.             /register.html
  11.             /post.html
  12.             /edit_post.html
  13.             /user.html
  14.         /static  # 存放静态文件
  15.             /css
  16.             /js
  17.             /images
  18.         /forms.py  # 定义表单类
  19.         /config.py  # 配置文件
  20.     /run.py  # 启动文件
  21.     /requirements.txt  # 依赖文件

路由与视图函数

在routes.py中定义应用的路由和视图函数。这里只展示部分关键代码：

  1. from flask import Blueprint, render_template, redirect, url_for, flash, request
  2. from flask_login import login_user, logout_user, login_required, current_user
  3. from . import db, forms, models
  5. bp = Blueprint('main', __name__)
  7. @bp.route('/')
  8. def index():
  9.     posts = models.Post.query.order_by(models.Post.timestamp.desc()).all()
  10.     return render_template('index.html', posts=posts)
  12. @bp.route('/register', methods=['GET', 'POST'])
  13. def register():
  14.     form = forms.RegistrationForm()
  15.     if form.validate_on_submit():
  16.         hashed_password = bcrypt.generate_password_hash(form.password.data).decode('utf-8')
  17.         new_user = models.User(username=form.username.data, email=form.email.data, password=hashed_password)
  18.         db.session.add(new_user)
  19.         db.session.commit()
  20.         flash('Your account has been created! You are now able to log in', 'success')
  21.         return redirect(url_for('main.login'))
  22.     return render_template('register.html', title='Register', form=form)
  24. # 其他路由如登录、注销、发布文章、编辑文章等...

模板与表单

使用Jinja2模板引擎来渲染HTML页面。在templates目录下创建相应的HTML模板文件，并使用Flask-WTF定义的表单类在模板中渲染表单。

例如，在login.html模板中：

  1. {% extends "layout.html" %}
  2. {% block content %}
  3. <div class="container">
  4.     <h2>Login</h2>
  5.     <form method="POST" action="{{ url_for('main.login') }}">
  6.         {{ form.hidden_tag() }}
  7.         <div class="form-group">
  8.             {{ form.username.label(class="form-control-label") }}
  9.             {{ form.username(class="form-control form-control-lg") }}
  10.         </div>
  11.         <div class="form-group">
  12.             {{ form.password.label(class="form-control-label") }}
  13.             {{ form.password(class="form-control form-control-lg") }}
  14.         </div>
  15.         <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
  16.     </form>
  17. </div>
  18. {% endblock %}

安全性考虑

  • 密码哈希：使用bcrypt库对密码进行哈希处理，避免明文存储。
  • 防止SQL注入：通过Flask-SQLAlchemy的ORM操作数据库，自动防止SQL注入。
  • 跨站请求伪造（CSRF）保护：Flask-WTF已内置CSRF保护，确保表单提交的安全性。
  • 用户会话管理：使用Flask-Login管理用户会话，确保用户状态的安全性。

结语

通过以上步骤，你已经成功搭建了一个基本功能的个人博客系统。这只是一个起点，你可以根据需要添加更多功能，如标签系统、文章分类、搜索功能、图片上传等。同时，也可以对前端进行美化，提升用户体验。随着项目的深入，你将更加熟悉Flask框架，并积累宝贵的项目开发经验。

该分类下的相关小册推荐：

Flask框架零基础入门与实战开发
Flask框架零基础入门与实战开发