1. 引言
在当今信息爆炸的时代，个人博客作为一种自我表达和知识分享的平台，依然具有其独特的价值和魅力。本文将详细介绍如何使用Python的Flask框架设计和实现一个功能完善的个人博客系统，从需求分析、系统设计到具体实现，全面展示这一过程中的技术要点和实践经验。
2. 需求分析
2.1 功能需求
一个完善的个人博客系统应具备以下核心功能：
- 文章管理：发布、编辑、删除文章
- 分类管理：创建、编辑、删除分类
- 标签管理：添加、编辑、删除标签
- 评论系统：发表、回复、管理评论
- 用户管理：注册、登录、个人资料管理
- 搜索功能：按关键词、分类、标签搜索文章
- 归档功能：按时间、分类归档文章
- 后台管理：管理员对博客进行全面管理
2.2 非功能需求
- 安全性：防止SQL注入、XSS攻击等
- 性能：页面加载速度快，响应及时
- 可扩展性：系统架构便于后续功能扩展
- 用户体验：界面美观，操作简单直观
- SEO友好：利于搜索引擎收录和排名
3. 技术选型
3.1 后端技术
- Flask：轻量级Web框架，灵活且易于扩展
- SQLAlchemy：ORM工具，简化数据库操作
- Flask-Login：处理用户认证
- Flask-WTF：表单验证和CSRF保护
- Flask-Migrate：数据库迁移管理
- Markdown：支持Markdown格式文章编写
3.2 前端技术
- Bootstrap：响应式前端框架
- jQuery：简化DOM操作
- Summernote/SimpleMDE：富文本/Markdown编辑器
- Font Awesome：图标库
3.3 数据库
- SQLite：开发环境使用，简单轻量
- MySQL/PostgreSQL：生产环境使用，性能更佳
4. 系统设计
4.1 系统架构
采用经典的MVC架构：
- Model：数据模型，使用SQLAlchemy定义
- View：视图层，使用Jinja2模板引擎
- Controller：控制器，使用Flask路由和视图函数
4.2 数据库设计
用户表(User)
python
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(64), unique=True, nullable=False)
email = db.Column(db.String(120), unique=True, nullable=False)
password_hash = db.Column(db.String(128))
avatar = db.Column(db.String(128))
about_me = db.Column(db.Text)
created_time = db.Column(db.DateTime, default=datetime.utcnow)
last_seen = db.Column(db.DateTime, default=datetime.utcnow)
posts = db.relationship('Post', backref='author', lazy='dynamic')
comments = db.relationship('Comment', backref='author', lazy='dynamic')文章表(Post)
python
class Post(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(128), nullable=False)
slug = db.Column(db.String(128), unique=True)
content = db.Column(db.Text)
summary = db.Column(db.String(256))
created_time = db.Column(db.DateTime, default=datetime.utcnow)
updated_time = db.Column(db.DateTime, default=datetime.utcnow)
views = db.Column(db.Integer, default=0)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
category_id = db.Column(db.Integer, db.ForeignKey('category.id'))
comments = db.relationship('Comment', backref='post', lazy='dynamic')
tags = db.relationship('Tag', secondary=post_tags, backref=db.backref('posts', lazy='dynamic'))分类表(Category)
python
class Category(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
description = db.Column(db.String(256))
posts = db.relationship('Post', backref='category', lazy='dynamic')标签表(Tag)
python
class Tag(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
posts = db.relationship('Post', secondary=post_tags, backref=db.backref('tags', lazy='dynamic'))评论表(Comment)
python
class Comment(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.Text)
created_time = db.Column(db.DateTime, default=datetime.utcnow)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
post_id = db.Column(db.Integer, db.ForeignKey('post.id'))
parent_id = db.Column(db.Integer, db.ForeignKey('comment.id'))
replies = db.relationship('Comment', backref=db.backref('parent', remote_side=[id]), lazy='dynamic')4.3 目录结构
blog/
├── app/
│ ├── __init__.py # 应用初始化
│ ├── models.py # 数据模型
│ ├── forms.py # 表单类
│ ├── routes/ # 路由模块
│ │ ├── __init__.py
│ │ ├── main.py # 主页路由
│ │ ├── auth.py # 认证路由
│ │ ├── blog.py # 博客路由
│ │ └── admin.py # 管理路由
│ ├── static/ # 静态文件
│ │ ├── css/
│ │ ├── js/
│ │ └── images/
│ └── templates/ # 模板文件
│ ├── base.html # 基础模板
│ ├── index.html # 首页模板
│ ├── auth/ # 认证相关模板
│ ├── blog/ # 博客相关模板
│ └── admin/ # 管理相关模板
├── migrations/ # 数据库迁移文件
├── config.py # 配置文件
├── run.py # 启动脚本
└── requirements.txt # 依赖包列表5. 核心功能实现
5.1 应用初始化
python
# app/__init__.py
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_login import LoginManager
from config import Config
db = SQLAlchemy()
migrate = Migrate()
login = LoginManager()
login.login_view = 'auth.login'
def create_app(config_class=Config):
app = Flask(__name__)
app.config.from_object(config_class)
db.init_app(app)
migrate.init_app(app, db)
login.init_app(app)
from app.routes import main, auth, blog, admin
app.register_blueprint(main.bp)
app.register_blueprint(auth.bp, url_prefix='/auth')
app.register_blueprint(blog.bp, url_prefix='/blog')
app.register_blueprint(admin.bp, url_prefix='/admin')
return app5.2 用户认证
python
# app/routes/auth.py
from flask import Blueprint, render_template, redirect, url_for, flash, request
from flask_login import login_user, logout_user, current_user
from app import db
from app.models import User
from app.forms import LoginForm, RegistrationForm
from werkzeug.urls import url_parse
bp = Blueprint('auth', __name__)
@bp.route('/login', methods=['GET', 'POST'])
def login():
if current_user.is_authenticated:
return redirect(url_for('main.index'))
form = LoginForm()
if form.validate_on_submit():
user = User.query.filter_by(username=form.username.data).first()
if user is None or not user.check_password(form.password.data):
flash('用户名或密码错误')
return redirect(url_for('auth.login'))
login_user(user, remember=form.remember_me.data)
next_page = request.args.get('next')
if not next_page or url_parse(next_page).netloc != '':
next_page = url_for('main.index')
return redirect(next_page)
return render_template('auth/login.html', title='登录', form=form)
@bp.route('/logout')
def logout():
logout_user()
return redirect(url_for('main.index'))
@bp.route('/register', methods=['GET', 'POST'])
def register():
if current_user.is_authenticated:
return redirect(url_for('main.index'))
form = RegistrationForm()
if form.validate_on_submit():
user = User(username=form.username.data, email=form.email.data)
user.set_password(form.password.data)
db.session.add(user)
db.session.commit()
flash('注册成功，请登录！')
return redirect(url_for('auth.login'))
return render_template('auth/register.html', title='注册', form=form)5.3 文章管理
python
# app/routes/blog.py
from flask import Blueprint, render_template, redirect, url_for, flash, request, abort
from flask_login import login_required, current_user
from app import db
from app.models import Post, Category, Tag, Comment
from app.forms import PostForm, CommentForm
from datetime import datetime
from slugify import slugify
bp = Blueprint('blog', __name__)
@bp.route('/')
def index():
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.created_time.desc()).paginate(
page=page, per_page=10, error_out=False)
return render_template('blog/index.html', title='博客首页', posts=posts)
@bp.route('/post/<slug>')
def post(slug):
post = Post.query.filter_by(slug=slug).first_or_404()
# 增加浏览量
post.views += 1
db.session.commit()
form = CommentForm()
return render_template('blog/post.html', title=post.title, post=post, form=form)
@bp.route('/create', methods=['GET', 'POST'])
@login_required
def create():
form = PostForm()
form.category.choices = [(c.id, c.name) for c in Category.query.all()]
if form.validate_on_submit():
slug = slugify(form.title.data)
post = Post(title=form.title.data, content=form.content.data,
summary=form.summary.data, slug=slug,
author=current_user, category_id=form.category.data)
# 处理标签
tags = form.tags.data.split(',')
for tag_name in tags:
tag_name = tag_name.strip()
if tag_name:
tag = Tag.query.filter_by(name=tag_name).first()
if not tag:
tag = Tag(name=tag_name)
db.session.add(tag)
post.tags.append(tag)
db.session.add(post)
db.session.commit()
flash('文章发布成功！')
return redirect(url_for('blog.post', slug=post.slug))
return render_template('blog/create.html', title='发布文章', form=form)
@bp.route('/edit/<slug>', methods=['GET', 'POST'])
@login_required
def edit(slug):
post = Post.query.filter_by(slug=slug).first_or_404()
if post.author != current_user:
abort(403)
form = PostForm()
form.category.choices = [(c.id, c.name) for c in Category.query.all()]
if form.validate_on_submit():
post.title = form.title.data
post.content = form.content.data
post.summary = form.summary.data
post.category_id = form.category.data
post.updated_time = datetime.utcnow()
# 处理标签
post.tags = []
tags = form.tags.data.split(',')
for tag_name in tags:
tag_name = tag_name.strip()
if tag_name:
tag = Tag.query.filter_by(name=tag_name).first()
if not tag:
tag = Tag(name=tag_name)
db.session.add(tag)
post.tags.append(tag)
db.session.commit()
flash('文章更新成功！')
return redirect(url_for('blog.post', slug=post.slug))
elif request.method == 'GET':
form.title.data = post.title
form.content.data = post.content
form.summary.data = post.summary
form.category.data = post.category_id
form.tags.data = ','.join([tag.name for tag in post.tags])
return render_template('blog/edit.html', title='编辑文章', form=form)5.4 评论系统
python
# 添加评论功能
@bp.route('/post/<slug>/comment', methods=['POST'])
@login_required
def comment(slug):
post = Post.query.filter_by(slug=slug).first_or_404()
form = CommentForm()
if form.validate_on_submit():
comment = Comment(content=form.content.data, post=post, author=current_user)
db.session.add(comment)
db.session.commit()
flash('评论发表成功！')
return redirect(url_for('blog.post', slug=slug))
# 回复评论
@bp.route('/comment/<int:comment_id>/reply', methods=['POST'])
@login_required
def reply(comment_id):
parent = Comment.query.get_or_404(comment_id)
form = CommentForm()
if form.validate_on_submit():
comment = Comment(content=form.content.data, post=parent.post,
author=current_user, parent=parent)
db.session.add(comment)
db.session.commit()
flash('回复发表成功！')
return redirect(url_for('blog.post', slug=parent.post.slug))5.5 后台管理
python
# app/routes/admin.py
from flask import Blueprint, render_template, redirect, url_for, flash, request
from flask_login import login_required, current_user
from app import db
from app.models import User, Post, Category, Tag, Comment
from app.forms import CategoryForm, ProfileForm
from functools import wraps
bp = Blueprint('admin', __name__)
def admin_required(f):
@wraps(f)
def decorated_function(*args, **kwargs):
if not current_user.is_admin:
abort(403)
return f(*args, **kwargs)
return decorated_function
@bp.route('/')
@login_required
@admin_required
def index():
posts_count = Post.query.count()
comments_count = Comment.query.count()
users_count = User.query.count()
categories_count = Category.query.count()
return render_template('admin/index.html', title='管理后台',
posts_count=posts_count, comments_count=comments_count,
users_count=users_count, categories_count=categories_count)
@bp.route('/posts')
@login_required
@admin_required
def posts():
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.created_time.desc()).paginate(
page=page, per_page=20, error_out=False)
return render_template('admin/posts.html', title='文章管理', posts=posts)
@bp.route('/categories', methods=['GET', 'POST'])
@login_required
@admin_required
def categories():
form = CategoryForm()
if form.validate_on_submit():
category = Category(name=form.name.data, description=form.description.data)
db.session.add(category)
db.session.commit()
flash('分类创建成功！')
return redirect(url_for('admin.categories'))
categories = Category.query.all()
return render_template('admin/categories.html', title='分类管理',
form=form, categories=categories)
@bp.route('/users')
@login_required
@admin_required
def users():
page = request.args.get('page', 1, type=int)
users = User.query.paginate(page=page, per_page=20, error_out=False)
return render_template('admin/users.html', title='用户管理', users=users)
@bp.route('/comments')
@login_required
@admin_required
def comments():
page = request.args.get('page', 1, type=int)
comments = Comment.query.order_by(Comment.created_time.desc()).paginate(
page=page, per_page=20, error_out=False)
return render_template('admin/comments.html', title='评论管理', comments=comments)6. 前端实现
6.1 基础模板
html
<!-- app/templates/base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if title %}{{ title }} - {% endif %}我的博客</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% block styles %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{{ url_for('main.index') }}">我的博客</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('main.index') }}">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('blog.index') }}">博客</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('main.about') }}">关于</a>
</li>
</ul>
<ul class="navbar-nav">
{% if current_user.is_anonymous %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('auth.login') }}">登录</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('auth.register') }}">注册</a>
</li>
{% else %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
{{ current_user.username }}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{{ url_for('blog.create') }}">发布文章</a></li>
{% if current_user.is_admin %}
<li><a class="dropdown-item" href="{{ url_for('admin.index') }}">管理后台</a></li>
{% endif %}
<li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">个人资料</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">退出</a></li>
</ul>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="row">
<div class="col-md-12">
{% for message in messages %}
<div class="alert alert-info alert-dismissible fade show">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<footer class="footer mt-5 py-3 bg-light">
<div class="container text-center">
<span class="text-muted">© 2025 我的博客 - 基于Flask的个人博客系统</span>
</div>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% block scripts %}{% endblock %}
</body>
</html>7. 部署与优化
7.1 部署准备
在生产环境部署Flask应用，需要考虑以下几点：
- 使用生产级Web服务器：如Nginx + Gunicorn
- 配置HTTPS：使用SSL证书确保安全连接
- 数据库迁移：从SQLite迁移到MySQL或PostgreSQL
- 静态文件处理：使用CDN或Nginx直接提供静态文件
- 日志管理：配置适当的日志记录和监控
7.2 性能优化
为提高博客系统性能，可以采取以下措施：
- 数据库优化：添加适当的索引，优化查询
- 缓存机制：使用Redis缓存热门内容和查询结果
- 延迟加载：对非关键资源采用延迟加载策略
- 压缩静态资源：压缩CSS、JavaScript和图片
- 数据库连接池：使用连接池管理数据库连接
7.3 安全加固
保障博客系统安全，需要注意以下几点：
- 输入验证：严格验证所有用户输入
- CSRF保护：使用Flask-WTF提供的CSRF保护
- XSS防御：对用户输入内容进行HTML转义
- 密码安全：使用bcrypt等算法安全存储密码
- 定期更新：及时更新依赖包，修复安全漏洞
8. 扩展功能
在基础功能之上，可以考虑添加以下扩展功能：
- 社交媒体集成：分享文章到社交媒体
- RSS订阅：提供RSS订阅功能
- 全文搜索：使用Elasticsearch实现高级搜索
- 多语言支持：使用Flask-Babel添加多语言支持
- 数据分析：添加访问统计和数据分析功能
- 邮件通知：评论回复邮件通知
- API接口：提供RESTful API接口
9. 总结与展望
本文详细介绍了基于Flask框架开发个人博客系统的完整过程，从需求分析、技术选型到系统设计和功能实现。通过这个项目，我们不仅实现了一个功能完善的博客系统，也深入理解了Flask框架的工作原理和Web应用开发的最佳实践。
未来，随着技术的发展，个人博客系统还可以在以下方面进行改进：
- 前后端分离：采用Vue.js或React构建前端，Flask提供API
- 容器化部署：使用Docker和Kubernetes实现容器化部署
- 微服务架构：将系统拆分为多个微服务，提高可扩展性
- AI内容推荐：基于用户行为和文章内容，实现智能推荐
- 实时通信：使用WebSocket实现实时通知和在线交流
通过不断学习和实践，我们可以将这个个人博客系统打造成一个功能丰富、性能卓越、用户体验良好的现代化Web应用。
源代码
Directory Content Summary
Source Directory: ./blog
Directory Structure
blog/
requirements.txt
run.py
app/
init_db.py
models.py
utils.py
__init__.py
routes/
auth.py
blog.py
static/
css/
style.css
images/
js/
comments.js
main.js
uploads/
avatars/
templates/
base.html
admin/
categories.html
category_form.html
comments.html
dashboard.html
posts.html
post_form.html
tags.html
tag_form.html
auth/
change_password.html
login.html
my_posts.html
profile.html
register.html
user_list.html
blog/
archives.html
category.html
comments.html
create_post.html
edit_post.html
index.html
post_detail.html
search.html
sidebar.html
tag.html
errors/
404.html
500.htmlFile Contents
requirements.txt
text/plain
Flask==2.2.3
Flask-SQLAlchemy==3.0.3
Flask-Login==0.6.2
Flask-Migrate==4.0.4
Pillow==9.5.0
Werkzeug==2.2.3
email-validator==2.0.0
python-slugify==8.0.1run.py
text/x-python
from app import create_app, db
from app.models import User, Category, Tag, Post, Comment
app = create_app()
@app.shell_context_processor
def make_shell_context():
return {
'db': db,
'User': User,
'Category': Category,
'Tag': Tag,
'Post': Post,
'Comment': Comment
}
if __name__ == '__main__':
app.run(debug=True)app\init_db.py
text/x-python
from app import create_app, db
from app.models import User, Category, Tag, Post, Comment
from werkzeug.security import generate_password_hash
from datetime import datetime
def init_db():
"""初始化数据库，创建表和初始数据"""
app = create_app()
with app.app_context():
# 创建所有表
db.create_all()
# 检查是否已有管理员用户
admin = User.query.filter_by(username='admin').first()
if not admin:
# 创建管理员用户
admin = User(
username='admin',
email='[email protected]',
password_hash=generate_password_hash('admin123'),
is_admin=True,
created_time=datetime.utcnow(),
last_seen=datetime.utcnow(),
about_me='系统管理员'
)
db.session.add(admin)
# 检查是否已有默认分类
default_category = Category.query.filter_by(name='未分类').first()
if not default_category:
# 创建默认分类
default_category = Category(
name='未分类',
description='默认分类',
order=0
)
db.session.add(default_category)
# 提交更改
db.session.commit()
print("数据库初始化完成！")
print("管理员用户名: admin")
print("管理员密码: admin123")
if __name__ == '__main__':
init_db()app\models.py
text/x-python
from datetime import datetime
from flask import url_for
from flask_login import UserMixin
from werkzeug.security import generate_password_hash, check_password_hash
from app import db
from markdown import markdown
# 文章和标签的多对多关系表
post_tags = db.Table(
'post_tags',
db.Column('post_id', db.Integer, db.ForeignKey('post.id'), primary_key=True),
db.Column('tag_id', db.Integer, db.ForeignKey('tag.id'), primary_key=True)
)
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(64), unique=True, nullable=False)
email = db.Column(db.String(120), unique=True, nullable=False)
password_hash = db.Column(db.String(128))
avatar = db.Column(db.String(128))
about_me = db.Column(db.Text)
created_time = db.Column(db.DateTime, default=datetime.utcnow)
last_seen = db.Column(db.DateTime, default=datetime.utcnow)
is_admin = db.Column(db.Boolean, default=False)
posts = db.relationship('Post', backref='author', lazy='dynamic')
comments = db.relationship('Comment', backref='author', lazy='dynamic')
def __repr__(self):
return f'<User {self.username}>'
def set_password(self, password):
self.password_hash = generate_password_hash(password)
def check_password(self, password):
return check_password_hash(self.password_hash, password)
class Post(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(128), nullable=False)
slug = db.Column(db.String(128), unique=True)
content = db.Column(db.Text)
summary = db.Column(db.String(256))
created_time = db.Column(db.DateTime, default=datetime.utcnow)
updated_time = db.Column(db.DateTime, default=datetime.utcnow)
views = db.Column(db.Integer, default=0)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
category_id = db.Column(db.Integer, db.ForeignKey('category.id'))
comments = db.relationship('Comment', backref='post', lazy='dynamic')
tags = db.relationship('Tag', secondary=post_tags, backref=db.backref('posts', lazy='dynamic'))
def __repr__(self):
return f'<Post {self.title}>'
def get_absolute_url(self):
return url_for('blog.post', slug=self.slug)
def format_content(self):
# 如果是使用Markdown格式的内容，就将文本转换为HTML
if self.content:
return markdown(self.content)
return ''
class Category(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
description = db.Column(db.String(256))
order = db.Column(db.Integer, default=0) # 新增排序字段
posts = db.relationship('Post', backref='category', lazy='dynamic')
def __repr__(self):
return f'<Category {self.name}>'
class Tag(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
def __repr__(self):
return f'<Tag {self.name}>'
class Comment(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.Text)
created_time = db.Column(db.DateTime, default=datetime.utcnow)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
post_id = db.Column(db.Integer, db.ForeignKey('post.id'))
parent_id = db.Column(db.Integer, db.ForeignKey('comment.id'))
replies = db.relationship('Comment', backref=db.backref('parent', remote_side=[id]), lazy='dynamic')
def __repr__(self):
return f'<Comment {self.id}>'app\utils.py
text/x-python
import os
import secrets
from PIL import Image
from flask import current_app
def save_avatar(file):
"""保存用户上传的头像并返回文件名"""
# 生成随机文件名，避免文件名冲突
random_hex = secrets.token_hex(8)
_, file_ext = os.path.splitext(file.filename)
file_name = random_hex + file_ext
# 确保上传目录存在
upload_dir = os.path.join(current_app.root_path, 'static/uploads/avatars')
os.makedirs(upload_dir, exist_ok=True)
# 保存文件路径
file_path = os.path.join(upload_dir, file_name)
# 调整图片大小并保存
output_size = (150, 150)
img = Image.open(file)
img.thumbnail(output_size)
img.save(file_path)
# 返回相对路径，用于存储在数据库中
return f'/static/uploads/avatars/{file_name}'
def delete_avatar(avatar_path):
"""删除用户头像文件"""
if not avatar_path or 'default-avatar' in avatar_path:
return
try:
# 获取完整文件路径
file_path = os.path.join(current_app.root_path, avatar_path.lstrip('/'))
if os.path.exists(file_path):
os.remove(file_path)
except Exception as e:
current_app.logger.error(f"删除头像文件失败: {str(e)}")app_init_.py
text/x-python
import os
from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager
from flask_migrate import Migrate
from datetime import datetime
# 初始化扩展
db = SQLAlchemy()
migrate = Migrate()
login_manager = LoginManager()
login_manager.login_view = 'auth.login'
login_manager.login_message = '请先登录以访问此页面'
login_manager.login_message_category = 'info'
def create_app(config_class=None):
app = Flask(__name__)
# 配置应用
if config_class:
app.config.from_object(config_class)
else:
# 默认配置
app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY') or 'dev-key-please-change-in-production'
app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL') or 'sqlite:///' + os.path.join(app.root_path, '../blog.db')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['POSTS_PER_PAGE'] = 10
app.config['MAX_CONTENT_LENGTH'] = 8 * 1024 * 1024 # 限制上传文件大小为8MB
# 初始化扩展
db.init_app(app)
migrate.init_app(app, db)
login_manager.init_app(app)
# 注册蓝图
from app.routes.blog import bp as blog_bp
app.register_blueprint(blog_bp)
from app.routes.auth import bp as auth_bp
app.register_blueprint(auth_bp, url_prefix='/auth')
# 添加模板全局变量
@app.context_processor
def inject_now():
return {'now': datetime.utcnow()}
# 错误处理
@app.errorhandler(404)
def page_not_found(e):
return render_template('errors/404.html'), 404
@app.errorhandler(500)
def internal_server_error(e):
return render_template('errors/500.html'), 500
# 用户加载函数
from app.models import User
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
return appapp\routes\auth.py
text/x-python
from flask import Blueprint, render_template, redirect, url_for, flash, request
from flask_login import login_user, logout_user, login_required, current_user
from app.models import db, User, Post
from werkzeug.security import generate_password_hash
from datetime import datetime
import os
from PIL import Image
from werkzeug.utils import secure_filename
from app import app
auth = Blueprint('auth', __name__)
@auth.route('/login', methods=['GET', 'POST'])
def login():
if current_user.is_authenticated:
return redirect(url_for('blog.index'))
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
remember = True if request.form.get('remember') else False
user = User.query.filter_by(username=username).first()
if not user or not user.check_password(password):
flash('用户名或密码错误，请重试', 'danger')
return render_template('auth/login.html')
login_user(user, remember=remember)
user.last_seen = datetime.utcnow()
db.session.commit()
next_page = request.args.get('next')
if not next_page or not next_page.startswith('/'):
next_page = url_for('blog.index')
flash('登录成功！', 'success')
return redirect(next_page)
return render_template('auth/login.html')
@auth.route('/register', methods=['GET', 'POST'])
def register():
if current_user.is_authenticated:
return redirect(url_for('blog.index'))
if request.method == 'POST':
username = request.form.get('username')
email = request.form.get('email')
password = request.form.get('password')
confirm_password = request.form.get('confirm_password')
# 表单验证
if not username or not email or not password:
flash('所有字段都是必填的', 'danger')
return render_template('auth/register.html')
if password != confirm_password:
flash('两次输入的密码不一致', 'danger')
return render_template('auth/register.html')
# 检查用户名和邮箱是否已存在
if User.query.filter_by(username=username).first():
flash('用户名已存在', 'danger')
return render_template('auth/register.html')
if User.query.filter_by(email=email).first():
flash('邮箱已被注册', 'danger')
return render_template('auth/register.html')
# 创建新用户
new_user = User(username=username, email=email)
new_user.set_password(password)
# 如果是第一个注册的用户，设为管理员
if User.query.count() == 0:
new_user.is_admin = True
db.session.add(new_user)
db.session.commit()
flash('注册成功，请登录', 'success')
return redirect(url_for('auth.login'))
return render_template('auth/register.html')
@auth.route('/logout')
@login_required
def logout():
logout_user()
flash('您已成功登出', 'success')
return redirect(url_for('blog.index'))
@auth.route('/profile', methods=['GET', 'POST'])
@login_required
def profile():
if request.method == 'POST':
username = request.form.get('username')
email = request.form.get('email')
about_me = request.form.get('about_me')
# 检查用户名是否已存在（排除当前用户）
if username != current_user.username:
existing_user = User.query.filter_by(username=username).first()
if existing_user:
flash('用户名已存在', 'danger')
return render_template('auth/profile.html')
# 检查邮箱是否已存在（排除当前用户）
if email != current_user.email:
existing_email = User.query.filter_by(email=email).first()
if existing_email:
flash('邮箱已被注册', 'danger')
return render_template('auth/profile.html')
# 处理头像上传
if 'avatar' in request.files and request.files['avatar'].filename:
avatar_file = request.files['avatar']
filename = secure_filename(avatar_file.filename)
_, ext = os.path.splitext(filename)
new_filename = f"user_{current_user.id}{ext}"
# 确保上传目录存在
avatar_path = os.path.join(app.root_path, 'static', 'uploads', 'avatars')
if not os.path.exists(avatar_path):
os.makedirs(avatar_path)
# 保存文件
file_path = os.path.join(avatar_path, new_filename)
avatar_file.save(file_path)
# 调整图片大小
with Image.open(file_path) as img:
img = img.resize((128, 128))
img.save(file_path)
current_user.avatar = f'/static/uploads/avatars/{new_filename}'
# 更新用户信息
current_user.username = username
current_user.email = email
current_user.about_me = about_me
current_user.last_seen = datetime.utcnow()
db.session.commit()
flash('个人资料已更新', 'success')
return redirect(url_for('auth.profile'))
return render_template('auth/profile.html')
@auth.route('/change_password', methods=['GET', 'POST'])
@login_required
def change_password():
if request.method == 'POST':
current_password = request.form.get('current_password')
new_password = request.form.get('new_password')
confirm_password = request.form.get('confirm_password')
# 验证当前密码
if not current_user.check_password(current_password):
flash('当前密码不正确', 'danger')
return render_template('auth/change_password.html')
# 验证新密码
if new_password != confirm_password:
flash('两次输入的新密码不一致', 'danger')
return render_template('auth/change_password.html')
# 更新密码
current_user.set_password(new_password)
db.session.commit()
flash('密码已成功更新', 'success')
return redirect(url_for('auth.profile'))
return render_template('auth/change_password.html')
@auth.route('/my_posts')
@login_required
def my_posts():
page = request.args.get('page', 1, type=int)
posts = Post.query.filter_by(author=current_user).order_by(Post.created_time.desc()).paginate(
page=page, per_page=10, error_out=False)
return render_template('auth/my_posts.html', posts=posts)
@auth.route('/users')
@login_required
def user_list():
# 只有管理员可以查看用户列表
if not current_user.is_admin:
flash('您没有权限访问此页面', 'danger')
return redirect(url_for('blog.index'))
users = User.query.all()
return render_template('auth/user_list.html', users=users)
@auth.route('/users/<int:user_id>/toggle_admin', methods=['POST'])
@login_required
def toggle_admin(user_id):
# 只有管理员可以更改用户权限
if not current_user.is_admin:
flash('您没有权限执行此操作', 'danger')
return redirect(url_for('blog.index'))
user = User.query.get_or_404(user_id)
# 防止管理员降级自己
if user.id == current_user.id:
flash('您不能更改自己的管理员状态', 'danger')
return redirect(url_for('auth.user_list'))
user.is_admin = not user.is_admin
db.session.commit()
status = '授予' if user.is_admin else '移除'
flash(f'已{status} {user.username} 的管理员权限', 'success')
return redirect(url_for('auth.user_list'))
@auth.route('/users/<int:user_id>/delete', methods=['POST'])
@login_required
def delete_user(user_id):
# 只有管理员可以删除用户
if not current_user.is_admin:
flash('您没有权限执行此操作', 'danger')
return redirect(url_for('blog.index'))
user = User.query.get_or_404(user_id)
# 防止管理员删除自己
if user.id == current_user.id:
flash('您不能删除自己的账户', 'danger')
return redirect(url_for('auth.user_list'))
db.session.delete(user)
db.session.commit()
flash(f'用户 {user.username} 已被删除', 'success')
return redirect(url_for('auth.user_list'))app\routes\blog.py
text/x-python
from flask import Blueprint, render_template, request, redirect, url_for, flash, abort, jsonify, current_app
from flask_login import login_required, current_user
from app import db
from app.models import Post, Category, Tag, Comment, User
from sqlalchemy import desc, extract, func
from datetime import datetime
import platform
import flask
import sys
import os
from collections import defaultdict
from werkzeug.utils import secure_filename
import uuid
import re
from PIL import Image
bp = Blueprint('blog', __name__)
# 首页
@bp.route('/')
def index():
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.created_time.desc()).paginate(
page=page, per_page=current_app.config['POSTS_PER_PAGE'], error_out=False)
# 获取最近文章
recent_posts = Post.query.order_by(Post.created_time.desc()).limit(5).all()
# 获取统计信息
post_count = Post.query.count()
comment_count = Comment.query.count()
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/index.html',
posts=posts,
categories=categories,
tags=tags,
recent_posts=recent_posts,
post_count=post_count,
comment_count=comment_count)
# 搜索功能
@bp.route('/search')
def search():
query = request.args.get('q', '')
page = request.args.get('page', 1, type=int)
if not query:
return redirect(url_for('blog.index'))
# 搜索标题和内容
posts = Post.query.filter(
(Post.title.contains(query)) |
(Post.content.contains(query))
).order_by(Post.created_time.desc()).paginate(
page=page, per_page=current_app.config['POSTS_PER_PAGE'], error_out=False)
# 获取最近文章
recent_posts = Post.query.order_by(Post.created_time.desc()).limit(5).all()
# 获取统计信息
post_count = Post.query.count()
comment_count = Comment.query.count()
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/search.html',
query=query,
posts=posts,
categories=categories,
tags=tags,
recent_posts=recent_posts,
post_count=post_count,
comment_count=comment_count)
# 归档功能
@bp.route('/archives')
def archives():
# 获取所有文章
posts = Post.query.order_by(Post.created_time.desc()).all()
# 按年月归档
archives = defaultdict(lambda: defaultdict(list))
for post in posts:
year = post.created_time.year
month = post.created_time.month
archives[year][month].append(post)
# 转换为有序字典
archives = dict(sorted(archives.items(), reverse=True))
for year in archives:
archives[year] = dict(sorted(archives[year].items(), reverse=True))
# 获取最近文章
recent_posts = Post.query.order_by(Post.created_time.desc()).limit(5).all()
# 获取统计信息
post_count = Post.query.count()
comment_count = Comment.query.count()
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/archives.html',
archives=archives,
post_count=post_count,
comment_count=comment_count,
categories=categories,
tags=tags,
recent_posts=recent_posts)
# 文章详情
@bp.route('/post/<slug>')
def post_detail(slug):
post = Post.query.filter_by(slug=slug).first_or_404()
# 增加阅读次数
post.views += 1
db.session.commit()
# 获取文章评论
comments = Comment.query.filter_by(post_id=post.id).order_by(Comment.created_time.desc()).all()
# 获取相关文章（同分类或有相同标签的文章）
related_posts = Post.query.filter(
(Post.category_id == post.category_id) & (Post.id != post.id)
).order_by(Post.created_time.desc()).limit(5).all()
# 如果相关文章不足5篇，添加最新文章补充
if len(related_posts) < 5:
additional_posts = Post.query.filter(
(Post.id != post.id) & ~Post.id.in_([p.id for p in related_posts])
).order_by(Post.created_time.desc()).limit(5 - len(related_posts)).all()
related_posts.extend(additional_posts)
# 获取最近文章
recent_posts = Post.query.order_by(Post.created_time.desc()).limit(5).all()
# 获取统计信息
post_count = Post.query.count()
comment_count = Comment.query.count()
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/post_detail.html',
post=post,
comments=comments,
related_posts=related_posts,
categories=categories,
tags=tags,
recent_posts=recent_posts,
post_count=post_count,
comment_count=comment_count)
# 分类
@bp.route('/category/<string:name>')
def category(name):
category = Category.query.filter_by(name=name).first_or_404()
page = request.args.get('page', 1, type=int)
posts = Post.query.filter_by(category=category).order_by(Post.created_time.desc()).paginate(
page=page, per_page=current_app.config['POSTS_PER_PAGE'], error_out=False)
# 获取最近文章
recent_posts = Post.query.order_by(Post.created_time.desc()).limit(5).all()
# 获取统计信息
post_count = Post.query.count()
comment_count = Comment.query.count()
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/category.html',
category=category,
posts=posts,
categories=categories,
tags=tags,
recent_posts=recent_posts,
post_count=post_count,
comment_count=comment_count)
# 标签
@bp.route('/tag/<string:name>')
def tag(name):
tag = Tag.query.filter_by(name=name).first_or_404()
page = request.args.get('page', 1, type=int)
posts = tag.posts.order_by(Post.created_time.desc()).paginate(
page=page, per_page=current_app.config['POSTS_PER_PAGE'], error_out=False)
# 获取最近文章
recent_posts = Post.query.order_by(Post.created_time.desc()).limit(5).all()
# 获取统计信息
post_count = Post.query.count()
comment_count = Comment.query.count()
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/tag.html',
tag=tag,
posts=posts,
categories=categories,
tags=tags,
recent_posts=recent_posts,
post_count=post_count,
comment_count=comment_count)
# 创建文章
@bp.route('/create', methods=['GET', 'POST'])
@login_required
def create_post():
if request.method == 'POST':
title = request.form.get('title')
content = request.form.get('content')
category_id = request.form.get('category_id')
tags = request.form.getlist('tags')
published = 'published' in request.form
save_draft = 'save_draft' in request.form
if save_draft:
published = False
if not title or not content or not category_id:
flash('请填写所有必填字段', 'danger')
return redirect(url_for('blog.create_post'))
# 生成文章别名
slug = generate_slug(title)
# 处理封面图片
cover_image = None
if 'cover_image' in request.files and request.files['cover_image'].filename:
cover_image = save_image(request.files['cover_image'], 'covers')
# 创建新文章
post = Post(
title=title,
content=content,
slug=slug,
author=current_user,
category_id=category_id,
published=published,
created_time=datetime.utcnow(),
cover_image=cover_image
)
# 添加标签
for tag_id in tags:
tag = Tag.query.get(tag_id)
if tag:
post.tags.append(tag)
db.session.add(post)
db.session.commit()
if published:
flash('文章发布成功！', 'success')
else:
flash('文章已保存为草稿', 'success')
return redirect(url_for('blog.post_detail', slug=post.slug))
# GET 请求，显示创建表单
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/create_post.html', categories=categories, tags=tags)
# 编辑文章
@bp.route('/edit/<int:id>', methods=['GET', 'POST'])
@login_required
def edit_post(id):
post = Post.query.get_or_404(id)
# 检查权限：只有作者或管理员可以编辑
if post.author != current_user and not current_user.is_admin:
flash('您没有权限编辑此文章', 'danger')
return redirect(url_for('blog.post_detail', slug=post.slug))
if request.method == 'POST':
title = request.form.get('title')
content = request.form.get('content')
category_id = request.form.get('category_id')
tags = request.form.getlist('tags')
published = 'published' in request.form
save_draft = 'save_draft' in request.form
if save_draft:
published = False
if not title or not content or not category_id:
flash('请填写所有必填字段', 'danger')
return redirect(url_for('blog.edit_post', id=id))
# 处理封面图片
if 'cover_image' in request.files and request.files['cover_image'].filename:
# 删除旧封面图片
if post.cover_image:
try:
old_image_path = os.path.join(current_app.root_path, 'static', post.cover_image.lstrip('/static/'))
if os.path.exists(old_image_path):
os.remove(old_image_path)
except Exception as e:
current_app.logger.error(f"删除旧封面图片失败: {str(e)}")
# 保存新封面图片
post.cover_image = save_image(request.files['cover_image'], 'covers')
# 更新文章信息
post.title = title
post.content = content
post.category_id = category_id
post.published = published
post.updated_time = datetime.utcnow()
# 更新标签
post.tags = []
for tag_id in tags:
tag = Tag.query.get(tag_id)
if tag:
post.tags.append(tag)
db.session.commit()
if published:
flash('文章更新成功！', 'success')
else:
flash('文章已保存为草稿', 'success')
return redirect(url_for('blog.post_detail', slug=post.slug))
# GET 请求，显示编辑表单
categories = Category.query.all()
tags = Tag.query.all()
return render_template('blog/edit_post.html', post=post, categories=categories, tags=tags)
# 删除文章
@bp.route('/delete/<int:id>', methods=['POST'])
@login_required
def delete_post(id):
post = Post.query.get_or_404(id)
# 检查权限：只有作者或管理员可以删除
if post.author != current_user and not current_user.is_admin:
flash('您没有权限删除此文章', 'danger')
return redirect(url_for('blog.post_detail', slug=post.slug))
# 删除封面图片
if post.cover_image:
try:
image_path = os.path.join(current_app.root_path, 'static', post.cover_image.lstrip('/static/'))
if os.path.exists(image_path):
os.remove(image_path)
except Exception as e:
current_app.logger.error(f"删除封面图片失败: {str(e)}")
# 删除文章
db.session.delete(post)
db.session.commit()
flash('文章已成功删除', 'success')
# 如果是从我的文章页面删除，则返回该页面
if request.referrer and 'my_posts' in request.referrer:
return redirect(url_for('auth.my_posts'))
# 否则返回首页
return redirect(url_for('blog.index'))
# 图片上传
@bp.route('/upload/image', methods=['POST'])
@login_required
def upload_image():
if 'file' not in request.files:
return jsonify({'success': False, 'message': '没有上传文件'}), 400
file = request.files['file']
if file.filename == '':
return jsonify({'success': False, 'message': '没有选择文件'}), 400
if file and allowed_file(file.filename, ['jpg', 'jpeg', 'png', 'gif']):
try:
image_url = save_image(file, 'uploads')
return jsonify({'success': True, 'url': image_url}), 200
except Exception as e:
return jsonify({'success': False, 'message': str(e)}), 500
return jsonify({'success': False, 'message': '不支持的文件类型'}), 400
# 后台管理仪表盘
@bp.route('/admin')
@login_required
def admin_dashboard():
if not current_user.is_admin:
flash('您没有权限访问管理页面', 'danger')
return redirect(url_for('blog.index'))
# 统计信息
stats = {
'post_count': Post.query.count(),
'comment_count': Comment.query.count(),
'user_count': User.query.count(),
'category_count': Category.query.count(),
'tag_count': Tag.query.count()
}
# 最近文章
recent_posts = Post.query.order_by(Post.created_time.desc()).limit(5).all()
# 最近评论
recent_comments = Comment.query.order_by(Comment.created_time.desc()).limit(5).all()
# 热门文章
popular_posts = Post.query.order_by(Post.views.desc()).limit(5).all()
# 系统信息
system_info = {
'python_version': platform.python_version(),
'flask_version': flask.__version__,
'database_type': db.engine.name,
'os_info': f"{platform.system()} {platform.release()}"
}
return render_template('admin/dashboard.html',
stats=stats,
recent_posts=recent_posts,
recent_comments=recent_comments,
popular_posts=popular_posts,
system_info=system_info)
# 后台管理文章
@bp.route('/admin/posts')
@login_required
def admin_posts():
if not current_user.is_admin:
flash('您没有权限访问管理页面', 'danger')
return redirect(url_for('blog.index'))
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.created_time.desc()).paginate(
page=page, per_page=10, error_out=False)
return render_template('admin/posts.html', posts=posts)
# 后台管理分类
@bp.route('/admin/categories')
@login_required
def admin_categories():
if not current_user.is_admin:
flash('您没有权限访问管理页面', 'danger')
return redirect(url_for('blog.index'))
categories = Category.query.order_by(Category.order).all()
return render_template('admin/categories.html', categories=categories)
# 后台管理标签
@bp.route('/admin/tags')
@login_required
def admin_tags():
if not current_user.is_admin:
flash('您没有权限访问管理页面', 'danger')
return redirect(url_for('blog.index'))
tags = Tag.query.all()
return render_template('admin/tags.html', tags=tags)
# 后台管理评论
@bp.route('/admin/comments')
@login_required
def admin_comments():
if not current_user.is_admin:
flash('您没有权限访问管理页面', 'danger')
return redirect(url_for('blog.index'))
page = request.args.get('page', 1, type=int)
comments = Comment.query.order_by(Comment.created_time.desc()).paginate(
page=page, per_page=20, error_out=False)
return render_template('admin/comments.html', comments=comments)
# API 路由
@bp.route('/api/comments/<int:comment_id>', methods=['DELETE'])
@login_required
def delete_comment(comment_id):
comment = Comment.query.get_or_404(comment_id)
# 检查权限：只有评论作者或管理员可以删除评论
if comment.author != current_user and not current_user.is_admin:
return jsonify({'error': '没有权限删除此评论'}), 403
# 如果评论有回复，将回复的parent_id设为None
for reply in comment.replies:
reply.parent_id = None
db.session.delete(comment)
db.session.commit()
return jsonify({'success': True}), 200
@bp.route('/api/comments/<int:comment_id>', methods=['PUT'])
@login_required
def edit_comment(comment_id):
comment = Comment.query.get_or_404(comment_id)
# 检查权限：只有评论作者或管理员可以编辑评论
if comment.author != current_user and not current_user.is_admin:
return jsonify({'error': '没有权限编辑此评论'}), 403
data = request.get_json()
if not data or 'content' not in data or not data['content'].strip():
return jsonify({'error': '评论内容不能为空'}), 400
comment.content = data['content'].strip()
db.session.commit()
return jsonify({
'success': True,
'content': comment.content,
'updated_time': comment.created_time.strftime('%Y-%m-%d %H:%M')
}), 200
@bp.route('/api/posts/<int:post_id>/comments', methods=['POST'])
@login_required
def add_comment(post_id):
post = Post.query.get_or_404(post_id)
data = request.get_json()
if not data or 'content' not in data or not data['content'].strip():
return jsonify({'error': '评论内容不能为空'}), 400
comment = Comment(
content=data['content'].strip(),
post=post,
author=current_user,
created_time=datetime.utcnow()
)
# 如果是回复其他评论
if 'parent_id' in data and data['parent_id']:
parent_comment = Comment.query.get(data['parent_id'])
if parent_comment and parent_comment.post_id == post.id:
comment.parent_id = data['parent_id']
db.session.add(comment)
db.session.commit()
# 构建评论数据
comment_data = {
'id': comment.id,
'content': comment.content,
'created_time': comment.created_time.strftime('%Y-%m-%d %H:%M'),
'author': {
'id': comment.author.id,
'username': comment.author.username,
'avatar': comment.author.avatar or '/static/images/default-avatar.png'
},
'parent_id': comment.parent_id
}
return jsonify({'success': True, 'comment': comment_data}), 201
# 辅助函数：生成文章别名
def generate_slug(title):
# 将标题转换为小写，并替换空格为连字符
slug = title.lower().replace(' ', '-')
# 移除非字母数字字符
slug = re.sub(r'[^a-z0-9\-]', '', slug)
# 确保别名唯一
original_slug = slug
count = 1
while Post.query.filter_by(slug=slug).first() is not None:
slug = f"{original_slug}-{count}"
count += 1
return slug
# 辅助函数：检查文件类型是否允许
def allowed_file(filename, allowed_extensions):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in allowed_extensions
# 辅助函数：保存图片
def save_image(file, subfolder):
# 确保文件名安全
filename = secure_filename(file.filename)
# 生成唯一文件名
unique_filename = f"{uuid.uuid4().hex}_{filename}"
# 确保目标目录存在
upload_folder = os.path.join(current_app.root_path, 'static', 'images', subfolder)
os.makedirs(upload_folder, exist_ok=True)
# 保存文件路径
file_path = os.path.join(upload_folder, unique_filename)
# 保存并优化图片
img = Image.open(file)
# 如果是封面图片，调整大小
if subfolder == 'covers':
img.thumbnail((1200, 800))
# 保存图片
img.save(file_path, optimize=True, quality=85)
# 返回相对URL路径
return f"/static/images/{subfolder}/{unique_filename}"app\static\css\style.css
text/css
/* 全局样式 */
body {
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
}
.container {
max-width: 1200px;
}
/* 导航栏样式 */
.navbar {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: 700;
}
/* 卡片样式 */
.card {
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 1.5rem;
border: none;
}
.card-header {
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-weight: 600;
}
/* 按钮样式 */
.btn {
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
font-weight: 500;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}
/* 表单样式 */
.form-control {
border-radius: 0.25rem;
border: 1px solid #ced4da;
}
.form-control:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* 分类管理样式 */
.category-list {
list-style: none;
padding: 0;
margin: 0;
}
.category-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background-color 0.2s;
}
.category-item:hover {
background-color: rgba(0, 123, 255, 0.05);
}
.category-item:last-child {
border-bottom: none;
}
.category-name {
font-weight: 500;
color: #333;
}
.sortable-ghost {
background-color: #f0f8ff;
opacity: 0.8;
}
.quick-edit-form {
width: 100%;
}
/* 标签管理样式 */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tag-item {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
background-color: #f8f9fa;
border-radius: 0.25rem;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.2s;
}
.tag-item:hover {
background-color: #e9ecef;
border-color: rgba(0, 0, 0, 0.15);
}
.tag-name {
margin-right: 0.5rem;
font-weight: 500;
}
.tag-count {
background-color: #6c757d;
color: white;
font-size: 0.75rem;
padding: 0.1rem 0.4rem;
border-radius: 1rem;
margin-right: 0.5rem;
}
.popular-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* 表格样式 */
.table th {
font-weight: 600;
border-top: none;
background-color: #f8f9fa;
}
.table-hover tbody tr:hover {
background-color: rgba(0, 123, 255, 0.05);
}
/* 分页样式 */
.pagination {
margin-bottom: 0;
}
.page-item.active .page-link {
background-color: #007bff;
border-color: #007bff;
}
.page-link {
color: #007bff;
}
.page-link:hover {
color: #0056b3;
}
/* 提示信息样式 */
.toast-container {
z-index: 1050;
}
/* 响应式调整 */
@media (max-width: 768px) {
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.tag-cloud {
gap: 0.5rem;
}
.tag-item {
padding: 0.4rem 0.6rem;
}
}
/* 表单验证状态样式 */
.was-validated .form-control:valid {
border-color: #28a745;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid {
border-color: #dc3545;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.char-counter {
font-size: 0.8rem;
color: #6c757d;
}
.char-counter.text-danger {
color: #dc3545 !important;
}
/* 拖拽提示样式 */
.drag-handle {
cursor: move;
color: #adb5bd;
}
.category-item:hover .drag-handle {
color: #6c757d;
}
/* 批量操作区域样式 */
.bulk-actions {
background-color: #f8f9fa;
padding: 0.75rem;
border-radius: 0.25rem;
margin-bottom: 1rem;
}
/* 标签合并样式 */
.merge-preview {
background-color: #e9ecef;
padding: 0.75rem;
border-radius: 0.25rem;
margin-top: 1rem;
}
.merge-arrow {
font-size: 1.5rem;
color: #6c757d;
}
/* 空状态样式 */
.empty-state {
text-align: center;
padding: 2rem;
color: #6c757d;
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #adb5bd;
}
/* 工具提示样式 */
.tooltip {
font-size: 0.8rem;
}
.tooltip-inner {
background-color: #343a40;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 模态框样式 */
.modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.modal-footer {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}app\static\js\comments.js
application/javascript
document.addEventListener('DOMContentLoaded', function() {
// 主评论表单提交
const commentForm = document.getElementById('comment-form');
if (commentForm) {
commentForm.addEventListener('submit', function(e) {
e.preventDefault();
const postId = this.getAttribute('data-post-id');
const content = document.getElementById('comment-content').value.trim();
if (!content) {
showAlert('评论内容不能为空', 'danger');
return;
}
addComment(postId, content);
});
}
// 回复按钮点击事件
document.addEventListener('click', function(e) {
if (e.target.classList.contains('reply-button')) {
const commentId = e.target.getAttribute('data-comment-id');
showReplyForm(commentId);
}
});
// 取消回复按钮点击事件
document.addEventListener('click', function(e) {
if (e.target.classList.contains('cancel-reply')) {
const replyForm = e.target.closest('.reply-form');
if (replyForm) {
replyForm.style.display = 'none';
}
}
});
// 回复表单提交
document.addEventListener('submit', function(e) {
if (e.target.classList.contains('reply-comment-form')) {
e.preventDefault();
const parentId = e.target.getAttribute('data-parent-id');
const postId = e.target.getAttribute('data-post-id');
const content = e.target.querySelector('.reply-content').value.trim();
if (!content) {
showAlert('回复内容不能为空', 'danger');
return;
}
replyComment(postId, parentId, content);
// 隐藏回复表单
e.target.closest('.reply-form').style.display = 'none';
}
});
// 编辑按钮点击事件
document.addEventListener('click', function(e) {
if (e.target.classList.contains('edit-button')) {
const commentId = e.target.getAttribute('data-comment-id');
showEditForm(commentId);
}
});
// 取消编辑按钮点击事件
document.addEventListener('click', function(e) {
if (e.target.classList.contains('cancel-edit')) {
const editForm = e.target.closest('.edit-form');
if (editForm) {
editForm.style.display = 'none';
// 显示评论内容
const commentContent = editForm.closest('.comment, .nested-comment').querySelector('.comment-content');
if (commentContent) {
commentContent.style.display = 'block';
}
}
}
});
// 编辑表单提交
document.addEventListener('submit', function(e) {
if (e.target.classList.contains('edit-comment-form')) {
e.preventDefault();
const commentId = e.target.getAttribute('data-comment-id');
const content = e.target.querySelector('.edit-content').value.trim();
if (!content) {
showAlert('评论内容不能为空', 'danger');
return;
}
editComment(commentId, content);
// 隐藏编辑表单
e.target.closest('.edit-form').style.display = 'none';
}
});
// 删除按钮点击事件
document.addEventListener('click', function(e) {
if (e.target.classList.contains('delete-button')) {
const commentId = e.target.getAttribute('data-comment-id');
if (confirm('确定要删除这条评论吗？此操作不可撤销。')) {
deleteComment(commentId);
}
}
});
});
// 添加评论
function addComment(postId, content) {
fetch('/api/comments/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
post_id: postId,
content: content
})
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应不正常');
}
return response.json();
})
.then(data => {
if (data.success) {
// 清空评论框
document.getElementById('comment-content').value = '';
// 移除"暂无评论"提示
const noCommentsMsg = document.getElementById('no-comments-message');
if (noCommentsMsg) {
noCommentsMsg.remove();
}
// 在评论区顶部添加新评论
const commentsContainer = document.getElementById('comments-container');
const commentHtml = createCommentHtml(data.comment);
commentsContainer.insertAdjacentHTML('afterbegin', commentHtml);
// 更新评论计数
updateCommentCount(1);
// 显示成功消息
showAlert('评论发表成功', 'success');
// 滚动到新评论位置
document.getElementById(`comment-${data.comment.id}`).scrollIntoView({ behavior: 'smooth' });
} else {
showAlert(data.message || '评论发表失败', 'danger');
}
})
.catch(error => {
console.error('Error:', error);
showAlert('发生错误，请稍后重试', 'danger');
});
}
// 回复评论
function replyComment(postId, parentId, content) {
fetch('/api/comments/reply', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
post_id: postId,
parent_id: parentId,
content: content
})
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应不正常');
}
return response.json();
})
.then(data => {
if (data.success) {
// 清空回复框
const replyForm = document.getElementById(`reply-form-${parentId}`);
if (replyForm) {
replyForm.querySelector('.reply-content').value = '';
}
// 在父评论下添加回复
const parentComment = document.getElementById(`comment-${parentId}`);
let nestedComments = parentComment.querySelector('.nested-comments');
// 如果嵌套评论容器不存在，创建一个
if (!nestedComments) {
const parentCommentBody = parentComment.querySelector('.flex-grow-1.ms-3');
parentCommentBody.insertAdjacentHTML('beforeend', '<div class="nested-comments mt-3"></div>');
nestedComments = parentComment.querySelector('.nested-comments');
}
// 添加新回复
const replyHtml = createReplyHtml(data.comment);
nestedComments.insertAdjacentHTML('beforeend', replyHtml);
// 更新评论计数
updateCommentCount(1);
// 显示成功消息
showAlert('回复发表成功', 'success');
// 滚动到新回复位置
document.getElementById(`comment-${data.comment.id}`).scrollIntoView({ behavior: 'smooth' });
} else {
showAlert(data.message || '回复发表失败', 'danger');
}
})
.catch(error => {
console.error('Error:', error);
showAlert('发生错误，请稍后重试', 'danger');
});
}
// 编辑评论
function editComment(commentId, content) {
fetch(`/api/comments/edit/${commentId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({
content: content
})
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应不正常');
}
return response.json();
})
.then(data => {
if (data.success) {
// 更新评论内容
const commentElement = document.getElementById(`comment-${commentId}`);
const contentElement = commentElement.querySelector('.comment-content p');
if (contentElement) {
contentElement.textContent = content;
}
// 显示评论内容
const commentContent = commentElement.querySelector('.comment-content');
if (commentContent) {
commentContent.style.display = 'block';
}
// 显示成功消息
showAlert('评论已更新', 'success');
} else {
showAlert(data.message || '评论更新失败', 'danger');
}
})
.catch(error => {
console.error('Error:', error);
showAlert('发生错误，请稍后重试', 'danger');
});
}
// 删除评论
function deleteComment(commentId) {
fetch(`/api/comments/delete/${commentId}`, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应不正常');
}
return response.json();
})
.then(data => {
if (data.success) {
// 移除评论元素
const commentElement = document.getElementById(`comment-${commentId}`);
// 如果是主评论，需要同时移除所有回复
if (commentElement.classList.contains('comment')) {
commentElement.remove();
} else {
// 如果是回复，只移除该回复
commentElement.remove();
}
// 更新评论计数
updateCommentCount(-1);
// 如果没有评论了，显示"暂无评论"提示
const commentsContainer = document.getElementById('comments-container');
if (commentsContainer.children.length === 0) {
commentsContainer.innerHTML = `
<div class="text-center py-4" id="no-comments-message">
<p class="text-muted">暂无评论，快来发表第一条评论吧！</p>
</div>
`;
}
// 显示成功消息
showAlert('评论已删除', 'success');
} else {
showAlert(data.message || '评论删除失败', 'danger');
}
})
.catch(error => {
console.error('Error:', error);
showAlert('发生错误，请稍后重试', 'danger');
});
}
// 显示回复表单
function showReplyForm(commentId) {
// 隐藏所有回复表单
document.querySelectorAll('.reply-form').forEach(form => {
form.style.display = 'none';
});
// 显示当前回复表单
const replyForm = document.getElementById(`reply-form-${commentId}`);
if (replyForm) {
replyForm.style.display = 'block';
replyForm.querySelector('.reply-content').focus();
}
}
// 显示编辑表单
function showEditForm(commentId) {
// 隐藏所有编辑表单
document.querySelectorAll('.edit-form').forEach(form => {
form.style.display = 'none';
});
// 显示当前编辑表单
const editForm = document.getElementById(`edit-form-${commentId}`);
if (editForm) {
// 隐藏评论内容
const commentElement = document.getElementById(`comment-${commentId}`);
const contentElement = commentElement.querySelector('.comment-content');
if (contentElement) {
contentElement.style.display = 'none';
}
// 显示编辑表单
editForm.style.display = 'block';
editForm.querySelector('.edit-content').focus();
}
}
// 创建评论HTML
function createCommentHtml(comment) {
const avatarUrl = comment.author.avatar || '/static/images/default-avatar.png';
const date = new Date(comment.created_time).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
return `
<div class="comment card mb-3" id="comment-${comment.id}">
<div class="card-body">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="${avatarUrl}" alt="${comment.author.username}" class="rounded-circle" width="50" height="50" style="object-fit: cover;">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">${comment.author.username}</h6>
<small class="text-muted">${date}</small>
</div>
<div class="comment-content mt-2">
<p>${comment.content}</p>
</div>
<div class="comment-actions mt-2">
<button class="btn btn-sm btn-link p-0 reply-button" data-comment-id="${comment.id}">回复</button>
<button class="btn btn-sm btn-link p-0 ms-2 edit-button" data-comment-id="${comment.id}">编辑</button>
<button class="btn btn-sm btn-link p-0 ms-2 text-danger delete-button" data-comment-id="${comment.id}">删除</button>
</div>
<div class="reply-form mt-3" id="reply-form-${comment.id}" style="display: none;">
<form class="reply-comment-form" data-parent-id="${comment.id}" data-post-id="${comment.post_id}">
<div class="mb-3">
<textarea class="form-control reply-content" rows="2" placeholder="回复 ${comment.author.username}..." required></textarea>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-secondary me-2 cancel-reply">取消</button>
<button type="submit" class="btn btn-sm btn-primary">回复</button>
</div>
</form>
</div>
<div class="edit-form mt-3" id="edit-form-${comment.id}" style="display: none;">
<form class="edit-comment-form" data-comment-id="${comment.id}">
<div class="mb-3">
<textarea class="form-control edit-content" rows="2" required>${comment.content}</textarea>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-secondary me-2 cancel-edit">取消</button>
<button type="submit" class="btn btn-sm btn-primary">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
`;
}
// 创建回复HTML
function createReplyHtml(reply) {
const avatarUrl = reply.author.avatar || '/static/images/default-avatar.png';
const date = new Date(reply.created_time).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
return `
<div class="nested-comment card mb-2" id="comment-${reply.id}">
<div class="card-body py-2">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="${avatarUrl}" alt="${reply.author.username}" class="rounded-circle" width="35" height="35" style="object-fit: cover;">
</div>
<div class="flex-grow-1 ms-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0 fs-6">${reply.author.username}</h6>
<small class="text-muted">${date}</small>
</div>
<div class="comment-content mt-1">
<p class="mb-1">${reply.content}</p>
</div>
<div class="comment-actions">
<button class="btn btn-sm btn-link p-0 reply-button" data-comment-id="${reply.parent_id}">回复</button>
<button class="btn btn-sm btn-link p-0 ms-2 edit-button" data-comment-id="${reply.id}">编辑</button>
<button class="btn btn-sm btn-link p-0 ms-2 text-danger delete-button" data-comment-id="${reply.id}">删除</button>
</div>
<div class="edit-form mt-2" id="edit-form-${reply.id}" style="display: none;">
<form class="edit-comment-form" data-comment-id="${reply.id}">
<div class="mb-2">
<textarea class="form-control edit-content" rows="2" required>${reply.content}</textarea>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-secondary me-2 cancel-edit">取消</button>
<button type="submit" class="btn btn-sm btn-primary">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
`;
}
// 更新评论计数
function updateCommentCount(change) {
const commentsHeading = document.querySelector('.comments-section h4');
if (commentsHeading) {
const currentCount = parseInt(commentsHeading.textContent.match(/\d+/)[0]);
const newCount = currentCount + change;
commentsHeading.textContent = `评论 (${newCount})`;
}
}
// 显示提示消息
function showAlert(message, type) {
const alertContainer = document.createElement('div');
alertContainer.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3`;
alertContainer.style.zIndex = '9999';
alertContainer.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
document.body.appendChild(alertContainer);
// 3秒后自动关闭
setTimeout(() => {
alertContainer.classList.remove('show');
setTimeout(() => {
alertContainer.remove();
}, 150);
}, 3000);
}app\static\js\main.js
application/javascript
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 初始化工具提示
initTooltips();
// 分类管理功能
initCategoryManagement();
// 标签管理功能
initTagManagement();
// 表单验证
initFormValidation();
});
// 初始化工具提示
function initTooltips() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
}
// 分类管理功能
function initCategoryManagement() {
// 分类搜索功能
const categorySearch = document.getElementById('categorySearch');
if (categorySearch) {
categorySearch.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
const categoryItems = document.querySelectorAll('.category-item');
categoryItems.forEach(item => {
const categoryName = item.querySelector('.category-name').textContent.toLowerCase();
const categoryDesc = item.querySelector('.text-muted') ?
item.querySelector('.text-muted').textContent.toLowerCase() : '';
if (categoryName.includes(searchTerm) || categoryDesc.includes(searchTerm)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
});
}
// 分类拖拽排序功能
const categorySortable = document.getElementById('categorySortable');
if (categorySortable && typeof Sortable !== 'undefined') {
new Sortable(categorySortable, {
animation: 150,
ghostClass: 'sortable-ghost',
onEnd: function(evt) {
const categoryId = evt.item.getAttribute('data-category-id');
const newIndex = evt.newIndex;
// 发送AJAX请求更新分类顺序
updateCategoryOrder(categoryId, newIndex);
}
});
}
// 快速编辑分类功能
const quickEditButtons = document.querySelectorAll('.quick-edit-category');
quickEditButtons.forEach(button => {
button.addEventListener('click', function() {
const categoryId = this.getAttribute('data-category-id');
const categoryItem = this.closest('.category-item');
const categoryName = categoryItem.querySelector('.category-name').textContent;
// 创建内联编辑表单
const originalContent = categoryItem.innerHTML;
const formHTML = `
<div class="quick-edit-form p-2">
<div class="mb-2">
<input type="text" class="form-control form-control-sm" value="${categoryName}" id="quickEditName">
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary save-quick-edit">保存</button>
<button type="button" class="btn btn-secondary cancel-quick-edit">取消</button>
</div>
</div>
`;
categoryItem.innerHTML = formHTML;
// 保存按钮事件
categoryItem.querySelector('.save-quick-edit').addEventListener('click', function() {
const newName = categoryItem.querySelector('#quickEditName').value;
if (newName && newName !== categoryName) {
// 发送AJAX请求更新分类名称
updateCategoryName(categoryId, newName, function() {
// 更新成功后刷新页面
window.location.reload();
});
} else {
// 恢复原始内容
categoryItem.innerHTML = originalContent;
initTooltips();
}
});
// 取消按钮事件
categoryItem.querySelector('.cancel-quick-edit').addEventListener('click', function() {
categoryItem.innerHTML = originalContent;
initTooltips();
});
});
});
}
// 更新分类顺序（AJAX）
function updateCategoryOrder(categoryId, newIndex) {
fetch('/admin/categories/reorder', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCsrfToken()
},
body: JSON.stringify({
category_id: categoryId,
new_index: newIndex
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showToast('分类顺序已更新');
} else {
showToast('更新分类顺序失败', 'error');
}
})
.catch(error => {
console.error('Error:', error);
showToast('更新分类顺序失败', 'error');
});
}
// 更新分类名称（AJAX）
function updateCategoryName(categoryId, newName, callback) {
fetch(`/admin/categories/${categoryId}/quick-edit`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCsrfToken()
},
body: JSON.stringify({
name: newName
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showToast('分类已更新');
if (typeof callback === 'function') {
callback();
}
} else {
showToast(data.message || '更新分类失败', 'error');
}
})
.catch(error => {
console.error('Error:', error);
showToast('更新分类失败', 'error');
});
}
// 标签管理功能
function initTagManagement() {
// 标签搜索功能
const tagSearch = document.getElementById('tagSearch');
if (tagSearch) {
tagSearch.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
const tagItems = document.querySelectorAll('.tag-item');
tagItems.forEach(item => {
const tagName = item.querySelector('.tag-name').textContent.toLowerCase();
if (tagName.includes(searchTerm)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
});
}
// 标签全选功能
const selectAllTags = document.getElementById('selectAllTags');
if (selectAllTags) {
selectAllTags.addEventListener('change', function() {
const tagCheckboxes = document.querySelectorAll('.tag-checkbox');
tagCheckboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
}
// 批量操作功能
const applyBulkAction = document.getElementById('applyBulkAction');
if (applyBulkAction) {
applyBulkAction.addEventListener('click', function() {
const action = document.getElementById('bulkAction').value;
if (!action) {
showToast('请选择一个批量操作', 'warning');
return;
}
const selectedTags = Array.from(document.querySelectorAll('.tag-checkbox:checked')).map(checkbox => checkbox.value);
if (selectedTags.length === 0) {
showToast('请至少选择一个标签', 'warning');
return;
}
if (action === 'delete') {
if (confirm(`确定要删除选中的 ${selectedTags.length} 个标签吗？此操作不可撤销。`)) {
bulkDeleteTags(selectedTags);
}
} else if (action === 'merge') {
if (selectedTags.length < 2) {
showToast('合并标签需要至少选择2个标签', 'warning');
return;
}
const newTagName = prompt('请输入合并后的新标签名称:');
if (newTagName) {
bulkMergeTags(selectedTags, newTagName);
}
}
});
}
}
// 批量删除标签（AJAX）
function bulkDeleteTags(tagIds) {
fetch('/admin/tags/bulk-delete', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCsrfToken()
},
body: JSON.stringify({
tag_ids: tagIds
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showToast(`已成功删除 ${data.deleted_count} 个标签`);
// 刷新页面
window.location.reload();
} else {
showToast(data.message || '批量删除标签失败', 'error');
}
})
.catch(error => {
console.error('Error:', error);
showToast('批量删除标签失败', 'error');
});
}
// 批量合并标签（AJAX）
function bulkMergeTags(tagIds, newTagName) {
fetch('/admin/tags/bulk-merge', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCsrfToken()
},
body: JSON.stringify({
tag_ids: tagIds,
new_tag_name: newTagName
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showToast(`已成功将 ${tagIds.length} 个标签合并为 "${newTagName}"`);
// 刷新页面
window.location.reload();
} else {
showToast(data.message || '合并标签失败', 'error');
}
})
.catch(error => {
console.error('Error:', error);
showToast('合并标签失败', 'error');
});
}
// 表单验证
function initFormValidation() {
// 获取所有需要验证的表单
var forms = document.querySelectorAll('.needs-validation');
// 循环并阻止提交
Array.prototype.slice.call(forms).forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}
// 获取CSRF令牌
function getCsrfToken() {
const metaTag = document.querySelector('meta[name="csrf-token"]');
return metaTag ? metaTag.getAttribute('content') : '';
}
// 显示提示消息
function showToast(message, type = 'success') {
// 检查是否已存在toast容器
let toastContainer = document.querySelector('.toast-container');
if (!toastContainer) {
toastContainer = document.createElement('div');
toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
document.body.appendChild(toastContainer);
}
// 创建toast元素
const toastId = 'toast-' + Date.now();
const toast = document.createElement('div');
toast.className = `toast align-items-center text-white bg-${type} border-0`;
toast.id = toastId;
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">
${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
toastContainer.appendChild(toast);
// 初始化并显示toast
const bsToast = new bootstrap.Toast(toast, {
autohide: true,
delay: 3000
});
bsToast.show();
// 监听隐藏事件以移除元素
toast.addEventListener('hidden.bs.toast', function() {
toast.remove();
});
}app\templates\base.html
text/html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Flask个人博客系统{% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% block extra_css %}{% endblock %}
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{{ url_for('blog.index') }}">个人博客</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('blog.index') }}">
<i class="bi bi-house-door"></i> 首页
</a>
</li>
{% if current_user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="adminDropdown" role="button" data-bs-toggle="dropdown">
<i class="bi bi-gear"></i> 管理
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ url_for('blog.admin_posts') }}">
<i class="bi bi-file-earmark-text"></i> 文章管理
</a></li>
<li><a class="dropdown-item" href="{{ url_for('blog.admin_categories') }}">
<i class="bi bi-folder"></i> 分类管理
</a></li>
<li><a class="dropdown-item" href="{{ url_for('blog.admin_tags') }}">
<i class="bi bi-tags"></i> 标签管理
</a></li>
<li><a class="dropdown-item" href="{{ url_for('blog.admin_comments') }}">
<i class="bi bi-chat-dots"></i> 评论管理
</a></li>
{% if current_user.is_admin %}
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{{ url_for('auth.user_list') }}">
<i class="bi bi-people"></i> 用户管理
</a></li>
{% endif %}
</ul>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('blog.archives') }}">
<i class="bi bi-archive"></i> 归档
</a>
</li>
</ul>
<!-- 搜索表单 -->
<form class="d-flex me-2" action="{{ url_for('blog.search') }}" method="get">
<div class="input-group">
<input class="form-control form-control-sm" type="search" name="q" placeholder="搜索文章..." aria-label="Search" required>
<button class="btn btn-sm btn-outline-light" type="submit">
<i class="bi bi-search"></i>
</button>
</div>
</form>
<ul class="navbar-nav">
{% if current_user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
{% if current_user.avatar %}
<img src="{{ current_user.avatar }}" alt="{{ current_user.username }}" class="rounded-circle me-1" width="24" height="24" style="object-fit: cover;">
{% else %}
<i class="bi bi-person-circle me-1"></i>
{% endif %}
{{ current_user.username }}
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">
<i class="bi bi-person"></i> 个人资料
</a></li>
<li><a class="dropdown-item" href="{{ url_for('auth.change_password') }}">
<i class="bi bi-key"></i> 修改密码
</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">
<i class="bi bi-box-arrow-right"></i> 退出
</a></li>
</ul>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('auth.login') }}">
<i class="bi bi-box-arrow-in-right"></i> 登录
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('auth.register') }}">
<i class="bi bi-person-plus"></i> 注册
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</header>
<main class="container my-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" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<footer class="bg-dark text-white py-4 mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5>关于博客</h5>
<p>基于Flask的个人博客系统，用于分享技术文章和个人见解。</p>
</div>
<div class="col-md-6 text-md-end">
<h5>联系方式</h5>
<p><i class="bi bi-envelope"></i> [email protected]</p>
</div>
</div>
<div class="text-center mt-3">
<p>© {{ now.year }} Flask个人博客系统 | 保留所有权利</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>app\templates\admin\categories.html
text/html
{% extends "base.html" %}
{% block title %}分类管理 - Flask个人博客系统{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>分类管理</h1>
<a href="{{ url_for('blog.create_category') }}" class="btn btn-primary">
<i class="fas fa-plus"></i> 新建分类
</a>
</div>
<div class="card">
<div class="card-header bg-white">
<div class="row align-items-center">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-text"><i class="fas fa-search"></i></span>
<input type="text" class="form-control" id="categorySearch" placeholder="搜索分类...">
</div>
</div>
<div class="col-md-6 text-md-end mt-3 mt-md-0">
<span class="badge bg-primary">总计: {{ categories|length }} 个分类</span>
</div>
</div>
</div>
<div class="card-body p-0">
{% if categories %}
<ul class="category-list" id="categorySortable">
{% for category in categories %}
<li class="category-item" data-category-id="{{ category.id }}">
<div class="d-flex justify-content-between align-items-center w-100">
<div>
<span class="category-name">{{ category.name }}</span>
{% if category.description %}
<small class="text-muted d-block">{{ category.description|truncate(50) }}</small>
{% endif %}
</div>
<div class="d-flex align-items-center">
<span class="badge bg-secondary me-3">{{ category.posts.count() }} 篇文章</span>
<div class="btn-group" role="group">
<a href="{{ url_for('blog.category', name=category.name) }}" target="_blank"
class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip" title="查看分类">
<i class="fas fa-eye"></i>
</a>
<button type="button" class="btn btn-sm btn-outline-primary quick-edit-category"
data-category-id="{{ category.id }}" data-bs-toggle="tooltip" title="快速编辑">
<i class="fas fa-pencil-alt"></i>
</button>
<a href="{{ url_for('blog.edit_category', category_id=category.id) }}"
class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="编辑分类">
<i class="fas fa-edit"></i>
</a>
<button type="button" class="btn btn-sm btn-outline-danger"
data-bs-toggle="modal" data-bs-target="#deleteModal{{ category.id }}"
{% if category.posts.count() > 0 %}disabled{% endif %}
data-bs-toggle="tooltip" title="删除分类">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</li>
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal{{ category.id }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">确认删除</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>确定要删除分类 "{{ category.name }}" 吗？此操作不可撤销。</p>
{% if category.posts.count() > 0 %}
<div class="alert alert-warning">
此分类下有 {{ category.posts.count() }} 篇文章，无法删除。请先将文章移至其他分类。
</div>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<form action="{{ url_for('blog.delete_category', category_id=category.id) }}" method="post">
<button type="submit" class="btn btn-danger" {% if category.posts.count() > 0 %}disabled{% endif %}>
确认删除
</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
</ul>
{% else %}
<div class="alert alert-info m-3">暂无分类，点击上方"新建分类"按钮创建第一个分类。</div>
{% endif %}
</div>
{% if categories|length > 10 %}
<div class="card-footer">
<div class="text-center">
<a href="{{ url_for('blog.create_category') }}" class="btn btn-primary">
<i class="fas fa-plus"></i> 新建分类
</a>
</div>
</div>
{% endif %}
</div>
<div class="card mt-4">
<div class="card-header">分类管理指南</div>
<div class="card-body">
<h5>关于分类</h5>
<p>分类是组织博客文章的主要方式，每篇文章必须属于一个分类。</p>
<h5>管理提示</h5>
<ul>
<li>创建有意义的分类名称，使读者能够轻松找到相关内容</li>
<li>添加描述以帮助读者了解该分类包含的内容类型</li>
<li>无法删除包含文章的分类，请先将文章移至其他分类</li>
<li>可以通过拖拽调整分类的显示顺序（如果启用了此功能）</li>
</ul>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
{% endblock %}app\templates\admin\category_form.html
text/html
{% extends "base.html" %}
{% block title %}
{% if category %}编辑分类{% else %}新建分类{% endif %} - Flask个人博客系统
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h1 class="h3 mb-0">{% if category %}编辑分类{% else %}新建分类{% endif %}</h1>
</div>
<div class="card-body">
<form method="post" class="needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">分类名称 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" name="name"
value="{{ category.name if category else '' }}" required
minlength="2" maxlength="64">
<div class="invalid-feedback">
分类名称是必填项，且长度应在2-64个字符之间
</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">分类描述</label>
<textarea class="form-control" id="description" name="description" rows="3"
maxlength="256" placeholder="简要描述该分类包含的内容类型">{{ category.description if category else '' }}</textarea>
<div class="form-text">
描述将显示在分类页面上，帮助读者了解该分类的内容
</div>
</div>
<div class="d-flex justify-content-between">
<a href="{{ url_for('blog.admin_categories') }}" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> 返回分类列表
</a>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i> {% if category %}更新分类{% else %}创建分类{% endif %}
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">分类指南</div>
<div class="card-body">
<h5>创建有效的分类</h5>
<ul>
<li>使用简洁明了的名称</li>
<li>确保名称能清晰表达内容主题</li>
<li>避免使用过于宽泛或过于具体的名称</li>
<li>保持分类系统的一致性</li>
</ul>
<h5>分类描述最佳实践</h5>
<ul>
<li>简要概述该分类包含的内容类型</li>
<li>可以包含该分类的关键词</li>
<li>保持简洁，通常不超过1-2个句子</li>
</ul>
</div>
</div>
{% if category and category.posts.count() > 0 %}
<div class="card mt-3">
<div class="card-header">相关文章</div>
<div class="card-body">
<p>此分类下有 <strong>{{ category.posts.count() }}</strong> 篇文章</p>
<a href="{{ url_for('blog.category', name=category.name) }}" class="btn btn-outline-primary btn-sm" target="_blank">
<i class="fas fa-external-link-alt"></i> 查看分类页面
</a>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script>
// 表单验证
(function() {
'use strict';
// 获取所有需要验证的表单
var forms = document.querySelectorAll('.needs-validation');
// 循环并阻止提交
Array.prototype.slice.call(forms).forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
// 字符计数器
const description = document.getElementById('description');
if (description) {
description.addEventListener('input', function() {
const maxLength = this.getAttribute('maxlength');
const currentLength = this.value.length;
const remaining = maxLength - currentLength;
let feedbackElement = this.nextElementSibling.nextElementSibling;
if (!feedbackElement || !feedbackElement.classList.contains('char-counter')) {
feedbackElement = document.createElement('div');
feedbackElement.classList.add('form-text', 'char-counter', 'text-end');
this.parentNode.appendChild(feedbackElement);
}
feedbackElement.textContent = `${currentLength}/${maxLength} 字符`;
if (remaining < 20) {
feedbackElement.classList.add('text-danger');
} else {
feedbackElement.classList.remove('text-danger');
}
});
// 初始触发一次以显示初始计数
if (description.value.length > 0) {
description.dispatchEvent(new Event('input'));
}
}
})();
</script>
{% endblock %}