2024-08-08发表2024-08-10更新软件开发 / Flask4 分钟读完 (大约598个字)0次访问

构建你的第一个 Web 应用

项目结构

在开始之前，我们需要设置一个基本的项目结构。推荐的结构如下：

my_flask_app/
│
├── app.py
├── templates/
│   └── index.html
└── static/
    └── style.css

安装 Flask

首先，确保你已经安装了 Flask。可以通过以下命令安装：

1	pip install Flask

创建 Flask 应用

在 app.py 中创建基本的 Flask 应用：

from flask import Flask, render_template

app = Flask(__name__)

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

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

这里，我们导入了 Flask 和 render_template，并创建了一个简单的路由 /。

创建模板

接下来，在 templates 目录下创建 index.html 文件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Flask Demo</title>
</head>
<body>
    <h1>欢迎使用 Flask!</h1>
    <p>这是我的第一个 Flask 应用。</p>
</body>
</html>

这里我们使用 {{ url_for('static', filename='style.css') }} 来引用静态资源。

添加样式

在 static 目录下创建 style.css 文件，加入一些简单的样式：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}

h1 {
    color: #4CAF50;
}

运行应用

在终端中，导航到项目目录并运行应用：

1	python app.py

打开浏览器，访问 http://127.0.0.1:5000/，你会看到你的应用界面。

添加更多路由

让我们为应用添加一个新的路由 /about：

1
2
3

@app.route('/about')
def about():
    return "<h2>关于我们</h2><p>这是一个关于页面。</p>"

重启 Flask 应用并访问 http://127.0.0.1:5000/about，你会看到新的关于页面。

使用表单

我们来添加一个简单的表单来收集用户输入。在 index.html 中加入以下代码：

<form action="/submit" method="post">
    <label for="name">请输入您的名字:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

在 app.py 中添加表单处理路由：

from flask import request

@app.route('/submit', methods=['POST'])
def submit():
    name = request.form['name']
    return f"<h2>您好, {name}!</h2>"

现在，当用户输入名字并提交时，会看到一个欢迎的个性化消息。

总结

到此，你已经完成了一个简单的 Flask 应用，从创建项目结构到添加样式、路由和表单功能。掌握这些基础后，你可以继续扩展应用，尝试数据库集成、用户身份验证等更复杂的功能。Flask 为开发提供了灵活和丰富的工具，让我们可以轻松构建出强大的 Web 应用。

构建你的第一个 Web 应用

https://zglg.work/flask/30/

作者

AI教程网

发布于

2024-08-08

更新于

2024-08-10

许可协议

#Flask开发

支付宝

送我杯咖啡微信

构建你的第一个 Web 应用

项目结构

安装 Flask

创建 Flask 应用

创建模板

添加样式

运行应用

添加更多路由

使用表单

总结

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

链接

分类

最新文章

标签