Flask Web开发基础

Hello World

Flask 是轻量级web框架，仅保留了核心功能：

• 请求响应处理
• 模板渲染
• URL路由

flask命令模式

• 命令行运行 flask run

# ./app.py
from flask import Flask

app = Flask(__name__)

@app.route("/")
def helloWorld():
    return '<h1>Hello wusp!</h1><img src="http://helloflask.com/totoro.gif">'

注意点：

• 默认端口 5000
• 默认入口文件名称 app.py

python命令模式

• ctrl+F10 pyharm 运行 。

• 或者命令行 python app2.py

需要在代码里面增加 app.run()

# ./app.py
from flask import Flask

app = Flask(__name__)

@app.route("/")
def helloWorld():
    return '<h1>Hello wusp!</h1><img src="https://img.suzone.net/biaoqing/201808/3924b2dfb6bcf13730ba75919f2f005f.gif">'

app.run()

两种模式对比

• flask命令模式 运行和配置是调用 flask 命令，是 命令 + 代码的方式结合。
• python命令模式，是纯代码，flask 相关的配置均使用代码，推荐。

修改入口文件配置

flask命令修改

在 Windows CMD 中使用 set 命令：

set FLASK_APP=hello.py

在 Windows PowerShell 中则使用下面的命令：

$env:FLASK_APP = "hello.py"

python命令修改

直接运行 python xxx.py 就行了，但是需要增加代码 app.run()

修改端口和地址

flask命令修改

flask run --host=0.0.0.0 --port=8080

python命令修改

直接在代码里面修改配置就行了

if __name__ == "__main__":
 app.run(
     host="0.0.0.0",
     port=5600,
     debug=True
 )

# ./app.py
from flask import Flask

app = Flask(__name__)


@app.route("/")
def helloWorld():
    return '<h1>Hello wusp!</h1><img src="https://img.suzone.net/biaoqing/201808/3924b2dfb6bcf13730ba75919f2f005f.gif">'

if __name__ == "__main__":
    app.run(
        host="0.0.0.0",
        port=5600,
        debug=True
    )

修改 URL 路由

URL路由（也称为“网址路由”或“Web路由”）是一种将Web请求（即用户在浏览器地址栏输入的URL）映射到代码中相应的处理函数或资源的技术。在Web开发中，路由是Web服务器或Web框架的一个核心功能，它允许开发者定义一组规则，这些规则确定不同的URL请求应该由哪个部分的代码来处理。

路由的基本组成：

1. 请求方法：指定了请求的类型，最常见的是GET（读取数据）和POST（提交数据），但还有PUT、DELETE等其他类型。
2. 路由路径：URL中的一部分，用于匹配请求的URL。它可以包含动态部分，这些部分用变量表示，通常以尖括号<variable_name>或冒号:variable_name来定义。
3. 处理器函数：当路由匹配成功时，将调用的函数或方法。这个函数负责生成请求的响应。

路由的工作流程：

1. 用户输入URL：用户在浏览器地址栏输入一个URL或点击一个链接。
2. 服务器接收请求：Web服务器接收到请求后，会检查请求的URL和方法。
3. 路由匹配：服务器根据预定义的路由规则查找匹配项。
4. 执行处理器：一旦找到匹配的路由，服务器将调用相应的处理器函数。
5. 生成响应：处理器函数生成响应（通常是HTML页面、JSON数据等），并将其发送回用户。

路由的优点：

• 组织代码：通过将URL映射到特定的处理函数，可以使Web应用的代码结构更加清晰和模块化。
• URL设计自由：开发者可以自由设计URL结构，使其既符合用户习惯也易于搜索引擎优化（SEO）。
• 动态内容生成：可以定义动态路由，根据请求中的参数动态生成内容。
• RESTful API支持：现代Web框架的路由系统支持RESTful API设计，便于构建和维护。

Flask动态路由

from flask import Flask

app = Flask(__name__)

@app.route('/home', methods=['GET'])
def home():
    return 'Welcome to the Home Page'

@app.route('/users/<username>', methods=['GET'])
def show_user_profile(username):
    return f'User {username}'

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

在这个示例中，Flask应用定义了两个路由：

• /home 路由响应GET请求，由 home 函数处理。
• /users/<username> 路由是一个动态路由，<username> 是一个变量，可以匹配任何用户名称，由 show_user_profile 函数处理。

当用户访问这些URL时，Flask会根据定义的路由规则将请求映射到相应的处理函数。

Flask多URL绑定

@app.route("/")
@app.route("/index")
@app.route("/home")
def helloWorld():
    return '<h1>Hello world!</h1>'

修改视图函数

视图函数的名称与URL路由规则无关

url_for 函数

作用

• 以视图函数名作为参数，返回对应的url url_for('视图函数名')
  • 支持动态路由传参
  • 支持查询字符串传参
• 静态文件URL url_for('static', filename='style.css')

应用

以下代码实现了：通过视图函数名称，拼接 a 链接 ，便捷的拿到视图的跳转地址。

@app.route("/url_for_test")
def url_for_test():
    helloWorld = url_for('helloWorld')
    #动态路由的形式，支持传参
    print(url_for('user_page', name='greyli'))  # 输出：/user/greyli
    # 非动态路由多出来的关键字，它们会被作为查询字符串附加到 URL 后面。
    print(url_for('test_url_for', num=2))  # 输出：/test?num=2
    print(helloWorld)
    #输出静态文件路径
    style = url_for('static', filename='style.css')
    return f'<a href="{helloWorld}">helloWorld<a/>'

Jinja2模板引擎

官方文档

Jinja2模板基本语法

• { { userName }} 标记变量
• {% for item in list %} 标记语句比如循环、判断
• {# 注释语句 #}
• { { 变量|过滤器 }} 比如获取列表长度 { { list|length }}

案例：电影列表

入口文件 app.py

主要使用了函数 render_template('templateName.html',list=变量名)

• render_template() 函数在调用时会识别并执行 模板文件 里所有的 Jinja2 语句，返回渲染好的模板内容。在返回的页面中，变量会被替换为实际的值（包括定界符），语句（及定界符）则会在执行后被移除（注释也会一并移除）。

• 'templateName.html' 是模板文件的名称，默认是 templates 文件夹下 ，直接写文件名，不要路径，否则会报错。

• list=变量名 是传给模板处理的变量，可以是字符，函数，元组，字典。

from flask import Flask, url_for ,redirect ,render_template

#https://tutorial.helloflask.com/template/

app = Flask(__name__)

@app.route("/")
@app.route("/index")
@app.route("/home")
def home():
    # 确保 'movies' 函数已经定义
    login_url = url_for('movies')
    return redirect(login_url)

name = "周星驰"
movies = [
    {
   
   'title': '喜剧之王', 'year': '1999'},    # 喜剧之王
    {
   
   'title': '少林足球', 'year': '2001'},    # 少林足球
    {
   
   'title': '功夫', 'year': '2004'},         # 功夫
    {
   
   'title': '西游降魔篇', 'year': '2013'},  # 西游降魔篇
    {
   
   'title': '美人鱼', 'year': '2016'},      # 美人鱼
    {
   
   'title': '大话西游之大圣娶亲', 'year': '1995'},  # 大话西游之大圣娶亲
    {
   
   'title': '大话西游之月光宝盒', 'year': '1995'},  # 大话西游之月光宝盒
    {
   
   'title': '九品芝麻官', 'year': '1994'},  # 九品芝麻官
    {
   
   'title': '唐伯虎点秋香', 'year': '1993'},  # 唐伯虎点秋香
    {
   
   'title': '食神', 'year': '1996'}           # 食神
]

@app.route("/movies",methods=['GET'])
def movies_view():
    #模板路径: render_template 函数的第一个参数是模板的名称，通常不需要指定模板的文件扩展名或路径。
    #Flask 默认查找 templates 文件夹内的模板文件。
    return render_template("movie.html",name=name,movies=movies)

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

模板文件

根目录/templates/movie.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影列表</title>
    <style>
        body {
    
    
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
    
    
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        h1 {
    
    
            text-align: center;
            margin: 20px 0;
        }
        .movie-list {
    
    
            list-style: none;
            padding: 0;
        }
        .movie-list li {
    
    
            background-color: #fff;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        .movie-list .title {
    
    
            font-size: 20px;
            color: #333;
        }
        .movie-list .year {
    
    
            font-size: 14px;
            color: #666;
        }
        .movie-list .director {
    
    
            font-size: 16px;
            color: #4a4a4a;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>{
  
  { name }} 电影列表</h1>
        <ul class="movie-list">
            {% for movie in movies %}
            <li >
                <div class="title">{
  
  {movie.title}}</div>
                <div class="year">{
  
  {movie.year}}</div>
            </li>
            {% endfor %}
            <!-- 更多电影列表项可以在这里添加 -->
        </ul>
    </div>
</body>
</html>