项目结构
首先,创建一个项目目录,结构如下:
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有了一点点理解了,继续扩展的知识线吧!