如何从0构建一个flask项目,直接上实操!!!

项目结构

首先,创建一个项目目录,结构如下:

复制代码

flask_app/

├── app.py # Flask 应用代码

├── static/ # 存放静态文件(如CSS、JS、图片等)

│ └── style.css # 示例CSS文件

└── templates/ # 存放HTML模板

└── index.html # HTML模板文件

1. 创建 app.py

flask_app 目录下创建 app.py 文件,内容如下:

复制代码
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():
    name = request.form.get('name')
    return render_template('index.html', name=name)

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

2. 创建 HTML 模板 index.html

templates 目录下创建 index.html 文件,内容如下:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask应用</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <form action="/submit" method="post">
        <label for="name">请输入你的名字:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">提交</button>
    </form>

    {% if name %}
        <h2>你好啊, {{ name }}!</h2>
    {% endif %}
</body>
</html>

3. 创建 CSS 文件 style.css

static 目录下创建 style.css 文件,内容如下:

复制代码
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

form {
    margin: 20px 0;
}

input[type="text"] {
    padding: 10px;
    margin-right: 10px;
}

button {
    padding: 10px 15px;
}

4. 运行应用

在命令行中,导航到 flask_app 目录并运行以下命令:

python app.py

5. 访问应用

打开浏览器,输入以下地址访问你的 Flask 应用:http://127.0.0.1:3000/

总结

这里展示了一个简单的 Flask 应用,用户可以在表单中输入名字并提交,提交后页面会显示用户的名字。通过这个实例 ,相信你已经对flask有了一点点理解了,继续扩展的知识线吧!

相关推荐
Rust研习社几秒前
Rust 性能陷阱:那些看起来很优雅但很慢的写法(上)
后端·rust·编程语言
万亿少女的梦1687 分钟前
基于SpringBoot的在线考试管理系统设计与实现
java·spring boot·后端
ftpeak13 分钟前
AI开发之LangGraph教程6~自定义状态 (Custom State)
python·ai·langchain·langgraph
kyriewen15 分钟前
我开发的 Chrome 扒图浏览器插件又更新了❗
前端·chrome·浏览器
程序员祥云26 分钟前
Prompt项目说明文档
前端
m0_7381207227 分钟前
渗透测试——Djinn1靶场详细渗透提权过程讲解(绕过黑名单限制,命令执行反弹shell,pyc反编译,代码白盒分析,python沙盒逃逸)
开发语言·python·php
一勺菠萝丶27 分钟前
如何在 Linux 服务器上使用 Speedtest 官方 CLI 测试带宽(小白教程)
java·服务器·前端
DianSan_ERP30 分钟前
京东订单接口集成中如何处理消费者敏感信息的安全与合规问题?
前端·数据库·后端·团队开发·运维开发
web守墓人32 分钟前
【go语言】go语言实现go-torch, 完成Lenet-5的搭建,训练,以及pth和onnx模型导出
开发语言·后端·golang
TEC_INO33 分钟前
Linux50:ROCKX+RV1126视频流检测人脸
开发语言·前端·javascript