Flask 系列之 HelloWorld

说明

操作系统：Windows 10
Python 版本：3.7x
虚拟环境管理器：virtualenv
代码编辑器：VS Code

实验目标

创建一个显示 Hello World 页面的网站。

环境搭建

打开 cmd 执行下述操作

# 创建项目文件

mkdir todolist

cd todolist

# 创建代码文件夹

mkdir app

# 创建虚拟环境

python -m virtualenv venv

# 激活虚拟环境

venv\Scripts\activate

# 安装 flask

pip insatll flask

# 启动 VS Code 编辑器

code .

Hello World

在 todolist\app 目录下创建一个 init.py ，示例代码如下所示：

from flask import Flask

app = Flask(__name__)

@app.route('/')

@app.route('/index')

def index():

    return '<h1>Hello World</h1>'

在 todolist 目录下创建一个 manage.py 文件，示例代码如下所示：

from app import app

if __name__ == "__main__":

    app.run(debug=True, host='0.0.0.0', host=5000)

在 VS Code 的 Terminal 窗口执行 python manage.py 操作，在在本地启动一个开发服务器，运行起我们的程序，等程序成功启动起来后，尝试打开浏览器访问 "http://127.0.0.1:5000/" 即可看到页面显示一个 Hello World。

使用 render_template

在 todolist\app\templates 目录下创建一个 index.html 页面，示例代码如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Index</title>

</head>

<body>

    <h1>Hello World</h1>

</body>

</html>

修改 todolist\app\__init__.py 文件，示例代码如下所示：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

@app.route('/index')

def index():

    return render_template('index.html')

尝试打开浏览器访问 "http://127.0.0.1:5000/" 即可看到相应效果。

使用模板继承优化代码

在 todolist\app\templates 目录下创建一个 base.html 页面，示例代码如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Index</title>

</head>

<body>

    {% block content %}{% endblock %}

</body>

</html>

修改 todolist\app\templates\index.html 页面，示例代码如下所示：

{% extends 'base.html' %}

{% block content %}

<h1>Hello World</h1>

{% endblock %}

尝试打开浏览器访问 "http://127.0.0.1:5000/" 即可看到相应效果。

页面传值

修改 todolist\app\__init__.py ，示例代码如下所示

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

@app.route('/index')

def index():

    title = 'Home'

    greet = 'Hello World'

    return render_template('index.html', title=title, greet=greet)

修改 todolist\app\templates\base.html 页面，示例代码如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    {% if title %}

    <title>{{title}}'s Todo List</title>

    {% else %}

    <title>Todo List</title>

    {% endif %}

</head>

<body>

    {% block content %}{% endblock %}

</body>

</html>

修改 todolist\app\templates\index.html 页面，示例代码如下所示

{% extends 'base.html' %}

{% block content %}

<h1>{{greet}}</h1>

{% endblock %}

尝试打开浏览器访问 "http://127.0.0.1:5000/" 即可看到相应效果。

注意事项

若在 VS Code 的虚拟环境下安装依赖包失败的的话，尝试以管理员方式打开 powershell 执行 Set-ExecutionPolicy RemoteSigned 即可