Flask Web开发基础【路由和Jinja2模板引擎】

简介: # Flask Web开发基础Flask是轻量级Web框架,专注于核心功能:请求响应、模板渲染和URL路由。本文档介绍了使用Flask的基础知识,包括命令行和Python两种运行模式,以及如何修改入口文件、端口和地址。此外,还讨论了URL路由的概念和其在Flask中的实现,展示了动态路由和多URL绑定的例子。最后,提到了Jinja2模板引擎,解释了其基本语法,并通过电影列表案例展示了如何结合Flask使用模板。

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 相关的配置均使用代码,推荐。

image-20240603110937719.png

修改入口文件配置

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路由规则无关

image-20240603115624404.png

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>
目录
相关文章
|
14小时前
|
开发者 C++ Python
从零到一,Django/Flask带你走进Web开发的梦幻世界!
【7月更文挑战第14天】在Python Web开发中,Django和Flask各具特色。Django是全能框架,提供ORM、模板、认证等全套解决方案,适合快速建站和新手入门;Flask则轻量灵活,适合原型开发和定制化需求。两者都有活跃社区和丰富扩展,Django学习曲线平缓,Flask更需自定义配置。选择适合自己的框架,开启编程新篇章。
6 0
|
14小时前
|
安全 API 数据库
Django/Flask不只是框架,它们是你Web开发路上的超级英雄!
【7月更文挑战第14天】Django与Flask,Python Web开发的双雄。Django提供全面功能,如ORM、模板引擎,适合大型项目;Flask轻量灵活,适用于快速迭代的定制化应用。Django示例展示ORM简化数据库操作,Flask示例演示构建RESTful API的便捷。两者各有所长,为开发者创造无限可能。**
|
1天前
|
API 数据库 开发者
深度剖析Django/Flask:解锁Web开发新姿势,让创意无限延伸!
【7月更文挑战第13天】Django和Flask对比:** Django全栈,适合复杂应用开发;Flask轻量灵活,适用于小型项目和API。创建Django应用涉及安装、项目和应用创建、模型定义、数据库迁移、视图及URL配置。Flask实现RESTful API通过基本路由或扩展。选择框架依据项目需求、团队技能和灵活性需求。两者皆为Python Web开发的强大工具。
12 5
|
1天前
|
API 数据库 开发者
逆袭之路!Django/Flask助你成为Web开发界的璀璨新星!
【7月更文挑战第13天】在Python Web开发中,Django和Flask各具优势。Django适合快速构建大型项目,如在线书店,其ORM和内置功能让复杂应用轻松上手。Flask则以其轻量和灵活性见长,适用于个人博客等小型应用。选择框架应根据项目需求和个人偏好,两者都能助开发者在Web开发领域大放异彩。
9 2
|
1天前
|
安全 开发者 Python
告别迷茫,Django/Flask深入应用指南,让你的Web梦想照进现实!
【7月更文挑战第13天】在Python Web开发中,Django和Flask框架各具特色。Django适合快速构建企业级应用,提供ORM、模板引擎等全面功能;而Flask轻量灵活,适用于小项目和原型开发。通过实例,了解如何启动Django和Flask的基本应用,从创建项目到运行服务器。选择框架应考虑项目需求和个人偏好,不断学习与实践将助你实现Web梦想。
|
2天前
|
数据库 开发者 Python
从菜鸟到大神,Django/Flask 让你秒变 Web 开发界的‘头号玩家’!
【7月更文挑战第12天】在Python Web开发中,Django和Flask框架各具特色。Flask轻量灵活,适合快速搭建简单应用,如博客,基本代码仅需几行。Django则功能全面,适用于复杂项目,如电商网站,内置ORM和管理后台。两者都助力开发者从新手进阶。选择取决于项目需求和个人偏好。学习和实践这两个框架,能助你成为Web开发专家。
|
25天前
|
Python
Flask三种添加路由的方法
Flask 是一个流行的 Python Web 框架,它提供了多种方法来添加路由。路由是将 URL 映射到特定函数的过程,它是构建 Web 应用程序的基础。本文将介绍 Flask 中几种常用的路由添加方法,并附带代码示例。
17 3
|
25天前
|
开发框架 开发者 Python
使用 Flask 为 Web 应用添加路由
通过学习 Flask 中的视图函数和路由规则,你可以使用 Flask 构建强大的 Web 应用程序并为其添加功能。在 Flask 中,视图函数以 Python 函数的形式定义,每个视图函数都与一个 URL 相关联。在 Flask 中,URL 处理程序被称为视图函数,它们用于响应客户端请求并返回响应。在 Flask 应用程序中,这是可选的。在这里,我们将其命名为 'hello',并将其与 URL '/hello/<name>' 绑定在一起。在上面的示例中,我们使用了默认的视图函数名称 'hello'。
21 2
|
1天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
14 7
|
2天前
|
安全 大数据 编译器
PHP 8: 探索新特性及其对现代Web开发的影响
在这篇文章中,我们将深入探讨PHP 8的最新特性,包括JIT编译器、联合类型、匹配表达式等,并分析这些更新如何影响现代Web开发。通过具体示例和代码片段,本文旨在为开发者提供一个清晰的指南,以便更好地利用PHP 8的新功能优化和加速他们的应用程序。
9 2