使用 Python 构建一个简单的 Web 应用程序
在当今的软件开发中,Web 应用程序已经成为主流之一。无论是在企业级应用、数据可视化还是个人项目中,Web 技术都扮演着重要角色。Python 作为一种简洁而强大的编程语言,凭借其丰富的库和框架(如 Flask 和 Django),成为了构建 Web 应用的热门选择。
本文将介绍如何使用 Python 的轻量级 Web 框架 Flask 来构建一个简单的 Web 应用程序。我们将实现一个待办事项(To-Do)列表应用,支持添加、删除和标记完成任务的基本功能,并使用 SQLite 数据库存储数据。整个过程将展示从项目结构搭建到数据库交互再到前端渲染的完整流程。
环境准备
在开始之前,请确保你的系统上安装了以下内容:
Python 3.6 或更高版本pip 包管理器安装 Flask:pip install flask
安装 SQLite 浏览器(可选):如 DB Browser for SQLite项目结构
我们的项目将包含以下文件和目录:
todo_app/│├── app.py # 主程序文件├── database.py # 数据库初始化脚本├── templates/ # 存放 HTML 模板│ └── index.html└── instance/ # SQLite 数据库文件存放位置(由 Flask 自动生成)
第一步:创建 Flask 应用
我们先创建 app.py
文件,并编写基本的 Flask 路由。
# app.pyfrom flask import Flask, render_template, request, redirect, url_forimport sqlite3import osapp = Flask(__name__)app.config['DATABASE'] = os.path.join(app.instance_path, 'todo.db')def get_db(): conn = sqlite3.connect(app.config['DATABASE']) conn.row_factory = sqlite3.Row # 返回字典形式的结果 return conn@app.route('/')def index(): db = get_db() tasks = db.execute('SELECT * FROM tasks').fetchall() return render_template('index.html', tasks=tasks)@app.route('/add', methods=['POST'])def add_task(): task_content = request.form.get('content') if task_content: db = get_db() db.execute('INSERT INTO tasks (content, done) VALUES (?, ?)', (task_content, 0)) db.commit() return redirect(url_for('index'))@app.route('/delete/<int:task_id>')def delete_task(task_id): db = get_db() db.execute('DELETE FROM tasks WHERE id = ?', (task_id,)) db.commit() return redirect(url_for('index'))@app.route('/toggle/<int:task_id>')def toggle_task(task_id): db = get_db() task = db.execute('SELECT done FROM tasks WHERE id = ?', (task_id,)).fetchone() new_status = 0 if task['done'] else 1 db.execute('UPDATE tasks SET done = ? WHERE id = ?', (new_status, task_id)) db.commit() return redirect(url_for('index'))if __name__ == '__main__': app.run(debug=True)
第二步:初始化数据库
接下来,我们创建一个数据库并建立任务表。创建 database.py
文件:
# database.pyimport sqlite3from app import appdef init_db(): with app.app_context(): db = sqlite3.connect(app.config['DATABASE']) with app.open_resource('schema.sql', mode='r') as f: db.executescript(f.read()) db.commit()if __name__ == '__main__': init_db()
同时,我们需要创建 schema.sql
文件来定义数据库结构:
-- schema.sqlCREATE TABLE IF NOT EXISTS tasks ( id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL, done INTEGER DEFAULT 0);
运行 database.py
将会创建 instance/todo.db
数据库文件。
第三步:创建前端模板
Flask 使用 Jinja2 模板引擎来渲染 HTML 页面。我们在 templates/index.html
中编写如下代码:
<!-- templates/index.html --><!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>待办事项</title> <style> body { font-family: sans-serif; padding: 2em; } ul { list-style-type: none; padding-left: 0; } li { margin-bottom: 10px; } .done { text-decoration: line-through; color: gray; } </style></head><body> <h1>我的待办事项</h1> <form action="/add" method="post"> <input type="text" name="content" placeholder="输入新任务..." required /> <button type="submit">添加</button> </form> <ul> {% for task in tasks %} <li> <span class="{{ 'done' if task.done else '' }}">{{ task.content }}</span> <a href="/toggle/{{ task.id }}">[切换状态]</a> <a href="/delete/{{ task.id }}">[删除]</a> </li> {% endfor %} </ul></body></html>
第四步:运行应用
现在我们可以启动 Flask 应用了。在终端中运行:
python app.py
打开浏览器访问 http://localhost:5000
,你将看到一个简单的待办事项页面。你可以添加、删除和标记任务为已完成。
扩展建议
虽然这个应用已经具备基本功能,但还有很多可以扩展的地方,例如:
添加用户登录功能(使用 Flask-Login)增加任务优先级或截止日期字段使用 Bootstrap 样式美化界面实现前后端分离,前端使用 Vue.js 或 React使用 RESTful API 接口供移动端调用总结
通过本文,我们学习了如何使用 Flask 构建一个简单的 Web 应用程序,并结合 SQLite 进行数据持久化存储。我们实现了任务的增删改查操作,并使用 Jinja2 模板引擎动态渲染页面。这为我们进一步学习更复杂的 Web 开发打下了基础。
Flask 是一个非常灵活且易于上手的框架,适合快速开发和原型设计。希望这篇文章能帮助你迈出 Web 开发的第一步!
完整源码地址(示例)
你可以在 GitHub 上查看完整项目:https://github.com/example/flask-todo-app(请替换为你自己的仓库链接)
如有疑问,欢迎留言交流!