Flask框架开发一个简单的Web应用

一、安装 Flask: 如果你还没有安装 Flask,可以通过 pip 安装它:

bash 复制代码
pip install flask

二、编写后端 Python 代码 : 创建一个 Python 文件(例如 app.py),在这个文件中定义你的 Flask 应用。

三、创建路由 : 在 Flask 中,通过装饰器 (@app.route) 来定义处理特定 URL 请求的函数。

四、运行 Flask 应用 : 设置环境变量 FLASK_APP 并启动应用。

五、编写前端 HTML/CSS/JS: 创建静态文件(如 HTML 页面)来呈现内容,并通过 JavaScript 发送 AJAX 请求与后端交互。

下面是一个简单的例子:

步骤 1: 编写后端 Python 代码

假设你的 Python 文件名为 app.py:

python 复制代码
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/submit', methods=['POST'])
def submit():
    user_name = request.form.get('user_name')
    if user_name:
        return f"Hello, {user_name}!"
    else:
        return "Please provide your name."

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

步骤 2: 创建前端 HTML 文件

在你的项目目录中创建一个名为 templates 的文件夹,并在其中创建一个名为 index.html 的文件:

XML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask Example</title>
</head>
<body>
    <h1>Welcome to the Flask App!</h1>
    <form action="/submit" method="post">
        <label for="user_name">Your Name:</label>
        <input type="text" id="user_name" name="user_name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

步骤 3: 运行 Flask 应用

确保你在包含 app.py 的目录中,并且已经设置了 FLASK_APP 环境变量。然后运行 Flask 应用:

bash 复制代码
export FLASK_APP=app.py
flask run

这将在本地服务器上启动 Flask 应用。你可以通过访问 http://127.0.0.1:5000/ 来查看你的网站。

以上就是一个基本的 Flask 应用示例,包括了后端逻辑和简单的前端交互。你可以根据需要添加更多的功能,比如数据库集成、用户认证等。

相关推荐
SimonKing6 小时前
AI逆向实战:一个壁纸网站被我5分钟摸透了,你也能
java·后端·程序员
牛艺翔6 小时前
C++ 基础知识
开发语言·c++
天云数据6 小时前
从“LLM+工具”到Harness 工程:Lilian Weng新文的技术拆解,与一个生产级参考实现
java·前端·网络
三8446 小时前
WordPress SQL 注入漏洞分析:从 author__not_in 参数到 REST API 全链路
linux·前端·数据库
IT_陈寒6 小时前
Vite打包时踩了个坑,static资源去哪了?
前端·人工智能·后端
学心理学的程序员6 小时前
anydoc:Firecrawl 出的 Rust 文档转 Markdown,4ms 转换、14 种格式干翻 MarkItDown
开发语言·后端·rust·开源·firecrawl·claude code·anydoc
龙虾PRO6 小时前
2026 年 AI 智能体工具调用:ReAct 模式与函数调用怎么选才不踩坑
前端·人工智能·react.js
Python私教6 小时前
创业团队做 App,第一版千万别做“大而全”:MVP 到底该留下什么
后端·python·架构
何以解忧,唯有..6 小时前
Django 框架入门指南:从零开始构建 Web 应用
前端·python·django
daols886 小时前
vue 甘特图 vxe-gantt 紧前紧后依赖关系连接线配置详解
前端·vue.js·甘特图