Flask基本教程以及Jinjia2模板引擎简介

flask基本使用

直接看代码吧,非常容易上手:

# 创建flask应用
app = Flask(__name__)

# 路由
@app.route("/index", methods=['GET'])
def index():
    return "FLASK:欢迎访问主页!"

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

访问结果展示:
在这里插入图片描述

jinjia2模板引擎

jinja2 是 Flask 作者开发的一个模板系统,起初是仿 Django 模板的一个模板引擎,为 Flask 提供模板支持,由于其灵活,快速和安全等优点被广泛使用。当我们开发 Web 应用程序时,通常需要将数据动态地渲染到 HTML 模板中,而 Python jinja2 模版技术正是为此而生的。该引擎在一定程度上实现了前后端分离(前后端代码层面的分离)。

模板目录

创建templates文件夹,用于存放模板文件(HTML模板),flask默认会在templates目录下寻找对应的html文件

模板语法

普通访问

模板中可以通过形如 {{obj.name}} 的形式访问后端的普通数据,例如变量、对象、列表等。

<p>
    {{ name }}  <!-- name 就是一个变量 -->
    {{ obj.name }}  <!-- 提取 obj 对象的属性 -->
    {{ obj["name"] }}  <!-- 和 obj.name 等效 -->
</p>

控制结构:遍历

通过如下形式,实现遍历的效果:

{% for item in students  %}
<tr>
	<td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.sex}}</td>
</tr>
{% endfor %}

控制结构:判断

支持类似于if、else的表达式

<!-- 表达式 -->
{% if count > 10 %}
  <p>There are too many items.</p>
{% else %}
  <p>There are {{ count }} items.</p>
{% endif %}

控制结构:跳出循环、继续执行

{% for i in [1,2,3] %}
	{% if i == 1 %}
		{{ i }}
		{% continue %}
	{% else %}
		{% break %}
	{% endif %}
{% endfor %}

表达式

在模板中,支持python的表达式语法,例如:

  • /
  • and
  • in
  • or

过滤器

过滤器就是函数,把当前的变量传入过滤器,过滤器根据自己的功能对变量进行相应的处理,再返回对应的值,并将结果渲染到网页中,起到了数据处理的作用。例如:

  • 绝对值
  • 最大值
  • 最小值

模板的继承与包含

django中的模板引擎,就具备模板的继承和包含功能。同样,jinjia2,也具备这样的功能,起到了模板复用、模块化开发的效果。

继承:

-----父亲-----

{% block title %}           {# 声明一个名为 title 的block #}
    <p>This is title</p>
    {% block content %}     {# title 内部嵌套了一个名为 content 的block #}
    {% endblock %}
{% endblock %}

{% block foot %}
    <span>This is foot</span>
{% endblock %}

它里面定义了很多的 block, 每个 block 都有自己的名字(block的名字不能重复): {% block blok_name %}...{% endblock %} ,在 block 中,我们可以写入一些 html 代码,让子模板继承。

各个 block 之间是可以嵌套的

注意每个 block 要有一个 {% endblock %}

-----孩子-----

{% extends "mother.html" %}             {# 继承母版 #}

{% block content %}                     {# 重写某个block #}
    <span>This is content, and the mother.html doesn't have this.</span>
{% endblock %}

{% block foot %}
    {{ super() }}                       {# 继承母版中的 foot block 的内容 #}
    <span>New foot content</span>
{% endblock %}

{% extend %} 非常关键:它告诉模板要继承另一个模板。并且这个标签要放在模板的最上面。

当然,继承的标签可以写路径: {% extends "layout/default.html" %}

如果子模板没有重写母版中的某个block,则会默认使用母版中的block。

包含:

{% include 'header.html' %}

{% include "sidebar.html" ignore missing %}  			{# ignore missing:如果找不到模板,可以忽略 #}

{% include ['special_sidebar.html', 'sidebar.html'] ignore missing %}  {# 可以导入列表 #}

{% include "sidebar.html" ignore missing without context %}            {# without context 可以不携带上下文 #}

{% include "sidebar.html" ignore missing with context %}            {# with context 可以携带上下文 #}

上下文:其实就是模板中定义的变量,我们渲染时会将上下文传递给模板:template.render(context) ,而我们嵌套其他模板时,也可以将它们中的上下文包含进来,这样在当前模板中也可以使用被嵌套模板中的上下文。(因为目前相关的实战经验较少,暂时不知道什么样的场景会用到模板上下文)

场景分析:

  • 代码复用。html中的头部部分、底部部分的标签,可以单独抽象为一个模板,实现代码复用,减少了代码冗余。
  • 模块化开发。比如一个页面中的两个板块,A板块抽象为一个模板,B板块抽象为一个模板。通过包含的方式,将其引入,从而实现模块发开发的目的。

根据之前的经验,VUE、react均有相关代码复用、模块化开发相关的支持。

个人的一些思考

关于前后端分离

无论是django还是flask的模板引擎,他们都是在一定程度上实现了前后端分离,但是还不是完全的前后端分离。

其中前后端分离体现在:

  • 前后端代码分离。前端页面与后端处理程序分离,降低了前后端代码耦合。

分离不完全体现在:

  • 渲染的网页 还是由后端程序来返回(某种程度上还是服务端渲染)
  • 路由 依然在后端程序中进行设置
  • 模板中依然嵌入了某种语法,例如遍历等。不过这个应该不算,毕竟VUE、react中均有相关的数据处理的语法。
  • 模板引擎提供了很多数据过滤器,而这些过滤器函数 与 JavaScript的函数/过滤器 功能上是重合的,如果说分离得再彻底一些,那么相关的数据处理应该完全扔给前端的JavaScript来处理。

关于使用场景

目前,前后端分离,是一种WEB开发的主流趋势。那么,在python web开发中,何时使用vue、react等前端框架?何时使用自带的模板引擎?

我认为:

  • 如果是一些开发周期较长、规模较大、项目较为复杂的大型项目 或者说以学习为目的,那么可以考虑使用vue、react等成熟的前端框架开发。python仅用于返回数据,不适用其内置的模板引擎。
  • 如果就是非常简单的小型项目,那么完全可以使用django或者flask的模板引擎来进行前端页面的数据渲染,达到快速开发的目的。毕竟,使用vue、react等框架,需要单独建立项目,还需要进行各种配置,掌握各种命令。相比之下,这种模板引擎,就显得非常容易上手。

附代码

后端

from flask import Flask, jsonify
from flask import render_template
from flask_cors import CORS

# 创建flask应用
app = Flask(__name__)
# 配置跨域请求。r'/*' 是通配符,让本服务器所有的 URL 都允许跨域请求
CORS(app, resources=r'/*')


# 路由
@app.route("/", methods=['GET'])
@app.route("/index", methods=['GET'])
def index():
    return "FLASK:欢迎访问主页!"


# 返回json数据
@app.route("/getOneData", methods=['GET'])
def getOneData():
    student = {
        "age": 15,
        "name": "zhangsan",
        "sex": "man"
    }
    return jsonify(student)


# 返回网页
# 利用jinjia2渲染引擎,向模板中渲染数据
@app.route("/studentInfo", methods=['GET'])
def studentInfo():
    student = {
        "age": 15,
        "name": "zhangsan",
        "sex": "man"
    }
    students = [
        {
            "age": 101,
            "name": "zhangsan",
            "sex": "man"
        },
        {
            "age": 123,
            "name": "lisi",
            "sex": "man"
        },
        {
            "age": 336,
            "name": "wangwu",
            "sex": "man"
        }
    ]
    hello = "欢迎来到flask项目!"
    return render_template('student.html', title='学生信息', hello=hello, student=student, students=students)


if __name__ == "__main__":
    # 0.0.0.0代表所有主机均可以访问,开启之后可通过服务器的IP地址访问网站
    # 默认端口为5000
    # app.run(port=5001, debug=True)
    app.run(host='0.0.0.0', port=5001, debug=True)

前端

<html>
<style>
/* Table Head */
table{
border-spacing: 0;
}
#table-6 thead th {
background-color: rgb(128, 102, 160);
color: #fff;
border-bottom-width: 0;
}


/* Column Style */
#table-6 td {
color: #000;
}
/* Heading and Column Style */
#table-6 tr, #table-6 th {
border: 1px solid rgb(128, 102, 160);
}


/* Padding and font style */
#table-6 td, #table-6 th {
padding: 5px 10px;
font-size:30px;
font-family: Verdana;
font-weight: bold;
}
td{
    border:1px solid rgb(128, 102, 160) ;
}
</style>
    <head>
        <title>{{ title }}</title>
    </head>
    <body>
        <h1>{{hello}}</h1>


        <h1>姓名:{{student.name}}</h1>
        <h1>年龄:{{student.age}}</h1>
        <h1>性别:{{student.sex}}</h1>
        <br>
        <br>
        <br>
        <table id="table-6">
            <thead>
                <tr>
                    <th>姓名</th><th>年龄</th><th>性别</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>item.name</td><td>item.age</td><td>item.sex</td>
                </tr>
                <tr>
                    <td>item.name</td><td>item.age</td><td>item.sex</td>
                </tr>
                {% for item in students  %}
                    <tr>
                        <td>{{item.name}}</td><td>{{item.age}}
                        {{item.age}}</td><td>{{item.sex}}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </body>
</html>

参考链接

某个jinjia2的教程

http://docs.jinkan.org/docs/jinja2/index.html

博客园某博主

https://www.cnblogs.com/wztshine/p/16054582.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/110051.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vulnhub靶机Venus

下载地址&#xff1a;The Planets: Venus ~ VulnHub 主机发现 arp-scan -l 端口扫描 nmap --min-rate 1000 -p- 192.168.21.132 端口版本扫描 nmap -sV -sT -O -p22,8080 192.168.21.132 对于http-alt HTTP Alternative Services 介绍 | JerryQu 的小站 (imququ.com) 总结…

[迁移学习]UniDAformer域自适应全景分割网络

原文的标题为&#xff1a;UniDAformer: Unified Domain Adaptive Panoptic Segmentation Transformer via Hierarchical Mask Calibration&#xff0c;发表于CVPR2023。 一、概述 域自适应全景分割是指利用一个或多个相关域中的现成标注数据来缓解语义分割数据标注复杂的问题。…

MyBatis的增删改查

2023.10.29 本章学习MyBatis的基本crud操作。 insert java程序如下&#xff1a; ①使用map集合传参 Testpublic void testInsertCar(){SqlSession sqlSession SqlSessionUtil.openSession();//先将数据放到Map集合中&#xff0c;在sql语句中使用 #{map集合的key} 来完成传…

Steger算法实现结构光光条中心提取(python版本)

Steger算法原理 对结构光进行光条中心提取时&#xff0c;Steger算法是以Hessian矩阵为基础的。它的基础步骤如下所示&#xff1a; 从Hessian矩阵中求出线激光条纹的法线方向在光条纹法线方向上将其灰度分布按照泰勒多项式展开&#xff0c;求取的极大值即为光条在该法线方向上…

【Flutter】自定义分段选择器Slider

【Flutter】ZFJ自定义分段选择器Slider 前言 在开发一个APP的时候&#xff0c;需要用到一个分段选择器&#xff0c;系统的不满足就自己自定义了一个&#xff1b; 可以自定义节点的数量、自定义节点的大小、自定义滑竿的粗细&#xff0c;自定义气泡的有无等等… 基本上满足你…

Springboot的Container Images,docker加springboot

Spring Boot应用程序可以使用Dockerfiles容器化&#xff0c;或者使用Cloud Native Buildpacks来创建优化的docker兼容的容器映像&#xff0c;您可以在任何地方运行。 1. Efficient Container Images 很容易将Spring Boot fat jar打包为docker映像。然而&#xff0c;像在docke…

合肥中科深谷嵌入式项目实战——人工智能与机械臂(三)

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 作者&#xff1a;爱吃饼干的小白鼠。Python领域优质创作者&#xff0c;2022年度博客新星top100入围&#xff0c;荣获多家平台专家称号。…

信号去噪之卡尔曼滤波

在前面的文章 卡尔曼滤波 中曾讲解过卡尔曼滤波在惯性导航和飞行姿态控制中的应用&#xff0c;今天来聊一聊卡尔曼滤波在信号去噪中的应用。 卡尔曼滤波&#xff08;Kalman Filtering&#xff09;是一种用于估计系统状态的数学方法&#xff0c;它通过考虑系统的动态模型和传感…

86 最小栈

最小栈 题解1 STL大法好题解2 辅助最小栈&#xff08;直观&#xff0c;空间换时间&#xff09;题解3 不需要额外空间(!!!差值!!!) 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初…

树莓派 qt 调用multimedia、multimediawidgets、serialport、Qchats

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、测试11.命令安装出现错误 二、测试21. 安装 Qt Charts&#xff1a;2. 安装 Qt Multimedia 和 Qt MultimediaWidgets&#xff1a;3. 安装 Qt SerialPort&…

重磅新闻-国内首家八类网线认证分析仪上市了

伴随USA对国内某些敏感企业的非常不友好&#xff0c;设置层层障碍&#xff0c;技术堡垒。使得一些网线基础制造研发、线缆线束厂、汽车生产生产厂、军工用途的线缆品质的认证、以及相关高校的研发受到了不同的程度的阻碍。重磅消息&#xff0c;国内首家八类网线认证测仪-维信仪…

几个常用的nosql数据库的操作方式

dynamoDB 键 partition key&#xff1a;分区键 定义&#xff1a;分区键是用于分布数据存储的主键&#xff0c;每个项&#xff08;Item&#xff09;在表中都必须有一个唯一的分区键值。 特点&#xff1a; 唯一性&#xff1a;每个分区键值在表中必须是唯一的&#xff0c;这是因为…

【Java 进阶篇】Java HTTP 请求消息详解

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于传输超文本的应用层协议&#xff0c;广泛用于构建互联网应用。在Java中&#xff0c;我们经常需要发送HTTP请求来与远程服务器进行通信。本文将详细介绍Java中HTTP请求消息的各个部分&#xff0c;包括请求行、…

基于纵横交叉算法的无人机航迹规划-附代码

基于纵横交叉算法的无人机航迹规划 文章目录 基于纵横交叉算法的无人机航迹规划1.纵横交叉搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用纵横交叉算法来优化无人机航迹规划。 …

vscode 通过ssh 连接虚拟机vmware(ubuntu)

1.网络连接是否ping的通&#xff08;ubuntu虚拟机使用的是net 连接方式&#xff09; 2.配置环境 ubuntu 需要安装ssh server 服务 &#xff08;1&#xff09;&#xff1a; 安装&#xff08;Ubuntu安装ssh server) apt-get install openssh-server 检查是否ssh server 是否启动…

PostMan 之 Mock 接口测试

在测试的时候经常会碰到后端开发工程师的接口还没有开发完成&#xff0c;但是测试任务已经分配过来。没有接口怎么测试呢&#xff1f; 测试人员可以通过 mock server 自己去造一个接口来访问。mock server 可用于模拟真实的接口。收到请求时&#xff0c;它会根据配置返回对应的…

图解Kafka高性能之谜(五)

高性能的多分区、冗余副本集群架构 高性能网络模型NIO 简单架构设计&#xff1a; 详细架构设计&#xff1a; 高性能的磁盘写技术 高性能的消息查找设计 索引文件定位使用跳表的设计 偏移量定位消息时使用稀疏索引&#xff1a; 高响应的磁盘拷贝技术 kafka采用sendFile()的…

Linux:KVM虚拟化

本章操作基于centos7系统 简介 KVM是Kernel Virtual Machine的简写&#xff0c;目前Redhat只支持在64位的Rhel5.4以上的系统运行KVM&#xff0c;同时硬件需要支持VT技术。KVM的前身是QEMU&#xff0c;在2008年被redhat公司收购并获得了一项hypervisor技术&#xff0c;不过redh…

一文浅析Instagram网红经济为什么远远超出其他社媒平台

根据数据显示&#xff0c;网红营销市场规模在短短五年时间内从2016年的17亿美元增长至2022年的164亿美元&#xff0c;累计增速超过了712%。未来&#xff0c;有专家预计该市场预计将进一步增长&#xff0c;将在2023年突破210亿美元。这种惊人的增长趋势源于社交媒体的快速发展以…

SpringBoot整合Gateway 的Demo(附源码)

源码&#xff0c;可直接下载 Gateway模块 Gateway 的父pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…