当前位置：首页 > news >正文

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

news 2025/7/16 8:39:48

项目结构

首先，创建一个项目目录，结构如下：

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, requestapp = 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;
}