Python实例题：Flask开发轻博客
目录
Python实例题
题目
templates
base.html
create_post.html
index.html
login.html
register.html
app.py
Python实例题
题目
Flask开发轻博客
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>{% block title %}轻博客{% endblock %}</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"><script>tailwind.config = {theme: {extend: {colors: {primary: '#165DFF',secondary: '#36BFFA',accent: '#722ED1',dark: '#1D2939',light: '#F9FAFB'},fontFamily: {inter: ['Inter', 'sans-serif'],},}}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 0 2px 4px rgba(0,0,0,0.1);}.transition-all-300 {transition: all 300ms ease-in-out;}.hover-scale {transition: transform 0.3s ease;}.hover-scale:hover {transform: scale(1.02);}}</style>
</head>
<body class="font-inter bg-light text-dark min-h-screen flex flex-col"><!-- 导航栏 --><header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300"><div class="container mx-auto px-4 py-3 flex items-center justify-between"><a href="{{ url_for('index') }}" class="flex items-center space-x-2"><i class="fa fa-pencil-square-o text-primary text-2xl"></i><span class="text-xl font-bold text-primary">轻博客</span></a><nav class="hidden md:flex items-center space-x-6"><a href="{{ url_for('index') }}" class="font-medium hover:text-primary transition-all-300">首页</a>{% if current_user.is_authenticated %}<a href="{{ url_for('create_post') }}" class="font-medium hover:text-primary transition-all-300">写文章</a><a href="{{ url_for('logout') }}" class="font-medium hover:text-primary transition-all-300">退出</a>{% else %}<a href="{{ url_for('login') }}" class="font-medium hover:text-primary transition-all-300">登录</a><a href="{{ url_for('register') }}" class="font-medium hover:text-primary transition-all-300">注册</a>{% endif %}</nav><button class="md:hidden text-dark text-xl" id="menu-toggle"><i class="fa fa-bars"></i></button></div><!-- 移动端菜单 --><div class="md:hidden hidden bg-white shadow-lg absolute w-full" id="mobile-menu"><div class="container mx-auto px-4 py-3 flex flex-col space-y-3"><a href="{{ url_for('index') }}" class="font-medium py-2 hover:text-primary transition-all-300">首页</a>{% if current_user.is_authenticated %}<a href="{{ url_for('create_post') }}" class="font-medium py-2 hover:text-primary transition-all-300">写文章</a><a href="{{ url_for('logout') }}" class="font-medium py-2 hover:text-primary transition-all-300">退出</a>{% else %}<a href="{{ url_for('login') }}" class="font-medium py-2 hover:text-primary transition-all-300">登录</a><a href="{{ url_for('register') }}" class="font-medium py-2 hover:text-primary transition-all-300">注册</a>{% endif %}</div></div></header><!-- 主内容区 --><main class="flex-grow container mx-auto px-4 py-8"><!-- 消息提示 -->{% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}{% for category, message in messages %}<div class="mb-4 p-4 rounded-lg {% if category == 'error' %}bg-red-100 text-red-700{% else %}bg-green-100 text-green-700{% endif %}">{{ message }}</div>{% endfor %}{% endif %}{% endwith %}<!-- 内容块 -->{% block content %}{% endblock %}</main><!-- 页脚 --><footer class="bg-dark text-white py-8"><div class="container mx-auto px-4"><div class="grid grid-cols-1 md:grid-cols-3 gap-8"><div><h3 class="text-lg font-semibold mb-4">轻博客</h3><p class="text-gray-400">一个简单、优雅的博客平台，让每个人都能轻松表达自己。</p></div><div><h3 class="text-lg font-semibold mb-4">快速链接</h3><ul class="space-y-2"><li><a href="{{ url_for('index') }}" class="text-gray-400 hover:text-white transition-all-300">首页</a></li>{% if current_user.is_authenticated %}<li><a href="{{ url_for('create_post') }}" class="text-gray-400 hover:text-white transition-all-300">写文章</a></li><li><a href="{{ url_for('logout') }}" class="text-gray-400 hover:text-white transition-all-300">退出</a></li>{% else %}<li><a href="{{ url_for('login') }}" class="text-gray-400 hover:text-white transition-all-300">登录</a></li><li><a href="{{ url_for('register') }}" class="text-gray-400 hover:text-white transition-all-300">注册</a></li>{% endif %}</ul></div><div><h3 class="text-lg font-semibold mb-4">关注我们</h3><div class="flex space-x-4"><a href="#" class="text-gray-400 hover:text-white transition-all-300"><i class="fa fa-weibo text-xl"></i></a><a href="#" class="text-gray-400 hover:text-white transition-all-300"><i class="fa fa-wechat text-xl"></i></a><a href="#" class="text-gray-400 hover:text-white transition-all-300"><i class="fa fa-github text-xl"></i></a></div></div></div><div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"><p>© 2023 轻博客. 保留所有权利.</p></div></div></footer><script>// 移动端菜单切换document.getElementById('menu-toggle').addEventListener('click', function() {const mobileMenu = document.getElementById('mobile-menu');mobileMenu.classList.toggle('hidden');});// 导航栏滚动效果window.addEventListener('scroll', function() {const header = document.querySelector('header');if (window.scrollY > 10) {header.classList.add('py-2');header.classList.add('shadow-lg');} else {header.classList.remove('py-2');header.classList.remove('shadow-lg');}});</script>
</body>
</html> create_post.html
{% extends "base.html" %}{% block title %}轻博客 - 写文章{% endblock %}{% block content %}<div class="max-w-3xl mx-auto"><div class="bg-white rounded-xl shadow-md p-8 mb-6"><h2 class="text-2xl font-bold mb-6">写文章</h2><form method="POST" action="{{ url_for('create_post') }}">{{ form.hidden_tag() }}<div class="mb-6">{{ form.title.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.title(class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-lg", placeholder="请输入文章标题") }}{% for error in form.title.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="mb-6">{{ form.content.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.content(class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary h-64", placeholder="请输入文章内容...") }}{% for error in form.content.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="mb-6">{{ form.category.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.category(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary") }}{% for error in form.category.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="flex justify-end"><button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all-300">发布文章</button></div></form></div></div>
{% endblock %} index.html
{% extends "base.html" %}{% block title %}轻博客 - 首页{% endblock %}{% block content %}<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"><!-- 文章列表 --><div class="lg:col-span-2 space-y-8"><h1 class="text-3xl font-bold mb-6">最新文章</h1>{% if posts %}{% for post in posts %}<article class="bg-white rounded-xl shadow-md overflow-hidden hover-scale"><div class="p-6"><div class="flex items-center text-sm text-gray-500 mb-3"><span class="flex items-center mr-4"><i class="fa fa-user mr-1"></i> {{ post.author.username }}</span><span class="flex items-center"><i class="fa fa-calendar mr-1"></i> {{ post.created_at.strftime('%Y-%m-%d') }}</span></div><h2 class="text-2xl font-bold mb-3"><a href="#" class="text-dark hover:text-primary transition-all-300">{{ post.title }}</a></h2><p class="text-gray-600 mb-4 line-clamp-3">{{ post.content }}</p><div class="flex items-center justify-between"><a href="#" class="text-primary hover:underline flex items-center"><i class="fa fa-angle-right ml-1"></i></a><div class="flex items-center space-x-3 text-gray-500"><span class="flex items-center"><i class="fa fa-eye mr-1"></i> {{ post.views }}</span><span class="flex items-center"><i class="fa fa-comment mr-1"></i> {{ post.comments_count }}</span><span class="flex items-center"><i class="fa fa-heart mr-1"></i> {{ post.likes }}</span></div></div></div></article>{% endfor %}<!-- 分页 --><div class="flex justify-center mt-8"><nav class="inline-flex rounded-md shadow-sm">{% if pagination.has_prev %}<a href="{{ url_for('index', page=pagination.prev_num) }}" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"><i class="fa fa-angle-left"></i></a>{% else %}<span class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-300"><i class="fa fa-angle-left"></i></span>{% endif %}{% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}{% if page_num %}{% if pagination.page == page_num %}<span class="px-3 py-2 border border-primary bg-primary text-sm font-medium text-white">{{ page_num }}</span>{% else %}<a href="{{ url_for('index', page=page_num) }}" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">{{ page_num }}</a>{% endif %}{% else %}<span class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>{% endif %}{% endfor %}{% if pagination.has_next %}<a href="{{ url_for('index', page=pagination.next_num) }}" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"><i class="fa fa-angle-right"></i></a>{% else %}<span class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-300"><i class="fa fa-angle-right"></i></span>{% endif %}</nav></div>{% else %}<div class="bg-white rounded-xl shadow-md p-8 text-center"><i class="fa fa-file-text-o text-gray-400 text-5xl mb-4"></i><p class="text-gray-500">暂无文章，快来发布你的第一篇博客吧！</p>{% if current_user.is_authenticated %}<a href="{{ url_for('create_post') }}" class="mt-4 inline-block px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all-300">发布文章</a>{% endif %}</div>{% endif %}</div><!-- 侧边栏 --><div class="space-y-8"><!-- 搜索框 --><div class="bg-white rounded-xl shadow-md p-6"><h3 class="text-lg font-semibold mb-4">搜索文章</h3><div class="relative"><input type="text" placeholder="输入关键词搜索..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"><button class="absolute right-3 top-2.5 text-gray-400 hover:text-primary"><i class="fa fa-search"></i></button></div></div><!-- 分类 --><div class="bg-white rounded-xl shadow-md p-6"><h3 class="text-lg font-semibold mb-4">文章分类</h3><ul class="space-y-2"><li><a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 transition-all-300"><span>技术</span><span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">24</span></a></li><li><a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 transition-all-300"><span>生活</span><span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">18</span></a></li><li><a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 transition-all-300"><span>旅行</span><span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">12</span></a></li><li><a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 transition-all-300"><span>美食</span><span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">9</span></a></li><li><a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 transition-all-300"><span>读书</span><span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">7</span></a></li></ul></div><!-- 热门文章 --><div class="bg-white rounded-xl shadow-md p-6"><h3 class="text-lg font-semibold mb-4">热门文章</h3><ul class="space-y-4"><li class="flex items-start space-x-3"><div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-lg overflow-hidden"><img src="https://picsum.photos/200/200?random=1" alt="文章缩略图" class="w-full h-full object-cover"></div><div><h4 class="font-medium line-clamp-2"><a href="#" class="hover:text-primary transition-all-300">Python数据分析实战：从零到一构建数据可视化系统</a></h4><div class="flex items-center text-xs text-gray-500 mt-1"><span class="flex items-center mr-3"><i class="fa fa-eye mr-1"></i> 1.2k</span><span class="flex items-center"><i class="fa fa-heart mr-1"></i> 42</span></div></div></li><li class="flex items-start space-x-3"><div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-lg overflow-hidden"><img src="https://picsum.photos/200/200?random=2" alt="文章缩略图" class="w-full h-full object-cover"></div><div><h4 class="font-medium line-clamp-2"><a href="#" class="hover:text-primary transition-all-300">2023年最值得学习的前端框架对比与分析</a></h4><div class="flex items-center text-xs text-gray-500 mt-1"><span class="flex items-center mr-3"><i class="fa fa-eye mr-1"></i> 986</span><span class="flex items-center"><i class="fa fa-heart mr-1"></i> 36</span></div></div></li><li class="flex items-start space-x-3"><div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-lg overflow-hidden"><img src="https://picsum.photos/200/200?random=3" alt="文章缩略图" class="w-full h-full object-cover"></div><div><h4 class="font-medium line-clamp-2"><a href="#" class="hover:text-primary transition-all-300">如何优雅地处理Python中的异常和错误</a></h4><div class="flex items-center text-xs text-gray-500 mt-1"><span class="flex items-center mr-3"><i class="fa fa-eye mr-1"></i> 854</span><span class="flex items-center"><i class="fa fa-heart mr-1"></i> 29</span></div></div></li></ul></div><!-- 标签云 --><div class="bg-white rounded-xl shadow-md p-6"><h3 class="text-lg font-semibold mb-4">标签云</h3><div class="flex flex-wrap gap-2"><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">Python</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">Web开发</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">数据分析</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">机器学习</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">前端</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">后端</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">数据库</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">Linux</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">算法</a><a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-primary hover:text-white transition-all-300">面试</a></div></div></div></div>
{% endblock %} login.html
{% extends "base.html" %}{% block title %}轻博客 - 登录{% endblock %}{% block content %}<div class="max-w-md mx-auto"><div class="bg-white rounded-xl shadow-md p-8 mb-6"><h2 class="text-2xl font-bold mb-6 text-center">登录账号</h2><form method="POST" action="{{ url_for('login') }}">{{ form.hidden_tag() }}<div class="mb-4">{{ form.email.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.email(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary", placeholder="请输入邮箱") }}{% for error in form.email.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="mb-6">{{ form.password.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.password(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary", placeholder="请输入密码") }}{% for error in form.password.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="flex items-center justify-between mb-6"><div class="flex items-center"><input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"><label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label></div><a href="#" class="text-sm text-primary hover:underline">忘记密码？</a></div><button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary/90 transition-all-300">登录</button></form><div class="mt-6 text-center text-sm text-gray-500">还没有账号？ <a href="{{ url_for('register') }}" class="text-primary hover:underline">注册</a></div></div></div>
{% endblock %} register.html
{% extends "base.html" %}{% block title %}轻博客 - 注册{% endblock %}{% block content %}<div class="max-w-md mx-auto"><div class="bg-white rounded-xl shadow-md p-8 mb-6"><h2 class="text-2xl font-bold mb-6 text-center">注册账号</h2><form method="POST" action="{{ url_for('register') }}">{{ form.hidden_tag() }}<div class="mb-4">{{ form.username.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.username(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary", placeholder="请输入用户名") }}{% for error in form.username.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="mb-4">{{ form.email.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.email(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary", placeholder="请输入邮箱") }}{% for error in form.email.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="mb-4">{{ form.password.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.password(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary", placeholder="请输入密码") }}{% for error in form.password.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><div class="mb-6">{{ form.confirm_password.label(class="block text-sm font-medium text-gray-700 mb-1") }}{{ form.confirm_password(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary", placeholder="请再次输入密码") }}{% for error in form.confirm_password.errors %}<span class="text-red-500 text-xs">{{ error }}</span>{% endfor %}</div><button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary/90 transition-all-300">注册</button></form><div class="mt-6 text-center text-sm text-gray-500">已有账号？ <a href="{{ url_for('login') }}" class="text-primary hover:underline">登录</a></div></div></div>
{% endblock %} app.py
from flask import Flask, render_template, request, redirect, url_for, flash
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
from werkzeug.security import generate_password_hash, check_password_hash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, TextAreaField, SelectField
from wtforms.validators import DataRequired, Email, EqualTo, Length
from flask_paginate import Pagination, get_page_argsapp = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = Falsedb = SQLAlchemy(app)
login_manager = LoginManager(app)
login_manager.login_view = 'login'# 模型定义
class User(UserMixin, db.Model):id = db.Column(db.Integer, primary_key=True)username = db.Column(db.String(80), unique=True, nullable=False)email = db.Column(db.String(120), unique=True, nullable=False)password_hash = db.Column(db.String(128))posts = db.relationship('Post', backref='author', lazy=True)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(100), nullable=False)content = db.Column(db.Text, nullable=False)created_at = db.Column(db.DateTime, nullable=False, default=db.func.current_timestamp())category = db.Column(db.String(50), nullable=False)user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)views = db.Column(db.Integer, default=0)likes = db.Column(db.Integer, default=0)@propertydef comments_count(self):# 模拟评论数量return random.randint(0, 20)# 表单定义
class RegistrationForm(FlaskForm):username = StringField('用户名', validators=[DataRequired(), Length(min=3, max=20)])email = StringField('邮箱', validators=[DataRequired(), Email()])password = PasswordField('密码', validators=[DataRequired(), Length(min=6)])confirm_password = PasswordField('确认密码', validators=[DataRequired(), EqualTo('password')])submit = SubmitField('注册')class LoginForm(FlaskForm):email = StringField('邮箱', validators=[DataRequired(), Email()])password = PasswordField('密码', validators=[DataRequired()])