博客

使用Python的Flask框架来搭建第一个Web应用程序

  • Post category:Python

使用Python的Flask框架来搭建第一个Web应用程序，可以包含以下几个步骤：

1. 安装Flask模块

使用pip命令安装Flask模块：

pip install Flask

2. 创建Flask项目

在Python的IDE中创建一个Flask项目，可以使用以下示例代码：

from flask import Flask

app = Flask(__name__)

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

在上述代码中，首先导入Flask模块，然后创建一个Flask应用程序对象app，并通过__name__参数指定所在的模块。最后通过app.run()方法启动Flask程序。

3. 添加路由

在Flask应用程序中，可以通过路由指定处理URL请求。例如，可以通过以下代码为主页添加一个路由：

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

上述代码中，使用app.route('/')装饰器指定路由为”/”，然后定义了一个函数index()，该函数返回一个字符串”Hello World!”。

4. 启动Flask程序

启动Flask程序的方法有两种：

  • 在IDE中运行源代码；
  • 使用命令行方式运行。

若要使用命令行方式运行，则需要在Python源代码文件所在目录下打开命令行，然后输入以下命令：

export FLASK_APP=app.py   # 导出Flask程序的入口模块
export FLASK_ENV=development   # 设为开发环境
flask run   # 运行Flask程序

示例1：搭建一个简单的计算器应用

为了演示如何使用Flask框架搭建Web应用程序，这里创建了一个简单的计算器应用。用户在浏览器中输入两个数和运算符，然后点击“计算”按钮，即可得到计算结果。

以下是该计算器应用的源代码：

from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def index():
    return '''
        <form method="post" action="/calculate">
            <p>第一个数：<input type="text" name="num1"></p>
            <p>第二个数：<input type="text" name="num2"></p>
            <p>运算符：
                <select name="op">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
            </p>
            <p><input type="submit" value="计算"></p>
        </form>
    '''

@app.route('/calculate', methods=['POST'])
def calculate():
    num1 = float(request.form['num1'])
    num2 = float(request.form['num2'])
    op = request.form['op']
    if op == '+':
        result = num1 + num2
    elif op == '-':
        result = num1 - num2
    elif op == '*':
        result = num1 * num2
    else:
        result = num1 / num2
    return f'<p>计算结果：{result}</p>'

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

在上述代码中，首先导入Flask与requests模块。然后创建一个Flask应用程序对象app。在index()路由函数中，生成计算器页面html代码, calculate()路由函数中，从请求中获取表单提交的内容，并根据用户选择的运算符进行计算，并将结果返回给浏览器。

示例2：搭建一个TODO应用

这个例子将展示如何构建一个待办事项清单的Web应用程序。用户可以在Web页面上添加新的代办事项或勾选已完成的事项。

以下是该TODO应用的源代码：

from flask import Flask, render_template, request

app = Flask(__name__)

todos = []

@app.route('/')
def index():
    return render_template('index.html', todos=todos)

@app.route('/add', methods=['POST'])
def add():
    todos.append(request.form['content'])
    return render_template('index.html', todos=todos)

@app.route('/done', methods=['POST'])
def done():
    done_index = int(request.form['done_index'])
    todos[done_index] = '<del>' + todos[done_index] + '</del>'
    return render_template('index.html', todos=todos)

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

在上述代码中，我们首先导入Flask及其它所需模块。然后创建一个Flask应用程序对象app。此处我们创建了一个空列表todos用来存储代办事项。

在index()路由函数中，我们使用模板引擎render_template生成待办事项Web页面。在添加新的代办事项时，我们通过request.form获取用户提交的表单内容，并将新的代办事项添加到todos列表中。在完成某个代办事项时，我们通过request.form获取勾选的项的下标，然后在该项的字符串前后加上<del>和</del>标签，标记为已完成。

在Flask应用程序的根目录下新建templates文件夹，并在该文件夹下新建index.html模板文件。该模板文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO-FLASK</title>
</head>
<body>
    <h1>TODO</h1>
    <ul>
        {% for todo in todos %}
            <li>{{ todo }}</li>
        {% endfor %}
    </ul>
    <form method="post" action="/add">
        <p>新的代办事项：<input type="text" name="content"></p>
        <p><input type="submit" value="添加"></p>
    </form>
    <form method="post" action="/done">
        <p>完成的代办事项：<select name="done_index">
            {% for i in range(len(todos)) %}
                <option value="{{ i }}">{{ todos[i] }}</option>
            {% endfor %}
        </select></p>
        <p><input type="submit" value="完成"></p>
    </form>
</body>
</html>

在这个模板文件中，我们使用了Flask提供的模板引擎，可以看到，模板文件可以使用变量、循环等语法结构，使得我们可以轻松地将数据集成到HTML代码中。

Tags: