简体中文 繁體中文 English Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français Japanese

开启辅助访问 切换到宽版

站内搜索

搜索
AI 风月

活动公告

通知：来制造点氛围！（增加进阶任务）
03-01 22:34
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

精选Flask项目实例教程从入门到精通全面掌握Python Web开发技能的实用指南

威震华夏关云长

3万

主题

602

科技点

3万

积分

白金月票

碾压王

积分
32704

立华奏
发表于 2025-9-20 12:30:00 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
1. Flask简介与入门

Flask是一个用Python编写的轻量级Web应用框架。它被称为微框架，因为它不需要特定的工具或库，没有数据库抽象层、表单验证或其他第三方库提供的常见功能。然而，Flask支持扩展，可以添加这些功能到应用程序中，就像它们是在Flask本身中实现的一样。

1.1 为什么选择Flask？

• 轻量级：核心简单但易于扩展
• 灵活性：没有强制性的项目结构或依赖关系
• 易于学习：API简单直观，文档完善
• 强大的社区：拥有丰富的扩展和活跃的社区支持

1.2 安装Flask

在开始之前，确保你已经安装了Python。然后通过pip安装Flask：
  2. pip install flask
复制代码

1.3 第一个Flask应用

让我们创建一个简单的”Hello World”应用：
  2. from flask import Flask
  4. app = Flask(__name__)
  6. @app.route('/')
  7. def hello_world():
  8.     return 'Hello, World!'
  10. if __name__ == '__main__':
  11.     app.run(debug=True)
复制代码

将这段代码保存为app.py，然后在命令行中运行：
  2. python app.py
复制代码

现在，打开浏览器并访问http://127.0.0.1:5000/，你将看到”Hello, World!“的输出。

2. Flask基础概念

2.1 路由

路由是URL与Python函数之间的映射关系。在Flask中，使用@app.route()装饰器来定义路由：
  2. @app.route('/user/<username>')
  3. def show_user_profile(username):
  4.     # 显示用户的个人资料
  5.     return f'User: {username}'
  7. @app.route('/post/<int:post_id>')
  8. def show_post(post_id):
  9.     # 显示给定id的帖子，id是整数
  10.     return f'Post: {post_id}'
复制代码

在上面的例子中，<username>是一个字符串类型的变量部分，而<int:post_id>是一个整数类型的变量部分。

2.2 模板渲染

Flask使用Jinja2模板引擎。创建一个名为templates的文件夹，并在其中创建一个HTML文件：
  2. <!-- templates/hello.html -->
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <title>Hello from Flask</title>
  7. </head>
  8. <body>
  9.     <h1>Hello, {{ name }}!</h1>
  10. </body>
  11. </html>
复制代码

然后在Flask应用中使用render_template函数渲染这个模板：
  2. from flask import render_template
  4. @app.route('/hello/<name>')
  5. def hello(name):
  6.     return render_template('hello.html', name=name)
复制代码

2.3 静态文件

静态文件如CSS、JavaScript和图像文件通常放在名为static的文件夹中。在模板中，可以使用url_for('static', filename='style.css')来生成静态文件的URL。
  2. <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
复制代码

2.4 请求处理

Flask提供了全局的request对象来访问传入的请求数据：
  2. from flask import request
  4. @app.route('/login', methods=['GET', 'POST'])
  5. def login():
  6.     if request.method == 'POST':
  7.         username = request.form['username']
  8.         password = request.form['password']
  9.         # 验证用户名和密码
  10.         return f'Logged in as {username}'
  11.     else:
  12.         return '''
  13.             <form method="post">
  14.                 <p><input type=text name=username>
  15.                 <p><input type=password name=password>
  16.                 <p><input type=submit value=Login>
  17.             </form>
  18.         '''
复制代码

3. Flask进阶功能

3.1 数据库集成

Flask本身不包含数据库抽象层，但有许多扩展可以帮助你与数据库交互。最常用的是Flask-SQLAlchemy，它为SQLAlchemy提供了Flask集成。

首先安装Flask-SQLAlchemy：
  2. pip install flask-sqlalchemy
复制代码

然后配置数据库：
  2. from flask import Flask
  3. from flask_sqlalchemy import SQLAlchemy
  5. app = Flask(__name__)
  6. # 配置SQLite数据库
  7. app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///mydatabase.db'
  8. app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
  9. db = SQLAlchemy(app)
  11. # 定义模型
  12. class User(db.Model):
  13.     id = db.Column(db.Integer, primary_key=True)
  14.     username = db.Column(db.String(80), unique=True, nullable=False)
  15.     email = db.Column(db.String(120), unique=True, nullable=False)
  17.     def __repr__(self):
  18.         return f'<User {self.username}>'
  20. # 创建数据库表
  21. @app.before_first_request
  22. def create_tables():
  23.     db.create_all()
  25. @app.route('/add_user')
  26. def add_user():
  27.     user = User(username='john', email='john@example.com')
  28.     db.session.add(user)
  29.     db.session.commit()
  30.     return 'User added!'
  32. @app.route('/users')
  33. def get_users():
  34.     users = User.query.all()
  35.     return '<br>'.join([f'{user.username}: {user.email}' for user in users])
复制代码

3.2 表单处理

Flask-WTF扩展简化了Web表单的处理。首先安装必要的包：
  2. pip install flask-wtf
  3. pip install email-validator
复制代码

然后创建一个表单类：
  2. from flask_wtf import FlaskForm
  3. from wtforms import StringField, PasswordField, SubmitField
  4. from wtforms.validators import DataRequired, Email, Length
  6. class RegistrationForm(FlaskForm):
  7.     username = StringField('Username',
  8.                            validators=[DataRequired(), Length(min=4, max=20)])
  9.     email = StringField('Email',
  10.                        validators=[DataRequired(), Email()])
  11.     password = PasswordField('Password',
  12.                             validators=[DataRequired(), Length(min=8)])
  13.     submit = SubmitField('Register')
复制代码

在视图函数中使用表单：
  2. @app.route('/register', methods=['GET', 'POST'])
  3. def register():
  4.     form = RegistrationForm()
  5.     if form.validate_on_submit():
  6.         # 处理表单数据
  7.         user = User(username=form.username.data,
  8.                    email=form.email.data)
  9.         user.set_password(form.password.data)  # 假设有这个方法
  10.         db.session.add(user)
  11.         db.session.commit()
  12.         return 'Registration successful!'
  13.     return render_template('register.html', form=form)
复制代码

对应的模板register.html：
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>Register</title>
  6. </head>
  7. <body>
  8.     <h1>Register</h1>
  9.     <form method="POST" action="">
  10.         {{ form.hidden_tag() }}
  11.         <p>
  12.             {{ form.username.label }}<br>
  13.             {{ form.username(size=32) }}
  14.         </p>
  15.         <p>
  16.             {{ form.email.label }}<br>
  17.             {{ form.email(size=32) }}
  18.         </p>
  19.         <p>
  20.             {{ form.password.label }}<br>
  21.             {{ form.password(size=32) }}
  22.         </p>
  23.         <p>{{ form.submit() }}</p>
  24.     </form>
  25. </body>
  26. </html>
复制代码

3.3 用户认证

Flask-Login扩展提供了用户会话管理功能。首先安装：
  2. pip install flask-login
复制代码

然后配置Flask-Login：
  2. from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
  4. login_manager = LoginManager()
  5. login_manager.init_app(app)
  6. login_manager.login_view = 'login'
  8. # User模型需要继承UserMixin
  9. class User(UserMixin, db.Model):
  10.     # ...之前的字段...
  11.     password_hash = db.Column(db.String(128))
  12.    
  13.     def set_password(self, password):
  14.         self.password_hash = generate_password_hash(password)
  15.    
  16.     def check_password(self, password):
  17.         return check_password_hash(self.password_hash, password)
  19. @login_manager.user_loader
  20. def load_user(user_id):
  21.     return User.query.get(int(user_id))
  23. @app.route('/login', methods=['GET', 'POST'])
  24. def login():
  25.     if current_user.is_authenticated:
  26.         return redirect(url_for('index'))
  27.    
  28.     form = LoginForm()
  29.     if form.validate_on_submit():
  30.         user = User.query.filter_by(username=form.username.data).first()
  31.         if user is None or not user.check_password(form.password.data):
  32.             flash('Invalid username or password')
  33.             return redirect(url_for('login'))
  34.         login_user(user, remember=form.remember_me.data)
  35.         return redirect(url_for('index'))
  36.    
  37.     return render_template('login.html', title='Sign In', form=form)
  39. @app.route('/logout')
  40. def logout():
  41.     logout_user()
  42.     return redirect(url_for('index'))
  44. @app.route('/protected')
  45. @login_required
  46. def protected():
  47.     return 'This is a protected page. Only logged in users can see this.'
复制代码

3.4 RESTful API

Flask可以轻松创建RESTful API。以下是一个简单的示例：
  2. from flask import jsonify
  4. @app.route('/api/users', methods=['GET'])
  5. def get_users():
  6.     users = User.query.all()
  7.     return jsonify([{'username': user.username, 'email': user.email} for user in users])
  9. @app.route('/api/users/<int:user_id>', methods=['GET'])
  10. def get_user(user_id):
  11.     user = User.query.get_or_404(user_id)
  12.     return jsonify({'username': user.username, 'email': user.email})
  14. @app.route('/api/users', methods=['POST'])
  15. def create_user():
  16.     data = request.get_json()
  17.     if not data or not 'username' in data or not 'email' in data:
  18.         return jsonify({'error': 'Bad request'}), 400
  19.    
  20.     user = User(username=data['username'], email=data['email'])
  21.     db.session.add(user)
  22.     db.session.commit()
  23.     return jsonify({'message': 'User created successfully'}), 201
  25. @app.route('/api/users/<int:user_id>', methods=['PUT'])
  26. def update_user(user_id):
  27.     user = User.query.get_or_404(user_id)
  28.     data = request.get_json()
  29.    
  30.     if 'username' in data:
  31.         user.username = data['username']
  32.     if 'email' in data:
  33.         user.email = data['email']
  34.    
  35.     db.session.commit()
  36.     return jsonify({'message': 'User updated successfully'})
  38. @app.route('/api/users/<int:user_id>', methods=['DELETE'])
  39. def delete_user(user_id):
  40.     user = User.query.get_or_404(user_id)
  41.     db.session.delete(user)
  42.     db.session.commit()
  43.     return jsonify({'message': 'User deleted successfully'})
复制代码

4. 实战项目示例

4.1 博客系统

让我们创建一个简单的博客系统，包括文章发布、显示和评论功能。
  2. blog/
  3.     app.py
  4.     config.py
  5.     models.py
  6.     forms.py
  7.     templates/
  8.         base.html
  9.         index.html
  10.         post.html
  11.         create_post.html
  12.         register.html
  13.         login.html
  14.     static/
  15.         css/
  16.             style.css
复制代码
  2. # config.py
  3. import os
  5. class Config:
  6.     SECRET_KEY = os.environ.get('SECRET_KEY') or 'your-secret-key'
  7.     SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or 'sqlite:///blog.db'
  8.     SQLALCHEMY_TRACK_MODIFICATIONS = False
复制代码
  2. # models.py
  3. from datetime import datetime
  4. from flask_sqlalchemy import SQLAlchemy
  5. from flask_login import UserMixin
  6. from werkzeug.security import generate_password_hash, check_password_hash
  8. db = SQLAlchemy()
  10. class User(UserMixin, db.Model):
  11.     id = db.Column(db.Integer, primary_key=True)
  12.     username = db.Column(db.String(64), index=True, unique=True)
  13.     email = db.Column(db.String(120), index=True, unique=True)
  14.     password_hash = db.Column(db.String(128))
  15.     posts = db.relationship('Post', backref='author', lazy='dynamic')
  17.     def set_password(self, password):
  18.         self.password_hash = generate_password_hash(password)
  20.     def check_password(self, password):
  21.         return check_password_hash(self.password_hash, password)
  23.     def __repr__(self):
  24.         return f'<User {self.username}>'
  26. class Post(db.Model):
  27.     id = db.Column(db.Integer, primary_key=True)
  28.     title = db.Column(db.String(140))
  29.     body = db.Column(db.Text)
  30.     timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
  31.     user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
  32.     comments = db.relationship('Comment', backref='post', lazy='dynamic')
  34.     def __repr__(self):
  35.         return f'<Post {self.title}>'
  37. class Comment(db.Model):
  38.     id = db.Column(db.Integer, primary_key=True)
  39.     body = db.Column(db.Text)
  40.     timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
  41.     user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
  42.     post_id = db.Column(db.Integer, db.ForeignKey('post.id'))
  44.     def __repr__(self):
  45.         return f'<Comment {self.body[:20]}...>'
复制代码
  2. # forms.py
  3. from flask_wtf import FlaskForm
  4. from wtforms import StringField, PasswordField, BooleanField, SubmitField, TextAreaField
  5. from wtforms.validators import DataRequired, Email, EqualTo, ValidationError, Length
  6. from models import User
  8. class LoginForm(FlaskForm):
  9.     username = StringField('Username', validators=[DataRequired()])
  10.     password = PasswordField('Password', validators=[DataRequired()])
  11.     remember_me = BooleanField('Remember Me')
  12.     submit = SubmitField('Sign In')
  14. class RegistrationForm(FlaskForm):
  15.     username = StringField('Username', validators=[DataRequired(), Length(min=4, max=20)])
  16.     email = StringField('Email', validators=[DataRequired(), Email()])
  17.     password = PasswordField('Password', validators=[DataRequired(), Length(min=8)])
  18.     password2 = PasswordField('Repeat Password', validators=[DataRequired(), EqualTo('password')])
  19.     submit = SubmitField('Register')
  21.     def validate_username(self, username):
  22.         user = User.query.filter_by(username=username.data).first()
  23.         if user is not None:
  24.             raise ValidationError('Please use a different username.')
  26.     def validate_email(self, email):
  27.         user = User.query.filter_by(email=email.data).first()
  28.         if user is not None:
  29.             raise ValidationError('Please use a different email address.')
  31. class PostForm(FlaskForm):
  32.     title = StringField('Title', validators=[DataRequired(), Length(max=140)])
  33.     body = TextAreaField('Content', validators=[DataRequired(), Length(min=1, max=2000)])
  34.     submit = SubmitField('Submit')
  36. class CommentForm(FlaskForm):
  37.     body = TextAreaField('Comment', validators=[DataRequired(), Length(min=1, max=500)])
  38.     submit = SubmitField('Submit')
复制代码
  2. # app.py
  3. from flask import Flask, render_template, flash, redirect, url_for, request
  4. from flask_login import LoginManager, current_user, login_user, logout_user, login_required
  5. from werkzeug.urls import url_parse
  6. from datetime import datetime
  7. from config import Config
  8. from models import db, User, Post, Comment
  9. from forms import LoginForm, RegistrationForm, PostForm, CommentForm
  11. app = Flask(__name__)
  12. app.config.from_object(Config)
  13. db.init_app(app)
  15. login_manager = LoginManager()
  16. login_manager.init_app(app)
  17. login_manager.login_view = 'login'
  19. @login_manager.user_loader
  20. def load_user(user_id):
  21.     return User.query.get(int(user_id))
  23. @app.before_request
  24. def before_request():
  25.     if current_user.is_authenticated:
  26.         current_user.last_seen = datetime.utcnow()
  27.         db.session.commit()
  29. @app.route('/', methods=['GET', 'POST'])
  30. @app.route('/index', methods=['GET', 'POST'])
  31. def index():
  32.     page = request.args.get('page', 1, type=int)
  33.     posts = Post.query.order_by(Post.timestamp.desc()).paginate(
  34.         page, app.config['POSTS_PER_PAGE'], False)
  35.     next_url = url_for('index', page=posts.next_num) if posts.has_next else None
  36.     prev_url = url_for('index', page=posts.prev_num) if posts.has_prev else None
  37.     return render_template('index.html', title='Home', posts=posts.items,
  38.                           next_url=next_url, prev_url=prev_url)
  40. @app.route('/login', methods=['GET', 'POST'])
  41. def login():
  42.     if current_user.is_authenticated:
  43.         return redirect(url_for('index'))
  44.     form = LoginForm()
  45.     if form.validate_on_submit():
  46.         user = User.query.filter_by(username=form.username.data).first()
  47.         if user is None or not user.check_password(form.password.data):
  48.             flash('Invalid username or password')
  49.             return redirect(url_for('login'))
  50.         login_user(user, remember=form.remember_me.data)
  51.         next_page = request.args.get('next')
  52.         if not next_page or url_parse(next_page).netloc != '':
  53.             next_page = url_for('index')
  54.         return redirect(next_page)
  55.     return render_template('login.html', title='Sign In', form=form)
  57. @app.route('/logout')
  58. def logout():
  59.     logout_user()
  60.     return redirect(url_for('index'))
  62. @app.route('/register', methods=['GET', 'POST'])
  63. def register():
  64.     if current_user.is_authenticated:
  65.         return redirect(url_for('index'))
  66.     form = RegistrationForm()
  67.     if form.validate_on_submit():
  68.         user = User(username=form.username.data, email=form.email.data)
  69.         user.set_password(form.password.data)
  70.         db.session.add(user)
  71.         db.session.commit()
  72.         flash('Congratulations, you are now a registered user!')
  73.         return redirect(url_for('login'))
  74.     return render_template('register.html', title='Register', form=form)
  76. @app.route('/create_post', methods=['GET', 'POST'])
  77. @login_required
  78. def create_post():
  79.     form = PostForm()
  80.     if form.validate_on_submit():
  81.         post = Post(title=form.title.data, body=form.body.data, author=current_user)
  82.         db.session.add(post)
  83.         db.session.commit()
  84.         flash('Your post is now live!')
  85.         return redirect(url_for('index'))
  86.     return render_template('create_post.html', title='Create Post', form=form)
  88. @app.route('/post/<int:id>', methods=['GET', 'POST'])
  89. def post(id):
  90.     post = Post.query.get_or_404(id)
  91.     form = CommentForm()
  92.     if form.validate_on_submit():
  93.         comment = Comment(body=form.body.data, post=post, author=current_user)
  94.         db.session.add(comment)
  95.         db.session.commit()
  96.         flash('Your comment has been published.')
  97.         return redirect(url_for('post', id=post.id))
  98.     comments = Comment.query.filter_by(post_id=post.id).order_by(Comment.timestamp.desc()).all()
  99.     return render_template('post.html', post=post, comments=comments, form=form)
  101. @app.route('/user/<username>')
  102. @login_required
  103. def user(username):
  104.     user = User.query.filter_by(username=username).first_or_404()
  105.     page = request.args.get('page', 1, type=int)
  106.     posts = user.posts.order_by(Post.timestamp.desc()).paginate(
  107.         page, app.config['POSTS_PER_PAGE'], False)
  108.     next_url = url_for('user', username=user.username, page=posts.next_num) if posts.has_next else None
  109.     prev_url = url_for('user', username=user.username, page=posts.prev_num) if posts.has_prev else None
  110.     return render_template('user.html', user=user, posts=posts.items,
  111.                           next_url=next_url, prev_url=prev_url)
  113. if __name__ == '__main__':
  114.     app.run(debug=True)
复制代码

base.html:
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>{{ title }} - Blog</title>
  7.     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  8. </head>
  9. <body>
  10.     <header>
  11.         <nav>
  12.             <a href="{{ url_for('index') }}">Home</a>
  13.             {% if current_user.is_anonymous %}
  14.             <a href="{{ url_for('login') }}">Login</a>
  15.             {% else %}
  16.             <a href="{{ url_for('user', username=current_user.username) }}">Profile</a>
  17.             <a href="{{ url_for('create_post') }}">New Post</a>
  18.             <a href="{{ url_for('logout') }}">Logout</a>
  19.             {% endif %}
  20.         </nav>
  21.     </header>
  22.     <main>
  23.         {% with messages = get_flashed_messages() %}
  24.         {% if messages %}
  25.         <div class="flash-messages">
  26.             {% for message in messages %}
  27.             <div class="flash">{{ message }}</div>
  28.             {% endfor %}
  29.         </div>
  30.         {% endif %}
  31.         {% endwith %}
  32.         
  33.         {% block content %}{% endblock %}
  34.     </main>
  35.     <footer>
  36.         <p>Blog &copy; 2023</p>
  37.     </footer>
  38. </body>
  39. </html>
复制代码

index.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>Blog Posts</h1>
  6.    
  7.     {% if current_user.is_authenticated %}
  8.     <p><a href="{{ url_for('create_post') }}">Create a new post</a></p>
  9.     {% endif %}
  10.    
  11.     {% for post in posts %}
  12.     <article class="post">
  13.         <h2><a href="{{ url_for('post', id=post.id) }}">{{ post.title }}</a></h2>
  14.         <div class="post-meta">
  15.             Posted by <a href="{{ url_for('user', username=post.author.username) }}">{{ post.author.username }}</a>
  16.             on {{ post.timestamp.strftime('%Y-%m-%d') }}
  17.         </div>
  18.         <div class="post-body">
  19.             {{ post.body[:200] }}{% if post.body|length > 200 %}...{% endif %}
  20.         </div>
  21.     </article>
  22.     {% endfor %}
  23.    
  24.     {% if prev_url %}
  25.     <a href="{{ prev_url }}">Newer posts</a>
  26.     {% endif %}
  27.     {% if next_url %}
  28.     <a href="{{ next_url }}">Older posts</a>
  29.     {% endif %}
  30. {% endblock %}
复制代码

post.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <article class="post">
  6.         <h1>{{ post.title }}</h1>
  7.         <div class="post-meta">
  8.             Posted by <a href="{{ url_for('user', username=post.author.username) }}">{{ post.author.username }}</a>
  9.             on {{ post.timestamp.strftime('%Y-%m-%d %H:%M') }}
  10.         </div>
  11.         <div class="post-body">
  12.             {{ post.body }}
  13.         </div>
  14.     </article>
  15.    
  16.     <section class="comments">
  17.         <h2>Comments</h2>
  18.         
  19.         {% if current_user.is_authenticated %}
  20.         <form action="" method="post" class="comment-form">
  21.             {{ form.hidden_tag() }}
  22.             <div>
  23.                 {{ form.body.label }}<br>
  24.                 {{ form.body(cols=50, rows=4) }}
  25.             </div>
  26.             <div>{{ form.submit() }}</div>
  27.         </form>
  28.         {% endif %}
  29.         
  30.         {% for comment in comments %}
  31.         <div class="comment">
  32.             <div class="comment-meta">
  33.                 <a href="{{ url_for('user', username=comment.author.username) }}">{{ comment.author.username }}</a>
  34.                 on {{ comment.timestamp.strftime('%Y-%m-%d %H:%M') }}
  35.             </div>
  36.             <div class="comment-body">
  37.                 {{ comment.body }}
  38.             </div>
  39.         </div>
  40.         {% endfor %}
  41.     </section>
  42. {% endblock %}
复制代码

create_post.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>Create Post</h1>
  6.     <form action="" method="post">
  7.         {{ form.hidden_tag() }}
  8.         <div>
  9.             {{ form.title.label }}<br>
  10.             {{ form.title(size=50) }}
  11.         </div>
  12.         <div>
  13.             {{ form.body.label }}<br>
  14.             {{ form.body(cols=50, rows=10) }}
  15.         </div>
  16.         <div>{{ form.submit() }}</div>
  17.     </form>
  18. {% endblock %}
复制代码

login.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>Sign In</h1>
  6.     <form action="" method="post">
  7.         {{ form.hidden_tag() }}
  8.         <div>
  9.             {{ form.username.label }}<br>
  10.             {{ form.username(size=32) }}
  11.         </div>
  12.         <div>
  13.             {{ form.password.label }}<br>
  14.             {{ form.password(size=32) }}
  15.         </div>
  16.         <div>
  17.             {{ form.remember_me() }} {{ form.remember_me.label }}
  18.         </div>
  19.         <div>{{ form.submit() }}</div>
  20.     </form>
  21.     <p>New User? <a href="{{ url_for('register') }}">Click to Register!</a></p>
  22. {% endblock %}
复制代码

register.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>Register</h1>
  6.     <form action="" method="post">
  7.         {{ form.hidden_tag() }}
  8.         <div>
  9.             {{ form.username.label }}<br>
  10.             {{ form.username(size=32) }}
  11.         </div>
  12.         <div>
  13.             {{ form.email.label }}<br>
  14.             {{ form.email(size=32) }}
  15.         </div>
  16.         <div>
  17.             {{ form.password.label }}<br>
  18.             {{ form.password(size=32) }}
  19.         </div>
  20.         <div>
  21.             {{ form.password2.label }}<br>
  22.             {{ form.password2(size=32) }}
  23.         </div>
  24.         <div>{{ form.submit() }}</div>
  25.     </form>
  26. {% endblock %}
复制代码

user.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>User: {{ user.username }}</h1>
  6.    
  7.     {% for post in posts %}
  8.     <article class="post">
  9.         <h2><a href="{{ url_for('post', id=post.id) }}">{{ post.title }}</a></h2>
  10.         <div class="post-meta">
  11.             Posted on {{ post.timestamp.strftime('%Y-%m-%d') }}
  12.         </div>
  13.         <div class="post-body">
  14.             {{ post.body[:200] }}{% if post.body|length > 200 %}...{% endif %}
  15.         </div>
  16.     </article>
  17.     {% endfor %}
  18.    
  19.     {% if prev_url %}
  20.     <a href="{{ prev_url }}">Newer posts</a>
  21.     {% endif %}
  22.     {% if next_url %}
  23.     <a href="{{ next_url }}">Older posts</a>
  24.     {% endif %}
  25. {% endblock %}
复制代码
  2. /* static/css/style.css */
  3. body {
  4.     font-family: Arial, sans-serif;
  5.     line-height: 1.6;
  6.     margin: 0;
  7.     padding: 0;
  8.     background-color: #f4f4f4;
  9.     color: #333;
  10. }
  12. header {
  13.     background: #333;
  14.     color: #fff;
  15.     padding: 1rem;
  16.     text-align: center;
  17. }
  19. nav a {
  20.     color: #fff;
  21.     text-decoration: none;
  22.     margin: 0 15px;
  23. }
  25. nav a:hover {
  26.     text-decoration: underline;
  27. }
  29. main {
  30.     max-width: 800px;
  31.     margin: 20px auto;
  32.     padding: 0 20px;
  33. }
  35. footer {
  36.     text-align: center;
  37.     padding: 20px;
  38.     margin-top: 20px;
  39.     background: #333;
  40.     color: #fff;
  41. }
  43. .post {
  44.     background: #fff;
  45.     padding: 20px;
  46.     margin-bottom: 20px;
  47.     border-radius: 5px;
  48.     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  49. }
  51. .post h1, .post h2 {
  52.     margin-top: 0;
  53. }
  55. .post-meta {
  56.     color: #666;
  57.     font-size: 0.9em;
  58.     margin-bottom: 15px;
  59. }
  61. .post-body {
  62.     margin-bottom: 15px;
  63. }
  65. .flash-messages {
  66.     margin-bottom: 20px;
  67. }
  69. .flash {
  70.     padding: 10px;
  71.     margin-bottom: 10px;
  72.     background: #d4edda;
  73.     color: #155724;
  74.     border: 1px solid #c3e6cb;
  75.     border-radius: 4px;
  76. }
  78. .comment {
  79.     background: #f9f9f9;
  80.     padding: 15px;
  81.     margin-bottom: 15px;
  82.     border-radius: 5px;
  83. }
  85. .comment-meta {
  86.     color: #666;
  87.     font-size: 0.9em;
  88.     margin-bottom: 10px;
  89. }
  91. .comment-form {
  92.     margin-bottom: 30px;
  93. }
  95. form div {
  96.     margin-bottom: 15px;
  97. }
  99. input[type="text"], input[type="password"], input[type="email"], textarea {
  100.     width: 100%;
  101.     padding: 8px;
  102.     border: 1px solid #ddd;
  103.     border-radius: 4px;
  104. }
  106. input[type="submit"] {
  107.     background: #333;
  108.     color: #fff;
  109.     border: none;
  110.     padding: 10px 15px;
  111.     border-radius: 4px;
  112.     cursor: pointer;
  113. }
  115. input[type="submit"]:hover {
  116.     background: #444;
  117. }
复制代码

4.2 电子商务网站

让我们创建一个简单的电子商务网站，包括产品展示、购物车和订单功能。
  2. ecommerce/
  3.     app.py
  4.     config.py
  5.     models.py
  6.     forms.py
  7.     templates/
  8.         base.html
  9.         index.html
  10.         product.html
  11.         cart.html
  12.         checkout.html
  13.         order_confirmation.html
  14.     static/
  15.         css/
  16.             style.css
复制代码
  2. # models.py
  3. from datetime import datetime
  4. from flask_sqlalchemy import SQLAlchemy
  5. from flask_login import UserMixin
  6. from werkzeug.security import generate_password_hash, check_password_hash
  8. db = SQLAlchemy()
  10. class User(UserMixin, db.Model):
  11.     id = db.Column(db.Integer, primary_key=True)
  12.     username = db.Column(db.String(64), index=True, unique=True)
  13.     email = db.Column(db.String(120), index=True, unique=True)
  14.     password_hash = db.Column(db.String(128))
  15.     orders = db.relationship('Order', backref='user', lazy='dynamic')
  17.     def set_password(self, password):
  18.         self.password_hash = generate_password_hash(password)
  20.     def check_password(self, password):
  21.         return check_password_hash(self.password_hash, password)
  23.     def __repr__(self):
  24.         return f'<User {self.username}>'
  26. class Product(db.Model):
  27.     id = db.Column(db.Integer, primary_key=True)
  28.     name = db.Column(db.String(100), index=True)
  29.     description = db.Column(db.Text)
  30.     price = db.Column(db.Float)
  31.     image_url = db.Column(db.String(200))
  32.     stock = db.Column(db.Integer, default=0)
  33.     order_items = db.relationship('OrderItem', backref='product', lazy='dynamic')
  35.     def __repr__(self):
  36.         return f'<Product {self.name}>'
  38. class Order(db.Model):
  39.     id = db.Column(db.Integer, primary_key=True)
  40.     user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
  41.     created_at = db.Column(db.DateTime, index=True, default=datetime.utcnow)
  42.     status = db.Column(db.String(20), default='pending')  # pending, paid, shipped, delivered, cancelled
  43.     total_amount = db.Column(db.Float)
  44.     shipping_address = db.Column(db.Text)
  45.     payment_method = db.Column(db.String(50))
  46.     items = db.relationship('OrderItem', backref='order', lazy='dynamic')
  48.     def __repr__(self):
  49.         return f'<Order {self.id}>'
  51. class OrderItem(db.Model):
  52.     id = db.Column(db.Integer, primary_key=True)
  53.     order_id = db.Column(db.Integer, db.ForeignKey('order.id'))
  54.     product_id = db.Column(db.Integer, db.ForeignKey('product.id'))
  55.     quantity = db.Column(db.Integer)
  56.     price = db.Column(db.Float)  # Price at the time of purchase
  58.     def __repr__(self):
  59.         return f'<OrderItem {self.id}>'
复制代码

由于购物车是临时性的，我们可以使用Flask的session来存储购物车数据：
  2. # cart.py
  3. from flask import session
  4. from models import Product
  6. def get_cart():
  7.     cart = session.get('cart', {})
  8.     return cart
  10. def add_to_cart(product_id, quantity=1):
  11.     cart = get_cart()
  12.     product_id = str(product_id)
  13.    
  14.     if product_id in cart:
  15.         cart[product_id] += quantity
  16.     else:
  17.         cart[product_id] = quantity
  18.    
  19.     session['cart'] = cart
  21. def remove_from_cart(product_id):
  22.     cart = get_cart()
  23.     product_id = str(product_id)
  24.    
  25.     if product_id in cart:
  26.         del cart[product_id]
  27.         session['cart'] = cart
  29. def update_cart(product_id, quantity):
  30.     cart = get_cart()
  31.     product_id = str(product_id)
  32.    
  33.     if quantity > 0:
  34.         cart[product_id] = quantity
  35.     else:
  36.         if product_id in cart:
  37.             del cart[product_id]
  38.    
  39.     session['cart'] = cart
  41. def get_cart_items():
  42.     cart = get_cart()
  43.     items = []
  44.    
  45.     for product_id, quantity in cart.items():
  46.         product = Product.query.get(int(product_id))
  47.         if product:
  48.             items.append({
  49.                 'product': product,
  50.                 'quantity': quantity,
  51.                 'total': product.price * quantity
  52.             })
  53.    
  54.     return items
  56. def get_cart_total():
  57.     items = get_cart_items()
  58.     return sum(item['total'] for item in items)
  60. def clear_cart():
  61.     session['cart'] = {}
复制代码
  2. # forms.py
  3. from flask_wtf import FlaskForm
  4. from wtforms import StringField, PasswordField, BooleanField, SubmitField, TextAreaField, IntegerField, SelectField
  5. from wtforms.validators import DataRequired, Email, EqualTo, ValidationError, NumberRange
  6. from models import User
  8. class LoginForm(FlaskForm):
  9.     username = StringField('Username', validators=[DataRequired()])
  10.     password = PasswordField('Password', validators=[DataRequired()])
  11.     remember_me = BooleanField('Remember Me')
  12.     submit = SubmitField('Sign In')
  14. class RegistrationForm(FlaskForm):
  15.     username = StringField('Username', validators=[DataRequired()])
  16.     email = StringField('Email', validators=[DataRequired(), Email()])
  17.     password = PasswordField('Password', validators=[DataRequired()])
  18.     password2 = PasswordField('Repeat Password', validators=[DataRequired(), EqualTo('password')])
  19.     submit = SubmitField('Register')
  21.     def validate_username(self, username):
  22.         user = User.query.filter_by(username=username.data).first()
  23.         if user is not None:
  24.             raise ValidationError('Please use a different username.')
  26.     def validate_email(self, email):
  27.         user = User.query.filter_by(email=email.data).first()
  28.         if user is not None:
  29.             raise ValidationError('Please use a different email address.')
  31. class CheckoutForm(FlaskForm):
  32.     full_name = StringField('Full Name', validators=[DataRequired()])
  33.     address = TextAreaField('Address', validators=[DataRequired()])
  34.     city = StringField('City', validators=[DataRequired()])
  35.     zip_code = StringField('ZIP Code', validators=[DataRequired()])
  36.     country = StringField('Country', validators=[DataRequired()])
  37.     payment_method = SelectField('Payment Method', choices=[
  38.         ('credit_card', 'Credit Card'),
  39.         ('paypal', 'PayPal'),
  40.         ('bank_transfer', 'Bank Transfer')
  41.     ], validators=[DataRequired()])
  42.     submit = SubmitField('Place Order')
复制代码
  2. # app.py
  3. from flask import Flask, render_template, flash, redirect, url_for, request, session
  4. from flask_login import LoginManager, current_user, login_user, logout_user, login_required
  5. from werkzeug.urls import url_parse
  6. from config import Config
  7. from models import db, User, Product, Order, OrderItem
  8. from forms import LoginForm, RegistrationForm, CheckoutForm
  9. from cart import get_cart, get_cart_items, get_cart_total, clear_cart
  11. app = Flask(__name__)
  12. app.config.from_object(Config)
  13. db.init_app(app)
  15. login_manager = LoginManager()
  16. login_manager.init_app(app)
  17. login_manager.login_view = 'login'
  19. @login_manager.user_loader
  20. def load_user(user_id):
  21.     return User.query.get(int(user_id))
  23. @app.route('/')
  24. def index():
  25.     products = Product.query.all()
  26.     return render_template('index.html', products=products)
  28. @app.route('/product/<int:id>')
  29. def product(id):
  30.     product = Product.query.get_or_404(id)
  31.     return render_template('product.html', product=product)
  33. @app.route('/add_to_cart/<int:product_id>')
  34. def add_to_cart(product_id):
  35.     product = Product.query.get_or_404(product_id)
  36.     quantity = int(request.args.get('quantity', 1))
  37.    
  38.     if product.stock < quantity:
  39.         flash('Not enough stock available!')
  40.         return redirect(url_for('product', id=product_id))
  41.    
  42.     from cart import add_to_cart as cart_add
  43.     cart_add(product_id, quantity)
  44.     flash(f'{product.name} added to cart!')
  45.     return redirect(url_for('cart'))
  47. @app.route('/cart')
  48. def cart():
  49.     items = get_cart_items()
  50.     total = get_cart_total()
  51.     return render_template('cart.html', items=items, total=total)
  53. @app.route('/update_cart/<int:product_id>')
  54. def update_cart(product_id):
  55.     quantity = int(request.args.get('quantity', 1))
  56.     from cart import update_cart as cart_update
  57.     cart_update(product_id, quantity)
  58.     return redirect(url_for('cart'))
  60. @app.route('/remove_from_cart/<int:product_id>')
  61. def remove_from_cart(product_id):
  62.     from cart import remove_from_cart as cart_remove
  63.     cart_remove(product_id)
  64.     return redirect(url_for('cart'))
  66. @app.route('/checkout', methods=['GET', 'POST'])
  67. @login_required
  68. def checkout():
  69.     form = CheckoutForm()
  70.     items = get_cart_items()
  71.     total = get_cart_total()
  72.    
  73.     if not items:
  74.         flash('Your cart is empty!')
  75.         return redirect(url_for('index'))
  76.    
  77.     if form.validate_on_submit():
  78.         # Create order
  79.         order = Order(
  80.             user_id=current_user.id,
  81.             total_amount=total,
  82.             shipping_address=f"{form.full_name.data}\n{form.address.data}\n{form.city.data}, {form.zip_code.data}\n{form.country.data}",
  83.             payment_method=form.payment_method.data
  84.         )
  85.         db.session.add(order)
  86.         
  87.         # Add order items
  88.         for item in items:
  89.             order_item = OrderItem(
  90.                 order_id=order.id,
  91.                 product_id=item['product'].id,
  92.                 quantity=item['quantity'],
  93.                 price=item['product'].price
  94.             )
  95.             db.session.add(order_item)
  96.             
  97.             # Update product stock
  98.             product = item['product']
  99.             product.stock -= item['quantity']
  100.         
  101.         db.session.commit()
  102.         
  103.         # Clear cart
  104.         clear_cart()
  105.         
  106.         flash('Order placed successfully!')
  107.         return redirect(url_for('order_confirmation', order_id=order.id))
  108.    
  109.     return render_template('checkout.html', form=form, items=items, total=total)
  111. @app.route('/order_confirmation/<int:order_id>')
  112. @login_required
  113. def order_confirmation(order_id):
  114.     order = Order.query.get_or_404(order_id)
  115.    
  116.     # Check if the order belongs to the current user
  117.     if order.user_id != current_user.id:
  118.         flash('You do not have permission to view this order.')
  119.         return redirect(url_for('index'))
  120.    
  121.     return render_template('order_confirmation.html', order=order)
  123. @app.route('/login', methods=['GET', 'POST'])
  124. def login():
  125.     if current_user.is_authenticated:
  126.         return redirect(url_for('index'))
  127.     form = LoginForm()
  128.     if form.validate_on_submit():
  129.         user = User.query.filter_by(username=form.username.data).first()
  130.         if user is None or not user.check_password(form.password.data):
  131.             flash('Invalid username or password')
  132.             return redirect(url_for('login'))
  133.         login_user(user, remember=form.remember_me.data)
  134.         next_page = request.args.get('next')
  135.         if not next_page or url_parse(next_page).netloc != '':
  136.             next_page = url_for('index')
  137.         return redirect(next_page)
  138.     return render_template('login.html', title='Sign In', form=form)
  140. @app.route('/logout')
  141. def logout():
  142.     logout_user()
  143.     return redirect(url_for('index'))
  145. @app.route('/register', methods=['GET', 'POST'])
  146. def register():
  147.     if current_user.is_authenticated:
  148.         return redirect(url_for('index'))
  149.     form = RegistrationForm()
  150.     if form.validate_on_submit():
  151.         user = User(username=form.username.data, email=form.email.data)
  152.         user.set_password(form.password.data)
  153.         db.session.add(user)
  154.         db.session.commit()
  155.         flash('Congratulations, you are now a registered user!')
  156.         return redirect(url_for('login'))
  157.     return render_template('register.html', title='Register', form=form)
  159. if __name__ == '__main__':
  160.     app.run(debug=True)
复制代码

base.html:
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>{{ title }} - E-commerce Store</title>
  7.     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  8. </head>
  9. <body>
  10.     <header>
  11.         <div class="container">
  12.             <div class="logo">
  13.                 <a href="{{ url_for('index') }}">E-commerce Store</a>
  14.             </div>
  15.             <nav>
  16.                 <a href="{{ url_for('index') }}">Home</a>
  17.                 {% if current_user.is_anonymous %}
  18.                 <a href="{{ url_for('login') }}">Login</a>
  19.                 <a href="{{ url_for('register') }}">Register</a>
  20.                 {% else %}
  21.                 <a href="{{ url_for('logout') }}">Logout</a>
  22.                 {% endif %}
  23.                 <a href="{{ url_for('cart') }}">Cart ({{ get_cart()|length }})</a>
  24.             </nav>
  25.         </div>
  26.     </header>
  27.     <main class="container">
  28.         {% with messages = get_flashed_messages() %}
  29.         {% if messages %}
  30.         <div class="flash-messages">
  31.             {% for message in messages %}
  32.             <div class="flash">{{ message }}</div>
  33.             {% endfor %}
  34.         </div>
  35.         {% endif %}
  36.         {% endwith %}
  37.         
  38.         {% block content %}{% endblock %}
  39.     </main>
  40.     <footer>
  41.         <div class="container">
  42.             <p>&copy; 2023 E-commerce Store. All rights reserved.</p>
  43.         </div>
  44.     </footer>
  45. </body>
  46. </html>
复制代码

index.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>Our Products</h1>
  6.    
  7.     <div class="products-grid">
  8.         {% for product in products %}
  9.         <div class="product-card">
  10.             {% if product.image_url %}
  11.             <img src="{{ product.image_url }}" alt="{{ product.name }}">
  12.             {% else %}
  13.             <div class="product-image-placeholder">No Image</div>
  14.             {% endif %}
  15.             <h2>{{ product.name }}</h2>
  16.             <p class="price">${{ "%.2f"|format(product.price) }}</p>
  17.             <p class="stock">In stock: {{ product.stock }}</p>
  18.             <a href="{{ url_for('product', id=product.id) }}" class="btn">View Details</a>
  19.         </div>
  20.         {% endfor %}
  21.     </div>
  22. {% endblock %}
复制代码

product.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <div class="product-detail">
  6.         <div class="product-image">
  7.             {% if product.image_url %}
  8.             <img src="{{ product.image_url }}" alt="{{ product.name }}">
  9.             {% else %}
  10.             <div class="product-image-placeholder">No Image</div>
  11.             {% endif %}
  12.         </div>
  13.         <div class="product-info">
  14.             <h1>{{ product.name }}</h1>
  15.             <p class="price">${{ "%.2f"|format(product.price) }}</p>
  16.             <p class="stock">In stock: {{ product.stock }}</p>
  17.             <div class="description">
  18.                 <h3>Description</h3>
  19.                 <p>{{ product.description }}</p>
  20.             </div>
  21.             
  22.             <form action="{{ url_for('add_to_cart', product_id=product.id) }}" method="get">
  23.                 <div class="quantity-selector">
  24.                     <label for="quantity">Quantity:</label>
  25.                     <input type="number" id="quantity" name="quantity" min="1" max="{{ product.stock }}" value="1">
  26.                 </div>
  27.                 <button type="submit" class="btn btn-primary">Add to Cart</button>
  28.             </form>
  29.         </div>
  30.     </div>
  31. {% endblock %}
复制代码

cart.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>Shopping Cart</h1>
  6.    
  7.     {% if items %}
  8.     <table class="cart-table">
  9.         <thead>
  10.             <tr>
  11.                 <th>Product</th>
  12.                 <th>Price</th>
  13.                 <th>Quantity</th>
  14.                 <th>Total</th>
  15.                 <th>Actions</th>
  16.             </tr>
  17.         </thead>
  18.         <tbody>
  19.             {% for item in items %}
  20.             <tr>
  21.                 <td>
  22.                     <div class="cart-item-info">
  23.                         {% if item.product.image_url %}
  24.                         <img src="{{ item.product.image_url }}" alt="{{ item.product.name }}" class="cart-item-image">
  25.                         {% endif %}
  26.                         <a href="{{ url_for('product', id=item.product.id) }}">{{ item.product.name }}</a>
  27.                     </div>
  28.                 </td>
  29.                 <td>${{ "%.2f"|format(item.product.price) }}</td>
  30.                 <td>
  31.                     <form action="{{ url_for('update_cart', product_id=item.product.id) }}" method="get" class="quantity-form">
  32.                         <input type="number" name="quantity" min="1" max="{{ item.product.stock }}" value="{{ item.quantity }}">
  33.                         <button type="submit">Update</button>
  34.                     </form>
  35.                 </td>
  36.                 <td>${{ "%.2f"|format(item.total) }}</td>
  37.                 <td>
  38.                     <a href="{{ url_for('remove_from_cart', product_id=item.product.id) }}" class="btn btn-danger">Remove</a>
  39.                 </td>
  40.             </tr>
  41.             {% endfor %}
  42.         </tbody>
  43.         <tfoot>
  44.             <tr>
  45.                 <td colspan="3" class="cart-total-label">Total:</td>
  46.                 <td colspan="2" class="cart-total-amount">${{ "%.2f"|format(total) }}</td>
  47.             </tr>
  48.         </tfoot>
  49.     </table>
  50.    
  51.     <div class="cart-actions">
  52.         <a href="{{ url_for('index') }}" class="btn">Continue Shopping</a>
  53.         {% if current_user.is_authenticated %}
  54.         <a href="{{ url_for('checkout') }}" class="btn btn-primary">Proceed to Checkout</a>
  55.         {% else %}
  56.         <a href="{{ url_for('login') }}" class="btn btn-primary">Login to Checkout</a>
  57.         {% endif %}
  58.     </div>
  59.     {% else %}
  60.     <div class="empty-cart">
  61.         <p>Your cart is empty.</p>
  62.         <a href="{{ url_for('index') }}" class="btn">Continue Shopping</a>
  63.     </div>
  64.     {% endif %}
  65. {% endblock %}
复制代码

checkout.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <h1>Checkout</h1>
  6.    
  7.     <div class="checkout-container">
  8.         <div class="checkout-form">
  9.             <h2>Shipping Information</h2>
  10.             <form action="" method="post">
  11.                 {{ form.hidden_tag() }}
  12.                 <div class="form-group">
  13.                     {{ form.full_name.label }}
  14.                     {{ form.full_name(class="form-control") }}
  15.                 </div>
  16.                 <div class="form-group">
  17.                     {{ form.address.label }}
  18.                     {{ form.address(class="form-control") }}
  19.                 </div>
  20.                 <div class="form-row">
  21.                     <div class="form-group">
  22.                         {{ form.city.label }}
  23.                         {{ form.city(class="form-control") }}
  24.                     </div>
  25.                     <div class="form-group">
  26.                         {{ form.zip_code.label }}
  27.                         {{ form.zip_code(class="form-control") }}
  28.                     </div>
  29.                 </div>
  30.                 <div class="form-group">
  31.                     {{ form.country.label }}
  32.                     {{ form.country(class="form-control") }}
  33.                 </div>
  34.                 <div class="form-group">
  35.                     {{ form.payment_method.label }}
  36.                     {{ form.payment_method(class="form-control") }}
  37.                 </div>
  38.                 <div class="form-group">
  39.                     {{ form.submit(class="btn btn-primary") }}
  40.                 </div>
  41.             </form>
  42.         </div>
  43.         
  44.         <div class="order-summary">
  45.             <h2>Order Summary</h2>
  46.             <table class="order-summary-table">
  47.                 <thead>
  48.                     <tr>
  49.                         <th>Product</th>
  50.                         <th>Quantity</th>
  51.                         <th>Price</th>
  52.                     </tr>
  53.                 </thead>
  54.                 <tbody>
  55.                     {% for item in items %}
  56.                     <tr>
  57.                         <td>{{ item.product.name }}</td>
  58.                         <td>{{ item.quantity }}</td>
  59.                         <td>${{ "%.2f"|format(item.total) }}</td>
  60.                     </tr>
  61.                     {% endfor %}
  62.                 </tbody>
  63.                 <tfoot>
  64.                     <tr>
  65.                         <td colspan="2">Total:</td>
  66.                         <td>${{ "%.2f"|format(total) }}</td>
  67.                     </tr>
  68.                 </tfoot>
  69.             </table>
  70.         </div>
  71.     </div>
  72. {% endblock %}
复制代码

order_confirmation.html:
  2. {% extends "base.html" %}
  4. {% block content %}
  5.     <div class="order-confirmation">
  6.         <h1>Order Confirmation</h1>
  7.         <div class="confirmation-message">
  8.             <p>Thank you for your order!</p>
  9.             <p>Your order number is: <strong>#{{ order.id }}</strong></p>
  10.             <p>We've received your order and will begin processing it soon.</p>
  11.         </div>
  12.         
  13.         <div class="order-details">
  14.             <h2>Order Details</h2>
  15.             <div class="order-info">
  16.                 <p><strong>Order Date:</strong> {{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
  17.                 <p><strong>Status:</strong> {{ order.status.title() }}</p>
  18.                 <p><strong>Payment Method:</strong> {{ order.payment_method.replace('_', ' ').title() }}</p>
  19.                 <p><strong>Total Amount:</strong> ${{ "%.2f"|format(order.total_amount) }}</p>
  20.             </div>
  21.             
  22.             <div class="shipping-info">
  23.                 <h3>Shipping Address</h3>
  24.                 <p>{{ order.shipping_address|replace('\n', '<br>')|safe }}</p>
  25.             </div>
  26.             
  27.             <div class="order-items">
  28.                 <h3>Items Ordered</h3>
  29.                 <table class="order-items-table">
  30.                     <thead>
  31.                         <tr>
  32.                             <th>Product</th>
  33.                             <th>Quantity</th>
  34.                             <th>Price</th>
  35.                         </tr>
  36.                     </thead>
  37.                     <tbody>
  38.                         {% for item in order.items %}
  39.                         <tr>
  40.                             <td>{{ item.product.name }}</td>
  41.                             <td>{{ item.quantity }}</td>
  42.                             <td>${{ "%.2f"|format(item.price * item.quantity) }}</td>
  43.                         </tr>
  44.                         {% endfor %}
  45.                     </tbody>
  46.                 </table>
  47.             </div>
  48.         </div>
  49.         
  50.         <div class="confirmation-actions">
  51.             <a href="{{ url_for('index') }}" class="btn">Continue Shopping</a>
  52.         </div>
  53.     </div>
  54. {% endblock %}
复制代码
  2. /* static/css/style.css */
  3. * {
  4.     box-sizing: border-box;
  5.     margin: 0;
  6.     padding: 0;
  7. }
  9. body {
  10.     font-family: Arial, sans-serif;
  11.     line-height: 1.6;
  12.     color: #333;
  13.     background-color: #f8f9fa;
  14. }
  16. .container {
  17.     max-width: 1200px;
  18.     margin: 0 auto;
  19.     padding: 0 15px;
  20. }
  22. /* Header */
  23. header {
  24.     background-color: #fff;
  25.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  26.     position: sticky;
  27.     top: 0;
  28.     z-index: 100;
  29. }
  31. header .container {
  32.     display: flex;
  33.     justify-content: space-between;
  34.     align-items: center;
  35.     padding: 15px;
  36. }
  38. .logo a {
  39.     font-size: 24px;
  40.     font-weight: bold;
  41.     color: #333;
  42.     text-decoration: none;
  43. }
  45. nav a {
  46.     margin-left: 20px;
  47.     color: #333;
  48.     text-decoration: none;
  49.     font-weight: 500;
  50. }
  52. nav a:hover {
  53.     color: #007bff;
  54. }
  56. /* Main Content */
  57. main {
  58.     padding: 30px 0;
  59.     min-height: calc(100vh - 160px);
  60. }
  62. /* Buttons */
  63. .btn {
  64.     display: inline-block;
  65.     background-color: #f8f9fa;
  66.     color: #333;
  67.     border: 1px solid #ddd;
  68.     padding: 8px 16px;
  69.     border-radius: 4px;
  70.     text-decoration: none;
  71.     font-weight: 500;
  72.     cursor: pointer;
  73.     transition: all 0.3s ease;
  74. }
  76. .btn:hover {
  77.     background-color: #e9ecef;
  78.     border-color: #adb5bd;
  79. }
  81. .btn-primary {
  82.     background-color: #007bff;
  83.     color: #fff;
  84.     border-color: #007bff;
  85. }
  87. .btn-primary:hover {
  88.     background-color: #0069d9;
  89.     border-color: #0062cc;
  90. }
  92. .btn-danger {
  93.     background-color: #dc3545;
  94.     color: #fff;
  95.     border-color: #dc3545;
  96. }
  98. .btn-danger:hover {
  99.     background-color: #c82333;
  100.     border-color: #bd2130;
  101. }
  103. /* Forms */
  104. .form-group {
  105.     margin-bottom: 15px;
  106. }
  108. .form-row {
  109.     display: flex;
  110.     gap: 15px;
  111. }
  113. .form-row .form-group {
  114.     flex: 1;
  115. }
  117. .form-control {
  118.     display: block;
  119.     width: 100%;
  120.     padding: 8px 12px;
  121.     font-size: 16px;
  122.     line-height: 1.5;
  123.     color: #495057;
  124.     background-color: #fff;
  125.     background-clip: padding-box;
  126.     border: 1px solid #ced4da;
  127.     border-radius: 4px;
  128.     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  129. }
  131. .form-control:focus {
  132.     color: #495057;
  133.     background-color: #fff;
  134.     border-color: #80bdff;
  135.     outline: 0;
  136.     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  137. }
  139. /* Flash Messages */
  140. .flash-messages {
  141.     margin-bottom: 20px;
  142. }
  144. .flash {
  145.     padding: 15px;
  146.     margin-bottom: 10px;
  147.     border: 1px solid transparent;
  148.     border-radius: 4px;
  149.     background-color: #d4edda;
  150.     border-color: #c3e6cb;
  151.     color: #155724;
  152. }
  154. /* Products Grid */
  155. .products-grid {
  156.     display: grid;
  157.     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  158.     gap: 20px;
  159. }
  161. .product-card {
  162.     background-color: #fff;
  163.     border-radius: 8px;
  164.     overflow: hidden;
  165.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  166.     transition: transform 0.3s ease, box-shadow 0.3s ease;
  167. }
  169. .product-card:hover {
  170.     transform: translateY(-5px);
  171.     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  172. }
  174. .product-card img {
  175.     width: 100%;
  176.     height: 200px;
  177.     object-fit: cover;
  178. }
  180. .product-image-placeholder {
  181.     width: 100%;
  182.     height: 200px;
  183.     background-color: #e9ecef;
  184.     display: flex;
  185.     align-items: center;
  186.     justify-content: center;
  187.     color: #6c757d;
  188. }
  190. .product-card h2 {
  191.     font-size: 18px;
  192.     margin: 10px;
  193. }
  195. .product-card .price {
  196.     font-size: 18px;
  197.     font-weight: bold;
  198.     color: #007bff;
  199.     margin: 0 10px;
  200. }
  202. .product-card .stock {
  203.     font-size: 14px;
  204.     color: #6c757d;
  205.     margin: 0 10px 10px;
  206. }
  208. .product-card .btn {
  209.     margin: 0 10px 15px;
  210. }
  212. /* Product Detail */
  213. .product-detail {
  214.     display: flex;
  215.     gap: 30px;
  216.     background-color: #fff;
  217.     padding: 20px;
  218.     border-radius: 8px;
  219.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  220. }
  222. .product-image {
  223.     flex: 1;
  224. }
  226. .product-image img {
  227.     width: 100%;
  228.     border-radius: 8px;
  229. }
  231. .product-info {
  232.     flex: 1;
  233. }
  235. .product-info h1 {
  236.     margin-bottom: 10px;
  237. }
  239. .product-info .price {
  240.     font-size: 24px;
  241.     font-weight: bold;
  242.     color: #007bff;
  243.     margin-bottom: 10px;
  244. }
  246. .product-info .stock {
  247.     font-size: 16px;
  248.     color: #6c757d;
  249.     margin-bottom: 20px;
  250. }
  252. .description {
  253.     margin-bottom: 20px;
  254. }
  256. .description h3 {
  257.     margin-bottom: 10px;
  258. }
  260. .quantity-selector {
  261.     display: flex;
  262.     align-items: center;
  263.     margin-bottom: 15px;
  264. }
  266. .quantity-selector label {
  267.     margin-right: 10px;
  268. }
  270. .quantity-selector input {
  271.     width: 60px;
  272.     padding: 5px;
  273.     border: 1px solid #ced4da;
  274.     border-radius: 4px;
  275. }
  277. /* Cart */
  278. .cart-table {
  279.     width: 100%;
  280.     border-collapse: collapse;
  281.     margin-bottom: 20px;
  282.     background-color: #fff;
  283.     border-radius: 8px;
  284.     overflow: hidden;
  285.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  286. }
  288. .cart-table th, .cart-table td {
  289.     padding: 12px 15px;
  290.     text-align: left;
  291.     border-bottom: 1px solid #dee2e6;
  292. }
  294. .cart-table th {
  295.     background-color: #f8f9fa;
  296.     font-weight: 600;
  297. }
  299. .cart-item-info {
  300.     display: flex;
  301.     align-items: center;
  302. }
  304. .cart-item-image {
  305.     width: 50px;
  306.     height: 50px;
  307.     object-fit: cover;
  308.     margin-right: 10px;
  309.     border-radius: 4px;
  310. }
  312. .quantity-form {
  313.     display: flex;
  314.     align-items: center;
  315. }
  317. .quantity-form input {
  318.     width: 50px;
  319.     padding: 5px;
  320.     border: 1px solid #ced4da;
  321.     border-radius: 4px;
  322.     margin-right: 5px;
  323. }
  325. .cart-total-label {
  326.     text-align: right;
  327.     font-weight: 600;
  328. }
  330. .cart-total-amount {
  331.     font-weight: bold;
  332.     font-size: 18px;
  333.     color: #007bff;
  334. }
  336. .cart-actions {
  337.     display: flex;
  338.     justify-content: space-between;
  339.     margin-top: 20px;
  340. }
  342. .empty-cart {
  343.     text-align: center;
  344.     padding: 40px;
  345.     background-color: #fff;
  346.     border-radius: 8px;
  347.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  348. }
  350. .empty-cart p {
  351.     margin-bottom: 20px;
  352.     font-size: 18px;
  353. }
  355. /* Checkout */
  356. .checkout-container {
  357.     display: flex;
  358.     gap: 30px;
  359. }
  361. .checkout-form {
  362.     flex: 3;
  363.     background-color: #fff;
  364.     padding: 20px;
  365.     border-radius: 8px;
  366.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  367. }
  369. .order-summary {
  370.     flex: 2;
  371.     background-color: #fff;
  372.     padding: 20px;
  373.     border-radius: 8px;
  374.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  375.     height: fit-content;
  376. }
  378. .order-summary-table {
  379.     width: 100%;
  380.     border-collapse: collapse;
  381. }
  383. .order-summary-table th, .order-summary-table td {
  384.     padding: 10px;
  385.     text-align: left;
  386.     border-bottom: 1px solid #dee2e6;
  387. }
  389. .order-summary-table th {
  390.     background-color: #f8f9fa;
  391.     font-weight: 600;
  392. }
  394. /* Order Confirmation */
  395. .order-confirmation {
  396.     background-color: #fff;
  397.     padding: 30px;
  398.     border-radius: 8px;
  399.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  400. }
  402. .confirmation-message {
  403.     text-align: center;
  404.     margin-bottom: 30px;
  405.     padding: 20px;
  406.     background-color: #d4edda;
  407.     border-radius: 8px;
  408.     color: #155724;
  409. }
  411. .confirmation-message p {
  412.     margin-bottom: 10px;
  413.     font-size: 18px;
  414. }
  416. .order-details {
  417.     margin-bottom: 30px;
  418. }
  420. .order-details h2 {
  421.     margin-bottom: 20px;
  422.     padding-bottom: 10px;
  423.     border-bottom: 1px solid #dee2e6;
  424. }
  426. .order-info {
  427.     margin-bottom: 20px;
  428. }
  430. .order-info p {
  431.     margin-bottom: 8px;
  432. }
  434. .shipping-info {
  435.     margin-bottom: 20px;
  436. }
  438. .shipping-info h3 {
  439.     margin-bottom: 10px;
  440. }
  442. .order-items-table {
  443.     width: 100%;
  444.     border-collapse: collapse;
  445. }
  447. .order-items-table th, .order-items-table td {
  448.     padding: 10px;
  449.     text-align: left;
  450.     border-bottom: 1px solid #dee2e6;
  451. }
  453. .order-items-table th {
  454.     background-color: #f8f9fa;
  455.     font-weight: 600;
  456. }
  458. .confirmation-actions {
  459.     text-align: center;
  460. }
  462. /* Footer */
  463. footer {
  464.     background-color: #333;
  465.     color: #fff;
  466.     padding: 20px 0;
  467.     text-align: center;
  468. }
复制代码

5. Flask高级主题

5.1 蓝图（Blueprints）

蓝图是Flask中组织应用程序的一种方式，允许你将应用程序分割成更小、更可管理的组件。这对于大型应用程序特别有用。

让我们创建一个简单的示例，展示如何使用蓝图：
  2. # app.py
  3. from flask import Flask, render_template
  4. from admin import admin_bp
  5. from blog import blog_bp
  7. app = Flask(__name__)
  9. # 注册蓝图
  10. app.register_blueprint(admin_bp, url_prefix='/admin')
  11. app.register_blueprint(blog_bp)
  13. @app.route('/')
  14. def index():
  15.     return render_template('index.html')
  17. if __name__ == '__main__':
  18.     app.run(debug=True)
复制代码
  2. # admin.py
  3. from flask import Blueprint, render_template
  5. admin_bp = Blueprint('admin', __name__,
  6.                     template_folder='templates',
  7.                     static_folder='static')
  9. @admin_bp.route('/')
  10. def admin_home():
  11.     return render_template('admin/index.html')
  13. @admin_bp.route('/users')
  14. def admin_users():
  15.     return render_template('admin/users.html')
复制代码
  2. # blog.py
  3. from flask import Blueprint, render_template
  5. blog_bp = Blueprint('blog', __name__,
  6.                    template_folder='templates',
  7.                    static_folder='static')
  9. @blog_bp.route('/')
  10. def blog_home():
  11.     return render_template('blog/index.html')
  13. @blog_bp.route('/post/<int:post_id>')
  14. def blog_post(post_id):
  15.     return render_template('blog/post.html', post_id=post_id)
复制代码

5.2 应用工厂模式

应用工厂模式是一种创建Flask应用实例的方法，它允许你在不同的环境中配置应用，并且使测试更容易。
  2. # app/__init__.py
  3. from flask import Flask
  4. from flask_sqlalchemy import SQLAlchemy
  5. from flask_login import LoginManager
  6. from config import Config
  8. db = SQLAlchemy()
  9. login_manager = LoginManager()
  11. def create_app(config_class=Config):
  12.     app = Flask(__name__)
  13.     app.config.from_object(config_class)
  14.    
  15.     # 初始化扩展
  16.     db.init_app(app)
  17.     login_manager.init_app(app)
  18.    
  19.     # 注册蓝图
  20.     from app.main import bp as main_bp
  21.     app.register_blueprint(main_bp)
  22.    
  23.     from app.admin import bp as admin_bp
  24.     app.register_blueprint(admin_bp, url_prefix='/admin')
  25.    
  26.     from app.auth import bp as auth_bp
  27.     app.register_blueprint(auth_bp, url_prefix='/auth')
  28.    
  29.     return app
复制代码
  2. # config.py
  3. import os
  4. basedir = os.path.abspath(os.path.dirname(__file__))
  6. class Config:
  7.     SECRET_KEY = os.environ.get('SECRET_KEY') or 'you-will-never-guess'
  8.     SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or \
  9.         'sqlite:///' + os.path.join(basedir, 'app.db')
  10.     SQLALCHEMY_TRACK_MODIFICATIONS = False
复制代码
  2. # run.py
  3. from app import create_app
  5. app = create_app()
  7. if __name__ == '__main__':
  8.     app.run(debug=True)
复制代码

5.3 RESTful API与Flask-RESTful

Flask-RESTful是一个Flask扩展，用于快速构建REST API。首先安装：
  2. pip install flask-restful
复制代码

然后创建一个简单的API：
  2. from flask import Flask
  3. from flask_restful import reqparse, Api, Resource
  5. app = Flask(__name__)
  6. api = Api(app)
  8. TODOS = {
  9.     'todo1': {'task': 'build an API'},
  10.     'todo2': {'task': '?????'},
  11.     'todo3': {'task': 'profit!'},
  12. }
  14. def abort_if_todo_doesnt_exist(todo_id):
  15.     if todo_id not in TODOS:
  16.         api.abort(404, message="Todo {} doesn't exist".format(todo_id))
  18. parser = reqparse.RequestParser()
  19. parser.add_argument('task', type=str)
  21. # Todo
  22. # shows a single todo item and lets you delete a todo item
  23. class Todo(Resource):
  24.     def get(self, todo_id):
  25.         abort_if_todo_doesnt_exist(todo_id)
  26.         return TODOS[todo_id]
  28.     def delete(self, todo_id):
  29.         abort_if_todo_doesnt_exist(todo_id)
  30.         del TODOS[todo_id]
  31.         return '', 204
  33.     def put(self, todo_id):
  34.         abort_if_todo_doesnt_exist(todo_id)
  35.         args = parser.parse_args()
  36.         task = {'task': args['task']}
  37.         TODOS[todo_id] = task
  38.         return task, 201
  40. # TodoList
  41. # shows a list of all todos, and lets you POST to add new tasks
  42. class TodoList(Resource):
  43.     def get(self):
  44.         return TODOS
  46.     def post(self):
  47.         args = parser.parse_args()
  48.         todo_id = int(max(TODOS.keys()).lstrip('todo')) + 1
  49.         todo_id = 'todo%i' % todo_id
  50.         TODOS[todo_id] = {'task': args['task']}
  51.         return TODOS[todo_id], 201
  53. ##
  54. ## Actually setup the Api resource routing here
  55. ##
  56. api.add_resource(TodoList, '/todos')
  57. api.add_resource(Todo, '/todos/<todo_id>')
  59. if __name__ == '__main__':
  60.     app.run(debug=True)
复制代码

5.4 WebSocket与Flask-SocketIO

Flask-SocketIO为Flask应用程序添加了对WebSocket的支持。首先安装：
  2. pip install flask-socketio
复制代码

然后创建一个简单的聊天应用：
  2. from flask import Flask, render_template
  3. from flask_socketio import SocketIO, emit
  5. app = Flask(__name__)
  6. app.config['SECRET_KEY'] = 'your-secret-key'
  7. socketio = SocketIO(app)
  9. @app.route('/')
  10. def index():
  11.     return render_template('chat.html')
  13. @socketio.on('connect')
  14. def test_connect():
  15.     emit('my response', {'data': 'Connected'})
  17. @socketio.on('disconnect')
  18. def test_disconnect():
  19.     print('Client disconnected')
  21. @socketio.on('message')
  22. def handle_message(message):
  23.     print('received message: ' + message)
  24.     emit('message', message, broadcast=True)
  26. if __name__ == '__main__':
  27.     socketio.run(app, debug=True)
复制代码

对应的模板templates/chat.html：
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>Flask-SocketIO Chat</title>
  6.     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         #messages {
  14.             list-style-type: none;
  15.             margin: 0;
  16.             padding: 0;
  17.             height: 300px;
  18.             overflow-y: auto;
  19.             border: 1px solid #ddd;
  20.             padding: 10px;
  21.         }
  22.         #messages li {
  23.             padding: 5px 10px;
  24.             margin-bottom: 5px;
  25.             border-radius: 5px;
  26.         }
  27.         #messages li:nth-child(odd) {
  28.             background-color: #f9f9f9;
  29.         }
  30.         #message-form {
  31.             display: flex;
  32.             margin-top: 10px;
  33.         }
  34.         #message-input {
  35.             flex: 1;
  36.             padding: 10px;
  37.             border: 1px solid #ddd;
  38.             border-radius: 5px 0 0 5px;
  39.         }
  40.         #send-button {
  41.             padding: 10px 20px;
  42.             background-color: #007bff;
  43.             color: white;
  44.             border: none;
  45.             border-radius: 0 5px 5px 0;
  46.             cursor: pointer;
  47.         }
  48.         #send-button:hover {
  49.             background-color: #0069d9;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <h1>Flask-SocketIO Chat</h1>
  55.     <ul id="messages"></ul>
  56.     <form id="message-form">
  57.         <input id="message-input" autocomplete="off" />
  58.         <button id="send-button">Send</button>
  59.     </form>
  61.     <script>
  62.         document.addEventListener('DOMContentLoaded', () => {
  63.             const socket = io();
  64.             const messages = document.getElementById('messages');
  65.             const messageForm = document.getElementById('message-form');
  66.             const messageInput = document.getElementById('message-input');
  68.             socket.on('connect', () => {
  69.                 console.log('Connected to server');
  70.             });
  72.             socket.on('message', (msg) => {
  73.                 const item = document.createElement('li');
  74.                 item.textContent = msg;
  75.                 messages.appendChild(item);
  76.                 messages.scrollTop = messages.scrollHeight;
  77.             });
  79.             messageForm.addEventListener('submit', (e) => {
  80.                 e.preventDefault();
  81.                 if (messageInput.value) {
  82.                     socket.emit('message', messageInput.value);
  83.                     messageInput.value = '';
  84.                 }
  85.             });
  86.         });
  87.     </script>
  88. </body>
  89. </html>
复制代码

6. Flask应用部署

6.1 使用Gunicorn部署

Gunicorn是一个WSGI HTTP服务器，用于UNIX系统上的Python应用。首先安装：
  2. pip install gunicorn
复制代码

然后运行你的Flask应用：
  2. gunicorn -w 4 -b 127.0.0.1:8000 app:app
复制代码

这会启动4个工作进程，监听在8000端口。

6.2 使用uWSGI部署

uWSGI是另一个流行的WSGI服务器。首先安装：
  2. pip install uwsgi
复制代码

然后创建一个uWSGI配置文件uwsgi.ini：
  2. [uwsgi]
  3. module = app:app
  4. master = true
  5. processes = 4
  6. socket = myapp.sock
  7. chmod-socket = 666
  8. vacuum = true
  9. die-on-term = true
复制代码

然后运行：
  2. uwsgi --ini uwsgi.ini
复制代码

6.3 使用Docker部署

Docker可以创建一个包含你的应用及其所有依赖的容器。首先创建一个Dockerfile：
  2. FROM python:3.9-slim
  4. WORKDIR /app
  6. COPY requirements.txt .
  7. RUN pip install --no-cache-dir -r requirements.txt
  9. COPY . .
  11. EXPOSE 5000
  13. CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:5000", "app:app"]
复制代码

然后构建并运行Docker容器：
  2. docker build -t my-flask-app .
  3. docker run -p 5000:5000 my-flask-app
复制代码

6.4 使用Nginx作为反向代理

Nginx可以作为反向代理，将请求转发到你的Flask应用。以下是一个基本的Nginx配置：
  2. server {
  3.     listen 80;
  4.     server_name example.com;
  6.     location / {
  7.         proxy_pass http://127.0.0.1:8000;
  8.         proxy_set_header Host $host;
  9.         proxy_set_header X-Real-IP $remote_addr;
  10.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  11.     }
  13.     location /static {
  14.         alias /path/to/your/static/files;
  15.         expires 30d;
  16.     }
  17. }
复制代码

7. Flask最佳实践

7.1 项目结构

一个好的项目结构可以使你的应用更易于维护和扩展。以下是一个推荐的项目结构：
  2. myproject/
  3.     app/
  4.         __init__.py
  5.         config.py
  6.         extensions.py
  7.         models/
  8.             __init__.py
  9.             user.py
  10.             post.py
  11.         routes/
  12.             __init__.py
  13.             main.py
  14.             auth.py
  15.             api.py
  16.         templates/
  17.             base.html
  18.             index.html
  19.             auth/
  20.                 login.html
  21.                 register.html
  22.         static/
  23.             css/
  24.                 style.css
  25.             js/
  26.                 main.js
  27.         utils/
  28.             __init__.py
  29.             decorators.py
  30.             forms.py
  31.     migrations/
  32.     tests/
  33.         __init__.py
  34.         test_models.py
  35.         test_routes.py
  36.     requirements.txt
  37.     config.py
  38.     run.py
  39.     .env
  40.     .gitignore
复制代码

7.2 配置管理

使用环境变量和配置类来管理不同环境的配置：
  2. # config.py
  3. import os
  4. from dotenv import load_dotenv
  6. basedir = os.path.abspath(os.path.dirname(__file__))
  7. load_dotenv(os.path.join(basedir, '.env'))
  9. class Config:
  10.     SECRET_KEY = os.environ.get('SECRET_KEY') or 'you-will-never-guess'
  11.     SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or \
  12.         'sqlite:///' + os.path.join(basedir, 'app.db')
  13.     SQLALCHEMY_TRACK_MODIFICATIONS = False
  15. class DevelopmentConfig(Config):
  16.     DEBUG = True
  18. class ProductionConfig(Config):
  19.     DEBUG = False
  21. class TestingConfig(Config):
  22.     TESTING = True
  23.     SQLALCHEMY_DATABASE_URI = 'sqlite:///:memory:'
  25. config = {
  26.     'development': DevelopmentConfig,
  27.     'production': ProductionConfig,
  28.     'testing': TestingConfig,
  29.     'default': DevelopmentConfig
  30. }
复制代码

7.3 错误处理

使用Flask的错误处理功能来提供友好的错误页面：
  2. @app.errorhandler(404)
  3. def not_found_error(error):
  4.     return render_template('errors/404.html'), 404
  6. @app.errorhandler(500)
  7. def internal_error(error):
  8.     db.session.rollback()
  9.     return render_template('errors/500.html'), 500
复制代码

7.4 日志记录

配置日志记录以便于调试和监控：
  2. import logging
  3. from logging.handlers import RotatingFileHandler
  4. import os
  6. if not app.debug:
  7.     if not os.path.exists('logs'):
  8.         os.mkdir('logs')
  9.     file_handler = RotatingFileHandler('logs/myapp.log', maxBytes=10240, backupCount=10)
  10.     file_handler.setFormatter(logging.Formatter(
  11.         '%(asctime)s %(levelname)s: %(message)s [in %(pathname)s:%(lineno)d]'))
  12.     file_handler.setLevel(logging.INFO)
  13.     app.logger.addHandler(file_handler)
  14.     app.logger.setLevel(logging.INFO)
  15.     app.logger.info('MyApp startup')
复制代码

7.5 安全最佳实践

• 使用HTTPS保护你的应用
• 使用CSRF保护表单
• 验证和净化用户输入
• 使用安全的密码哈希
• 设置适当的CORS策略
• 定期更新依赖项
  2. from flask_wtf.csrf import CSRFProtect
  3. from flask_talisman import Talisman
  5. csrf = CSRFProtect(app)
  6. Talisman(app, force_https=True)
复制代码

8. 总结

Flask是一个强大而灵活的Python Web框架，它提供了构建Web应用所需的基本工具，同时允许你根据需要添加扩展。通过本教程，你已经学习了从基础到高级的Flask开发技能，包括：

• Flask基础概念和路由
• 模板渲染和静态文件处理
• 数据库集成和表单处理
• 用户认证和授权
• RESTful API开发
• 实战项目示例（博客系统和电子商务网站）
• 高级主题（蓝图、应用工厂、WebSocket等）
• 应用部署和最佳实践

现在你已经具备了使用Flask开发各种Web应用的能力。继续探索Flask的丰富生态系统，不断实践和学习，你将成为一名优秀的Flask开发者。
浏览器, 命令行
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

关闭

站长推荐上一条 /1 下一条

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
友链交换
友链交换
友链为随机排序，不代表本论坛观点
Telegram

Telegram

Discord

Discord

Tencent QQ

Tencent QQ

手机版|联系我们|小黑屋|TG频道|RSS |网站地图

Powered by Pixtech

© 2025-2026 Pixtech Team.

>