本文分享一個基于 Flask 框架開發的個人博客系統后端項目，涵蓋用戶注冊登錄、文章發布、分類管理、評論功能等核心模塊。適合初學者學習和中小型博客系統開發。
一、項目結構
blog
│ app.py
│ forms.py
│ models.py
│
├───instance
│ blog.db
│
├───static
│ qu.jpg
│ styles.css
│ wc.jpg
│
├───templates
│ base.html
│ categories.html
│ category.html
│ edit_post.html
│ first.html
│ index.html
│ login.html
│ post.html
│ register.html
│ welcome.htmlapp.py：Flask 應用主程序，負責路由定義、請求處理和業務邏輯。
forms.py：定義所有 Web 表單類，負責用戶輸入驗證。
models.py：定義數據庫模型，映射用戶、文章、分類和評論表。
instance/blog.db：SQLite 數據庫文件，存儲所有數據。
static/：靜態資源文件夾，存放圖片、CSS 樣式等。
templates/：HTML 模板文件夾，使用 Jinja2 模板引擎渲染頁面。
二、主要功能
1. 用戶管理
- 注冊：用戶通過注冊表單輸入用戶名、郵箱和密碼，密碼經過哈希加密存儲，保證安全。
- 登錄/登出：支持用戶登錄驗證，登錄后可訪問受保護頁面，登出后清除會話。
- 用戶認證：集成 Flask-Login，管理用戶會話和權限。
2. 文章管理
- 發布文章：登錄用戶可以創建新文章，填寫標題、內容并選擇分類。
- 文章展示：首頁展示所有文章列表，點擊進入文章詳情頁查看完整內容和評論。
- 新建文章：文章新建。
3. 分類管理
- 分類列表：展示所有文章分類，方便用戶瀏覽不同主題文章。
- 分類詳情：查看某個分類下的所有文章。
4. 評論功能
- 添加評論：用戶可以在文章詳情頁發表評論。
- 評論展示：文章詳情頁顯示所有評論，增強互動性。
三、運行測試
環境準備：pip install flask flask_sqlalchem? 等等
啟動項目：運行 python app.py 訪問 http://127.0.0.1:5000/ 進入博客首頁
數據庫初始化：程序啟動時自動創建數據庫和默認分類，無需手動操作
四、code
1、python code
app.py
import logging
from flask import Flask, render_template, redirect, url_for, flash, request
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, login_user, login_required, logout_user, current_user
from werkzeug.security import generate_password_hash, check_password_hash
from models import db, User, Post, Category, Comment
from forms import RegistrationForm, LoginForm, PostForm, CategoryForm
from datetime import datetime# 初始化日志配置
logging.basicConfig(level=logging.INFO,format='%(asctime)s - %(levelname)s - %(message)s'
)
logger = logging.getLogger(__name__)app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
db.init_app(app)login_manager = LoginManager()
login_manager.init_app(app)@login_manager.user_loader
def load_user(user_id):logger.debug(f"加載用戶，ID={user_id}")return db.session.get(User, int(user_id))@app.route('/')
def first():logger.info("訪問首頁 /")return render_template('first.html')@app.route('/welcome')
def welcome():logger.info("訪問歡迎頁 /welcome")return render_template('welcome.html')@app.route('/index')
def index():logger.info("訪問文章列表頁 /index")posts = Post.query.all()logger.info(f"查詢到 {len(posts)} 篇文章")return render_template('index.html', posts=posts)@app.route('/register', methods=['GET', 'POST'])
def register():form = RegistrationForm()if form.validate_on_submit():# 先檢查郵箱是否已存在existing_user = User.query.filter_by(email=form.email.data).first()if existing_user:flash('該郵箱已被注冊，請使用其他郵箱。', 'warning')logger.warning(f"注冊失敗，郵箱已存在: {form.email.data}")return render_template('register.html', form=form)# 也可以檢查用戶名是否已存在，防止重復existing_username = User.query.filter_by(username=form.username.data).first()if existing_username:flash('該用戶名已被使用，請選擇其他用戶名。', 'warning')logger.warning(f"注冊失敗，用戶名已存在: {form.username.data}")return render_template('register.html', form=form)hashed_password = generate_password_hash(form.password.data, method='pbkdf2:sha256')new_user = User(username=form.username.data, email=form.email.data, password=hashed_password)db.session.add(new_user)try:db.session.commit()flash('注冊成功！', 'success')logger.info(f"用戶注冊成功，用戶名: {new_user.username}, 郵箱: {new_user.email}")return redirect(url_for('login'))except IntegrityError as e:db.session.rollback()flash('注冊失敗，用戶名或郵箱已存在。', 'danger')logger.error(f"數據庫錯誤，注冊失敗: {e}")return render_template('register.html', form=form)elif request.method == 'POST':logger.warning(f"注冊表單驗證失敗，錯誤: {form.errors}")return render_template('register.html', form=form)@app.route('/login', methods=['GET', 'POST'])
def login():form = LoginForm()if form.validate_on_submit():logger.info(f"登錄嘗試，用戶名: {form.username.data}")user = User.query.filter_by(username=form.username.data).first()if user and check_password_hash(user.password, form.password.data):login_user(user)logger.info(f"用戶登錄成功，用戶名: {user.username}")return redirect(url_for('welcome'))else:logger.warning("登錄失敗，用戶名或密碼錯誤")flash('登錄失敗，請檢查用戶名和密碼', 'danger')elif request.method == 'POST':logger.warning(f"登錄表單驗證失敗，錯誤: {form.errors}")return render_template('login.html', form=form)@app.route('/logout')
@login_required
def logout():logger.info(f"用戶登出，用戶名: {current_user.username}")logout_user()return render_template('base.html')@app.route('/post/new', methods=['GET', 'POST'])
@login_required
def new_post():form = PostForm()form.category_id.choices = [(c.id, c.name) for c in Category.query.all()]if form.validate_on_submit():logger.info(f"用戶 {current_user.username} 創建新文章，標題: {form.title.data}")new_post = Post(title=form.title.data, content=form.content.data, category_id=form.category_id.data)db.session.add(new_post)db.session.commit()logger.info(f"文章創建成功，ID: {new_post.id}")flash('文章已創建！', 'success')return redirect(url_for('index'))elif request.method == 'POST':logger.warning(f"文章表單驗證失敗，錯誤: {form.errors}")return render_template('edit_post.html', form=form)@app.route('/post/<int:post_id>')
def post(post_id):logger.info(f"訪問文章詳情頁，文章ID: {post_id}")post = Post.query.get_or_404(post_id)comments = Comment.query.filter_by(post_id=post.id).all()logger.info(f"文章 {post_id} 有 {len(comments)} 條評論")return render_template('post.html', post=post, comments=comments)@app.route('/post/<int:post_id>/comment', methods=['POST'])
def add_comment(post_id):post = Post.query.get_or_404(post_id)author = request.form.get('author')content = request.form.get('content')logger.info(f"新增評論，文章ID: {post_id}, 作者: {author}")new_comment = Comment(post_id=post.id, author=author, content=content)db.session.add(new_comment)db.session.commit()logger.info(f"評論添加成功，評論ID: {new_comment.id}")return redirect(url_for('post', post_id=post.id))@app.route('/categories')
@login_required
def categories():logger.info(f"用戶 {current_user.username} 訪問分類列表")categories = Category.query.all()form = CategoryForm()return render_template('categories.html', categories=categories, form=form)@app.route('/category/<int:category_id>')
@login_required
def category(category_id):logger.info(f"用戶 {current_user.username} 訪問分類詳情，分類ID: {category_id}")category = Category.query.get_or_404(category_id)form = CategoryForm()return render_template('category.html', category=category, form=form)if __name__ == '__main__':with app.app_context():db.create_all()if not Category.query.first():categories = ['開發', '測試', '人生感悟', '雜項']for category_name in categories:category = Category(name=category_name)db.session.add(category)db.session.commit()logger.info("初始化默認分類數據")logger.info("數據庫表已創建或已存在。")app.run(debug=True)
forms.py
import logging
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, TextAreaField, SubmitField, SelectField
from wtforms.validators import DataRequired, Length# 初始化日志
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
logger = logging.getLogger(__name__)class RegistrationForm(FlaskForm): # 注冊表單username = StringField('用戶名', validators=[DataRequired(), Length(min=2, max=150)]) # 用戶名字段email = StringField('郵箱', validators=[DataRequired()]) # 郵箱字段password = PasswordField('密碼', validators=[DataRequired()]) # 密碼字段submit = SubmitField('注冊') # 提交按鈕def validate(self, *args, **kwargs):rv = super().validate(*args, **kwargs)if not rv:logger.warning("RegistrationForm 驗證失敗")else:logger.info(f"RegistrationForm 驗證成功，用戶名: {self.username.data}")return rvclass LoginForm(FlaskForm): # 登錄表單username = StringField('用戶名', validators=[DataRequired()]) # 用戶名字段password = PasswordField('密碼', validators=[DataRequired()]) # 密碼字段submit = SubmitField('登錄') # 提交按鈕def validate(self, *args, **kwargs):rv = super().validate(*args, **kwargs)if not rv:logger.warning("LoginForm 驗證失敗")else:logger.info(f"LoginForm 驗證成功，用戶名: {self.username.data}")return rvclass CategoryForm(FlaskForm): # 分類表單name = StringField('分類', validators=[DataRequired(), Length(max=50)]) # 分類名稱字段def validate(self, *args, **kwargs):rv = super().validate(*args, **kwargs)if not rv:logger.warning("CategoryForm 驗證失敗")else:logger.info(f"CategoryForm 驗證成功，分類名稱: {self.name.data}")return rvclass PostForm(FlaskForm): # 文章表單title = StringField('標題', validators=[DataRequired()]) # 文章標題字段content = TextAreaField('內容', validators=[DataRequired()]) # 文章內容字段category_id = SelectField('分類', coerce=int, validators=[DataRequired()]) # 分類選擇字段submit = SubmitField('提交') # 提交按鈕def validate(self, *args, **kwargs):rv = super().validate(*args, **kwargs)if not rv:logger.warning("PostForm 驗證失敗")else:logger.info(f"PostForm 驗證成功，標題: {self.title.data}")return rv
models.py
import logging
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
from flask_login import UserMixin
#初始化日志
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
logger = logging.getLogger(__name__)
db = SQLAlchemy() # 創建 SQLAlchemy 實例
class User(db.Model, UserMixin): # 用戶模型id = db.Column(db.Integer, primary_key=True) # 用戶 IDusername = db.Column(db.String(150), unique=True, nullable=False) # 用戶名password = db.Column(db.String(150), nullable=False) # 密碼email = db.Column(db.String(150), unique=True, nullable=False) # 郵箱def __repr__(self):logger.info(f"User實例被創建: {self.username}")return f"<User {self.username}>"
class Category(db.Model): # 分類模型id = db.Column(db.Integer, primary_key=True) # 分類 IDname = db.Column(db.String(100), nullable=False) # 分類名稱posts = db.relationship('Post', backref='category', lazy=True) # 一對多關系，分類與文章def __repr__(self):logger.info(f"Category實例被創建: {self.name}")return f"<Category {self.name}>"
class Post(db.Model): # 文章模型id = db.Column(db.Integer, primary_key=True) # 文章 IDtitle = db.Column(db.String(150), nullable=False) # 文章標題content = db.Column(db.Text, nullable=False) # 文章內容created_at = db.Column(db.DateTime, default=datetime.now) # 創建時間updated_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now) # 更新時間category_id = db.Column(db.Integer, db.ForeignKey('category.id'), nullable=False) # 分類 IDdef __repr__(self):logger.info(f"Post實例被創建: {self.title}")return f"<Post {self.title}>"
class Comment(db.Model): # 評論模型id = db.Column(db.Integer, primary_key=True) # 評論 IDpost_id = db.Column(db.Integer, db.ForeignKey('post.id')) # 文章 IDauthor = db.Column(db.String(100), nullable=False) # 評論作者content = db.Column(db.Text, nullable=False) # 評論內容created_at = db.Column(db.DateTime, default=datetime.now) # 創建時間def __repr__(self):logger.info(f"Comment實例被創建，作者: {self.author}")return f"<Comment by {self.author}>"2、static files
styles.css
/* 基本重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* 容器樣式 */
.container {max-width: 800px; /* 最大寬度 */margin: 0 auto; /* 居中 */padding: 20px; /* 內邊距 */background: white; /* 背景顏色 */border-radius: 8px; /* 圓角 */box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */
}
/* 全局樣式 */
body {font-family: Arial, sans-serif;line-height: 1.6; /* 行高 */background-color: #f8f9fa;color: #343a40;margin: 0;padding: 20px;
}
/* 表單樣式 */
form {display: flex; /* 使用 flexbox */flex-direction: column; /* 垂直排列 */
}
form input, form select, form textarea {margin-bottom: 15px; /* 下邊距 */padding: 10px; /* 內邊距 */border: 1px solid #ccc; /* 邊框 */border-radius: 4px; /* 圓角 */
}
/* 導航欄樣式 */
.navbar {margin-bottom: 30px;
}
/* 按鈕樣式 */
button, input[type="submit"] {background-color: #007bff; /* 按鈕背景顏色 */color: white; /* 字體顏色 */border: none; /* 去掉邊框 */padding: 10px; /* 內邊距 */border-radius: 4px; /* 圓角 */cursor: pointer; /* 鼠標指針 */transition: background-color 0.3s; /* 背景顏色過渡效果 */
}
button:hover, input[type="submit"]:hover {background-color: #0056b3; /* 懸停時的背景顏色 */
}
/* 標題樣式 */
h1, h2, h3 {text-align: center; /* 標題居中 */margin-bottom: 20px; /* 下邊距 */
}
/* 消息提示樣式 */
.alert {margin-bottom: 20px; /* 下邊距 */padding: 15px; /* 內邊距 */border-radius: 4px; /* 圓角 */
}
.alert-danger {background-color: #f8d7da; /* 錯誤消息背景 */color: #721c24; /* 錯誤消息字體顏色 */
}
.alert-success {background-color: #d4edda; /* 成功消息背景 */color: #155724; /* 成功消息字體顏色 */
}
/* 文章列表樣式 */
.list-group-item {background-color: #ffffff;border: 1px solid #dee2e6;border-radius: 5px;margin-bottom: 10px;transition: background-color 0.3s;
}.list-group-item:hover {background-color: #f1f1f1;
}/* 文章標題樣式 */
h1 {font-size: 2.0rem;margin-bottom: 20px;
}/* 表單樣式 */
.form-label {font-weight: bold;
}.form-control {border-radius: 5px;
}.btn-primary {background-color: #007bff;border: none;border-radius: 5px;
}.btn-primary:hover {background-color: #0056b3;
}/* 評論區樣式 */
.comment-section {margin-top: 20px;
}.comment-section h3 {margin-bottom: 15px;
}.comment-section .list-group-item {background-color: #e9ecef;
}/* 頁腳樣式 */
footer {margin-top: 30px;text-align: center;font-size: 0.9rem;color: #6c757d;
}
/* 鏈接樣式 */
.nav-link {color: #007bff; /* 鏈接顏色 */font-size: 1.0rem;
}.nav-link:hover {color: #0056b3; /* 懸停時鏈接顏色 */font-size: 3ch;
}
3、html files
base.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" --><link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"><title>個人博客</title>
</head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="{{ url_for('first') }}">博客首頁</a><div class="collapse navbar-collapse"><ul class="navbar-nav mr-auto">{% if current_user.is_authenticated %}<li class="nav-item"><a class="nav-link" href="{{ url_for('index') }}">我的博客</a></li><li class="nav-item"><a class="nav-link" href="{{ url_for('new_post') }}">新建文章</a></li><li class="nav-item"><a class="nav-link" href="{{ url_for('categories') }}">分類</a></li><li class="nav-item"><a class="nav-link" href="{{ url_for('logout') }}">登出</a></li>{% else %}<li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}">登錄</a></li><li class="nav-item"><a class="nav-link" href="{{ url_for('register') }}">注冊</a></li>{% endif %}</ul></div></nav><div class="container mt-4">{% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}{% for category, message in messages %}<div class="alert alert-{{ category }} alert-dismissible fade show">{{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>{% endfor %}{% endif %}{% endwith %}{% block content %}{% endblock %}</div>
</body>
</html>
categories.html
{% extends 'base.html' %}{% block content %}
<h1>分類列表</h1>
<ul class="list-group">{% for category in categories %}<li class="list-group-item"><a href="{{ url_for('category', category_id=category.id) }}">{{ category.name }}</a><span class="badge bg-secondary">{{ category.posts|length }} 篇文章</span> <!-- 顯示文章數量 --></li>{% endfor %}<a href="{{ url_for('index') }}" class="btn btn-primary mt-4">返回首頁</a>
</ul>
{% endblock %}category.html
{% extends "base.html" %}{% block content %}
<h1 class="mt-5">{{ category.name }} 分類</h1>
<p>以下是屬于 "{{ category.name }}" 分類的文章：</p><div class="list-group">{% for post in category.posts %}<a href="{{ url_for('post', post_id=post.id) }}" class="list-group-item list-group-item-action"><h5 class="mb-1">{{ post.title }}</h5><p class="mb-1">{{ post.summary }}</p><small>發布于 {{ post.created_at.strftime('%Y-%m-%d') }}</small><small>分類: <a href="{{ url_for('category', category_id=post.category_id) }}">{{ post.category.name }}</a></small></a>{% else %}<div class="alert alert-info" role="alert">該分類下沒有文章。</div>{% endfor %}
</div>
<a href="{{ url_for('categories') }}" class="btn btn-secondary mt-5">返回分類列表</a>
{% endblock %}
edit_post.html
{% extends 'base.html' %}{% block content %}
<h1>新建文章</h1>
<form method="POST" action="{{ url_for('new_post') }}">{{ form.hidden_tag() }}<div class="mb-3">{{ form.title.label(class="form-label") }}{{ form.title(class="form-control") }}</div><div class="mb-3">{{ form.content.label(class="form-label") }}{{ form.content(class="form-control", rows=5) }}</div><div class="mb-3">{{ form.category_id.label(class="form-label") }}{{ form.category_id(class="form-select") }}</div><button type="submit" class="btn btn-primary">提交</button>
</form>
{% endblock %}
first.html
{% extends "base.html" %}{% block content %}
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動態時間與圖片展示</title><style>#current-time {font-size: 24px;font-weight: bold;margin: 20px 0;}img {max-width: 100%;height: auto;margin-top: 20px;}</style>
</head>
<body><h1>歡迎來到個人博客系統</h1><div id="current-time"></div> <!-- 顯示當前時間 --><img src="{{ url_for('static', filename='qu.jpg') }}" alt="展示圖片"> <!-- 替換為你的圖片路徑 --><script>function updateTime() {const now = new Date();const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };document.getElementById('current-time').innerText = now.toLocaleString('zh-CN', options);}setInterval(updateTime, 1000); // 每秒更新一次時間updateTime(); // 頁面加載時立即顯示時間</script>
</body>
{% endblock %}
login.html
{% extends 'base.html' %}{% block content %}
<h1>登錄</h1>
<form method="POST">{{ form.hidden_tag() }}<div class="mb-3">{{ form.username.label(class="form-label") }}{{ form.username(class="form-control") }}</div><div class="mb-3">{{ form.password.label(class="form-label") }}{{ form.password(class="form-control") }}</div><button type="submit" class="btn btn-primary">登錄</button>
</form>
{% endblock %}
index.html
{% extends 'base.html' %}
{% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}<ul class="flashes">{% for category, message in messages %}<li class="{{ category }}">{{ message }}</li>{% endfor %}</ul>{% endif %}
{% endwith %}
{% block content %}
<h1>文章列表</h1>
<ul class="list-group">{% for post in posts %}<li class="list-group-item"><a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a><small class="text-muted">創建于 {{ post.created_at.strftime('%Y-%m-%d') }}</small></li>{% endfor %}
</ul>
{% endblock %}
post.html
{% extends 'base.html' %}{% block content %}
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
<h3>評論</h3>
<form method="POST" action="{{ url_for('add_comment', post_id=post.id) }}"><input type="text" name="author" placeholder="你的名字" required><textarea name="content" placeholder="你的評論" required></textarea><button type="submit">提交評論</button>
</form>
<ul class="list-group mt-3">{% for comment in comments %}<li class="list-group-item"><strong>{{ comment.author }}</strong>: {{ comment.content }}</li>{% endfor %}
</ul>
{% endblock %}
register.html
{% extends 'base.html' %}{% block content %}
<h1>注冊</h1>
<form method="POST">{{ form.hidden_tag() }}<div class="mb-3">{{ form.username.label(class="form-label") }}{{ form.username(class="form-control") }}</div><div class="mb-3">{{ form.email.label(class="form-label") }}{{ form.email(class="form-control") }}</div><div class="mb-3">{{ form.password.label(class="form-label") }}{{ form.password(class="form-control") }}</div><button type="submit" class="btn btn-primary">注冊</button>
</form>
{% endblock %}
?welcome.html
<!-- templates/welcome.html -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"><title>歡迎</title>
</head>
<body><div class="container mt-4"><h1>歡迎, {{ current_user.username }}!</h1><p>感謝您登錄到個人博客系統。</p><img src="{{ url_for('static', filename='wc.jpg') }}" alt="歡迎圖片" style="max-width: 100%; height: auto;"><p><a href="{{ url_for('index') }}">我的博客</a></p><p><a href="{{ url_for('first') }}">返回首頁</a></p></div>
</body>
</html>五、效果展示
?
 日常運維命令總結)
——創建，退出)
