Featured image of post Python Web开发学习（一）：使用Flask框架
编程 网站

Python Web开发学习（一）：使用Flask框架

使用Flask框架搭建Python Web应用程序

缘起

主流的Web开发语言有很多，比如Java、PHP、Python、Ruby等，其中我对Python了解最多，因此我想用Python来开发Web应用程序。Python有很多Web框架，比如Django、Flask、Tornado等，这些框架都有各自的特点，其中Flask是一个轻量级的Web框架，因此我选择从Flask框架开始来学习开发Web应用程序。

本系列文章将从零开始，一步一步地介绍如何使用Flask框架来开发Web应用程序。本文将介绍如何使用Flask框架来开发一个简单的Web应用程序，包括URL解析和模版渲染。 本系列文章计划包括：

  1. 使用Flask框架开发一个简单的Web应用程序：URL路由、模版渲染（本文）
  2. 使用PostgreSQL数据库：创建PostgreSQL数据库、使用SQLAlchemy操作数据库（参见“Python Web开发学习（二）：使用PostgreSQL和SQLAlchemy”
  3. 数据接收和数据请求：表单、从第三方Web API获取数据（参见“Python Web开发学习（三）：使用输入框和API”
  4. 使用Docker部署Web应用程序：docker-compose、Nginx、Gunicorn（参见“Python Web开发学习（四）：使用Docker、Gunicorn和Nginx部署网站”

Flask简介

Flask是一个轻量级的Web框架，它的核心是WSGI工具包Werkzeug和模版引擎Jinja。Flask框架的核心是WSGI工具包Werkzeug，它是一个WSGI工具集，可以用来处理HTTP请求和响应，以及其他与Web应用程序相关的任务。模版引擎Jinja是一个现代的、设计优雅的模版引擎，它可以用来生成HTML页面。

第一个简单的Web应用程序

我们需要创建一个Flask环境，然后编写一个简单的Web应用程序。

  1. 创建一个目录，用来学习Flask开发，比如learn_flask，然后进入该目录：

    1
2

    mkdir learn_flask
cd learn_flask

  2. 创建一个Python虚拟环境，用来安装Flask框架和其他依赖包：

    1
2
3

    python3 -m venv env       # 创建Python虚拟环境
source env/bin/activate   # 激活Python虚拟环境
pip install flask         # 安装Flask框架

  3. 创建一个Python文件，用来编写Flask应用程序，比如app.py：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, World!'

if __name__ == "__main__":
    app.run()

    上面的代码创建了一个Flask应用程序，当访问根URL时，会返回Hello, World!。下面我们来分析一下这段代码：

    • from flask import Flask：导入Flask框架
    • app = Flask(__name__)：创建一个Flask应用程序，__name__是当前模块的名称，如果当前模块是主模块，则__name__的值为__main__，否则__name__的值为当前模块的名称。
    • @app.route('/')：使用app.route()装饰器来注册一个URL，这里注册了根URL，即/。route()是一个路由函数，当用户访问某个URL时，路由函数会根据URL请求来调用相应的Python函数。
    • def index():：定义一个Python函数，用来处理根URL的请求。
    • return 'Hello, World!'：当用户访问根URL时，会调用index()函数，该函数会返回Hello, World!。
    • if __name__ == "__main__":：如果当前模块是主模块，则执行app.run()，启动Flask应用程序。

  4. 运行Flask应用程序：

    1

    python app.py

    Flask应用默认运行在5000端口，因此可以在浏览器中访问http://localhost:5000/，就可以看到Hello, World!： Hello, World!

至此，我们已经创建了一个简单的Flask应用程序。但现在我们的应用程序只能返回一个字符串，这显然是不够的，实际应用中，我们往往需要返回一个HTML页面，这就需要使用模版引擎Jinja。

使用模板

接下来的例子中，我们用这个应用来展示一些实际的信息，比如一个城市的天气。我们需要创建一个HTML页面，用来展示天气信息，然后将天气信息传递给HTML页面，最后将HTML页面返回给用户。

模板文件

  • 在learn_flask目录下创建一个templates目录，然后在templates目录下创建weather.html文件。

weather.html文件的内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Weather App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
</head>
<body>
    <section class="ajax-section">
        <div class="container">
            <ul class="cities">
                {% for city in cities_data %}
                <li class="city">
                    <h2 class="city-name">{{ city.name }}, <sup>{{ city.country }}</sup></h2>
                    <div class="city-temp">{{ city.temp }}<sup>°C</sup></div>
                    <figcaption>{{ city.description }}</figcaption>
                    <img class="city-icon" src="{{ city.icon }}" alt="{{ city.description }}">
                </li>
                {% endfor %}
            </ul>
        </div>
    </section>
</body>
</html>
  • 在learn_flask目录下创建一个static目录，然后在static目录下创建style.css文件。

展示天气信息的卡片的样式style.css文件来自https://webdesign.tutsplus.com/build-a-simple-weather-app-with-vanilla-javascript–cms-33893t，其效果如下所示：

weather card

向模板传递参数

在weather.html文件中，我们准备接收一个cities_data的变量，然后分城市展示天气信息。cities_data变量是一个字典，字典的键是城市名称，字典的值是一个列表，列表中的元素是一个字典，字典中包含了天气信息。 改动后的app.py文件如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

from flask import Flask, render_template

app = Flask(__name__)

class WeatherData:
    def __init__(self, data):
        self.name = data['name']
        self.country = data['country']
        self.temp = data['temp']
        self.feels_like = data['feels_like']
        self.icon = f'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/{data["icon"]}.svg'
        self.description = data['description']

@app.route('/')
def index():
    cities_data = []
    wd1 = WeatherData({
        'name': 'London',
        'country': 'UK',
        'temp': '12',
        'feels_like': '11',
        'icon': '10d',
        'description': 'Moderate rain'
    })
    cities_data.append(wd1)
    wd2 = WeatherData({
        'name': 'New York',
        'country': 'US',
        'temp': '20',
        'feels_like': '19',
        'icon': '01d',
        'description': 'Sunny'
    })
    cities_data.append(wd2)

    return render_template('weather.html', cities_data=cities_data)

if __name__ == "__main__":
    app.run()

运行应用

再次运行应用程序：

1

python app.py

在浏览器中访问http://localhost:5000/，就可以看到我们的网站在两个卡片里展示了两个城市的天气信息： weather app

comments powered by Disqus