flask(十二)----jinjia2模版渲染

有时候我们前端的数据会随着后端的数据改变而改变，在前后端不分离的系统中，可通过jiajia2来实现模版渲染，这样前端也就更灵活。

1.{{ }}:实现动态模版加载

后端示例：

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():projects = [{"name": "项目1", "interface_num": 11, "time": "2022/3/17"},{"name": "项目2", "interface_num": 22, "time": "2022/3/17"},{"name": "项目3", "interface_num": 33, "time": "2022/3/17"},{"name": "项目4", "interface_num": 44, "time": "2022/3/17"},]# render_template()中第1个参数后面的参数，会将数据传给第1个参数页面，页面中若存在{{ }}，则会匹配后面参数的数据。return render_template('index.html', pro=projects, title='测试平台')if __name__ == '__main__':app.run(debug=True)

前端示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{{ title }}</title>
</head>
<body><div>{{ pro }}</div>
</body>
</html>

效果：

2.使用jinjia中的for循环，美化格式

{% for p in projects %}

项目：{{ p.name }} : {{ p.interfaces }}

{% endfor %}

后端代码不变：

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():projects = [{"name": "项目1", "interface_num": 11, "time": "2022/3/17"},{"name": "项目2", "interface_num": 22, "time": "2022/3/17"},{"name": "项目3", "interface_num": 33, "time": "2022/3/17"},{"name": "项目4", "interface_num": 44, "time": "2022/3/17"},]# render_template()中第1个参数后面的参数，会将数据传给第1个参数页面，页面中若存在{{ }}，则会匹配后面参数的数据。return render_template('index.html', pro=projects, title='测试平台')if __name__ == '__main__':app.run(debug=True)

前端代码修改：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{{ title }}</title>
</head>
<body>{% for project in pro %}<div>项目名称：{{ project["name"] }},接口数量：{{ project["interface_num"] }},创建日期：{{ project["time"] }}</div>{% endfor %}
</body>
</html>

效果：

for循环排序：获取循环中的index: {{ loop.index }}

loop.index：当前循环迭代的次数，从1开始

loop.index0: 当前循环迭代的次数，从0开始

loop.revindex: 当前循环的逆序次数，从最后一个index开始，直到1

loop.revindex0: 当前循环的逆序次数，从最后一个index开始，直到0

loop.first: 如果是第一次循环迭代，为True

loop.last: 如果是最后一次循环迭代，为True

loop.length: 序列中的项目数（长度）

前端修改：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{{ title }}</title>
</head>
<body>{% for project in pro %}<div>序号：{{ loop.index }}--项目名称：{{ project["name"] }},接口数量：{{ project["interface_num"] }},创建日期：{{ project["time"] }}</div>{% endfor %}
</body>
</html>

效果：

loop判断：

{% if loop.last %}

xxxxxx

{% else %}

xxxxxx

{% endif %}

前端代码修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{{ title }}</title>
</head>
<body>{% for project in pro %}{% set name=project.name %} <!--# 设置变量-->{% if not loop.last %}<div>序号：{{ loop.nextitem.name }}--项目名称：{{ name }},接口数量：{{ project["interface_num"] }},创建日期：{{ project["time"] }}</div>{% else %}<div>序号：{{ loop.index }}--项目名称：{{ name }},接口数量：{{ project["interface_num"] }},创建日期：{{ project["time"] }}</div>{% endif %}{% endfor %}
</body>
</html>

flask(十二)----jinjia2模版渲染相关推荐

Flask(十二)——消息闪现
一个基于GUI好的应用程序需要向用户提供交互的反馈信息. 例如,桌面应用程序使用对话框或消息框,JavaScript使用 alert() 函数用于类似的目的. 在Flask Web应用程序中生成这样的 ...
django 不用自带的mysql_python笔记二 django自带后台管理系统、模版渲染以及使用mysql数据库...
上一篇简单的说了一下整体项目的搭建,但是这还不够,一般完整的项目还要有很多东西,比如前端页面有一些数据不是固定的,需要前后端交互,还需要后台管理系统,有可能我还不想用自带的sqlite,想用mysql ...
Web框架——Flask系列之Flask创建app对象路由（十二）
一.初始化参数 import_name: 当前模块名 static_url_path:静态资源的url前缀,默认为'static' static_folder: 静态文件目录名,默认'static' ...
DirectX12（D3D12）基础教程（二十二） ——HDR IBL 等距柱面环境光源加载和解算及 GS 一次性渲染到 CubeMap
前序文章目录 DirectX12(D3D12)基础教程(一)--基础教程 DirectX12(D3D12)基础教程(二)--理解根签名.初识显存管理和加载纹理.理解资源屏障 DirectX12(D3D ...
第十二章 Django框架
第十二章 Django框架 tcp/ip五层模型应用层传输层网络层数据链路层物理层 socket : 套接字,位于应用层和传输层之间的虚拟层,是一组接口 c/s架构 ------> b ...
iPhone开发基础教程笔记（十二）--第十二章使用Quartz和OpenGL绘图
第十二章使用Quartz和OpenGL绘图有时应用程序需要能够自定义绘图.一个库是Quartz 2D,她是Core Graphics框架的一部分:另一个库是OpenGL ES,她是跨平台的图形库. ...
「第十二章」Web框架安全
「第三篇」服务器端应用安全批注[--] 表示他人.自己.网络批注参考资料来源于* 书中批注* CSDN* GitHub* Google* 维基百科* YouTube* MDN Web Docs由于编写 ...
maya批量命名插件_教你玩转MAYA的四十二精华造诣（第一期）
最近在整理文档时发现我收藏了一篇关于MAYA应用技巧的文章,突然有兴趣看了看,结果发现老版本MAYA中的某些内容很多已经无法应用于新版本.我又上网查了一下,结果发现网上好多帖子和我收藏的这篇内容基本一 ...
Start Developing iOS Apps Today系列(十二)
2019独角兽企业重金招聘Python工程师标准>>> Start Developing iOS Apps Today系列之后续十二.iOS 技术之前您已了解了如何编写一个具有简 ...

flask(十二)----jinjia2模版渲染

flask(十二)----jinjia2模版渲染相关推荐

最新文章

热门文章