使用 Python 构建一个简单的 Web 应用程序

昨天 7阅读

在当今的软件开发中,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(请替换为你自己的仓库链接)

如有疑问,欢迎留言交流!

免责声明:本文来自网站作者,不代表CIUIC的观点和立场,本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。客服邮箱:ciuic@ciuic.com

目录[+]

您是本站第769名访客 今日有15篇新文章

微信号复制成功

打开微信,点击右上角"+"号,添加朋友,粘贴微信号,搜索即可!