"夏哉ke"：quangneng.com/4968/

Python Flask 全栈项目实战：构建在线待办事项应用

在这个快速教程中，我们将使用 Python Flask 框架来构建一个简单的在线待办事项应用。这个项目将涵盖从前端到后端的整个开发流程，包括用户界面设计、数据库模型设计、路由处理以及用户身份验证。通过这个项目，你将学习如何使用 Flask 搭建一个基本的 Web 应用，并且了解整个 Web 开发的全栈流程。

项目概述

我们将要构建的待办事项应用将包含以下功能：

用户注册和登录
创建、读取、更新和删除（CRUD）待办事项
待办事项的标记完成与未完成

项目技术栈：

前端：HTML, CSS, JavaScript, Bootstrap（可选）
后端：Python Flask
数据库：SQLite
用户认证：Flask-Login

环境准备

在开始之前，请确保你的系统中已经安装了 Python 和 pip。然后安装 Flask 及其依赖库：

pip install flask flask-login flask-sqlalchemy

1. 创建 Flask 应用

首先，创建一个名为 todo_app 的文件夹，并在其中创建一个名为 app.py 的文件。这是我们的 Flask 应用入口。

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
app.config['SECRET_KEY'] = 'your_secret_key'
db = SQLAlchemy(app)
login_manager = LoginManager(app)

# 用户模型
class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password = db.Column(db.String(120), nullable=False)

# 待办事项模型
class Todo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    completed = db.Column(db.Boolean, default=False)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)

# 用户加载函数
@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))

# 主页
@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

在上面的代码中，我们设置了 Flask 应用、数据库配置、用户认证管理以及两个数据库模型：User 和 Todo。

2. 创建数据库模型

在 app.py 中，我们已经定义了 User 和 Todo 两个模型。接下来，我们需要创建这些模型的数据库表。在 app.py 中添加以下代码：

with app.app_context():
    db.create_all()

在运行应用之前，执行上面的代码将创建数据库表。

3. 创建用户界面

在 todo_app 文件夹中创建一个名为 templates 的文件夹，并在其中创建 HTML 文件。例如，创建 index.html：




    
    
    Todo App


    Welcome to Todo App!
    Login or register to manage your todos.

4. 添加用户认证路由

在 app.py 中添加注册和登录的路由：

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        user = User(username=username, password=password)
        db.session.add(user)
        db.session.commit()
        return redirect(url_for('login'))
    return render_template('register.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        user = User.query.filter_by(username=username, password=password).first()
        if user:
            login_user(user)
            return redirect(url_for('todos'))
    return render_template('login.html')

@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('index'))

在 templates 文件夹中创建 register.html 和 login.html 文件，用于注册和登录表单。

5. 添加待办事项功能

@app.route('/todos', methods=['GET', 'POST'])
@login_required
def todos():
    if request.method == 'POST':
        title = request.form['title']
        todo = Todo(title=title, user_id=current_user.id)
        db.session.add(todo)
        db.session.commit()
        return redirect(url_for('todos'))
    todos = Todo.query.filter_by(user_id=current_user.id).all()
    return render_template('todos.html', todos=todos)

@app.route('/todo//complete')
@login_required
def complete_todo(todo_id):
    todo = Todo.query.get(todo_id)
    if todo and todo.user_id == current_user.id:
        todo.completed = not todo.completed
        db.session.commit()
    return redirect(url_for('todos'))

@app.route('/todo//delete')
@login_required
def delete_todo(todo_id):
    todo = Todo.query.get(todo_id)
    if todo and todo.user_id == current_user.id:
        db.session.delete(todo)
        db.session.commit()
    return redirect(url_for('todos'))

在 templates 文件夹中创建 todos.html 文件，用于显示待办事项列表、添加待办事项的表单以及待办事项的操作按钮。

6. 完成用户界面

在 templates 文件夹中创建 register.html、login.html 和 todos.html 文件，用于显示注册、登录和待办事项列表的表单。

7. 运行应用

在完成所有代码编写和文件创建后，运行 app.py 文件：

python app.py

然后打开浏览器，访问 http://127.0.0.1:5000/，你应该可以看到主页。点击注册和登录链接，进行注册和登录操作，然后开始添加和管理待办事项。

结语

通过这个简单的在线待办事项应用，我们学习了如何使用 Flask 搭建一个全栈 Web 应用。这个项目涵盖了从前端到后端的整个开发流程，包括用户界面设计、数据库模型设计、路由处理以及用户身份验证。当然，这个项目还可以继续扩展和优化，例如添加待办事项的详细信息、设置待办事项的截止日期等。希望这个项目能帮助你更好地理解 Flask 的使用和 Web 应用的开发流程。