构建记账小工具的实战教程：Python + Flask + Jinja2

构建一个简单的记账小工具是一个很好的学习项目，特别是如果你想熟悉Python、Flask和Jinja2的基本使用。下面是一个简化的实战教程，帮助你入门。

需求分析

用户界面：允许用户输入和查看记账信息。
功能：
- 添加新账目。
- 查看所有账目。
- 删除账目。
持久化：简单实现可以使用Python的内置数据结构（例如列表）来保存数据；更复杂的实现可以使用数据库。

准备环境

首先，确保你已安装Flask，你可以用以下命令安装它：

pip install Flask

项目结构

expense_tracker/  
│  
├── app.py  
├── templates/  
│   ├── layout.html  
│   ├── index.html  
└── static/  
    └── styles.css

1. 创建Flask应用（app.py）

from flask import Flask, render_template, request, redirect, url_for  
app = Flask(__name__)  
# 内存中保存账目条目  
entries = []  
@app.route('/', methods=['GET', 'POST'])  
def index():  
    if request.method == 'POST':  
        # 获取表单数据  
        description = request.form.get('description')  
        amount = request.form.get('amount')  
        # 添加到账目列表  
        if description and amount:  
            entries.append({'description': description, 'amount': float(amount)})  
        return redirect(url_for('index'))  
    return render_template('index.html', entries=entries)  
if __name__ == '__main__':  
    app.run(debug=True)

2. 创建模板（templates/layout.html）

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">  
    <title>Simple Expense Tracker</title>  
</head>  
<body>  
    <div class="container">  
        <h1>Expense Tracker</h1>  
        {% block content %}{% endblock %}  
    </div>  
</body>  
</html>

3. 创建首页模板（templates/index.html）

{% extends 'layout.html' %}  
{% block content %}  
<form method="POST">  
    <input type="text" name="description" placeholder="Description" required>  
    <input type="number" step="0.01" name="amount" placeholder="Amount" required>  
    <button type="submit">Add</button>  
</form>  
<h2>Entries</h2>  
<ul>  
    {% for entry in entries %}  
        <li>{{ entry.description }} - ${{ entry.amount }}</li>  
    {% endfor %}  
</ul>  
{% endblock %}

4. 创建样式（static/styles.css）

body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 20px;  
    background: #f4f4f9;  
}  
.container {  
    max-width: 800px;  
    margin: auto;  
    background: white;  
    padding: 20px;  
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);  
}  
h1, h2 {  
    color: #333;  
}  
form {  
    margin-bottom: 20px;  
}  
input, button {  
    padding: 10px;  
    margin: 5px 0;  
}

启动应用

使用命令行进入项目所在目录，运行以下命令启动Flask应用：

flask run

应用将默认在http://127.0.0.1:5000/运行。打开浏览器访问该地址，即可看到记账应用。

后续步骤

数据持久化：可以选择将数据存储在SQLite数据库中。
改进UI：使用更高级的前端框架如Bootstrap。
支持删除：添加删除账目的功能。
用户身份验证：为应用增添用户登录功能以支持多用户使用。

通过这个简单的项目，你会更好地理解Flask应用的基本构建流程，以及如何使用Jinja2模板渲染动态网页。

遇到难题？ "AI大模型GPT4.0、GPT" 是你的私人解答专家！点击按钮去提问......