render_template 网页模板

模板简单介绍:

  视图函数:视图函数就是装饰器所装饰的方法,视图函数的主要作用是生成请求的响应,这是最简单的请求。实际上,视图函数有两个作用:处理业务逻辑和返回响应内容。在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本。本节学到的模板,它的作用即是承担视图函数的另一个作用,即返回响应内容。

  模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取,使用真实值替换变量,再返回最终得到的字符串,这个过程称为“渲染”,Flask是使用 Jinja2 这个模板引擎来渲染模板

  Jinja2(参考概念)

  两个概念:

 

  Jinja2:是 Python 下一个被广泛应用的模板引擎,是由Python实现的模板语言,他的设计思想来源于 Django 的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言。

  模板语言:是一种被设计来自动生成文档的简单文本格式,在模板语言中,一般都会把一些变量传给模板,替换模板的特定位置上预先定义好的占位变量名。

  官方文档

   渲染模版函数

  Flask提供的 render_template 函数封装了该模板引擎

  模板简单理解就是把前后的代码分离让开发者高效的开发,让代码结构清晰,耦合度降低

 

使用render_template:

 

 网页模板需要flask内的render_template模块:

   

  传参需要先定义好参数传入时render_template()内的第一个参数是html模板名后续加参数,传参时是赋值式  (在html内的标识)= (传入的变量名),也可以用**args,把数据以key value 形式传入字典把整个字典 **变量名传入 到html里直接调用key即可。

  render_template 函数的第一个参数是模板的文件名,后面的参数都是键值对

 

  {%逻辑运算%}有逻辑运算时必须有{%end%}结束比如:

    {%if sum < 1%}      |          {%for i in sum%}

    {% endif %}            |          {% endfor %}

 

  html文件内注释可以使用{# 注释内容 #},也可以使用html内的<!-- 注释 -->注释,但是在逻辑运算时如果使用html内的注释会报错,所以建议常用flask内置注释方法 {# 注释内容 #}

 

PY文件

# -*- encoding: utf-8 -*-
# 网页模板需要导入render_template
from flask import Flask, render_templateapp = Flask(__name__)app.config.from_pyfile('config.ini')@app.route('/')
def index():my_str = '你好世界'my_int = 123my_list = [1, 2, 3, 48, 93]my_dict = {'name': '星宇', 'age': 19}contect = {}contect['my_shijei'] = my_strcontect['myint'] = 0contect['mylist'] = [1, 2, 3, 48, 93]contect['mydict'] = {'name': '牛星宇', 'age': 19}# 使用render_template模块来渲染模板文件,通过第二个参数传递数据变量# return render_template('day3.html', my_shijei=my_str, myint=my_int, mydict=my_dict, mylist=my_list)# 通过**引用来将嵌套dict直接传递给模板return render_template('day3.html', **contect)if __name__ == "__main__":app.run()

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>flask网页模板的学习</title></head><body><div>这是我们第一个网页模板</div><br />{# 这是注释,最基本的模板语法输出一个变量 #}{{ my_shijei + "李毅囧" }}<br />{# 模板语法可以以下标引用的方式输出list元素#} {{ mylist[0]}}{{ mylist.1}}<br />{#模板可以做简单的运算操作#}{{ myint + 10 }} <br />{# 模板可以通过调用key取value#}{{ mydict["name"] }}{{ mydict.age }}{#使用{%%}来定义简单的逻辑控制代码#}{% if myint %}整型存在 {% else %} 不存在 {#使用if判断,一定要有endif用来判断结束逻辑判断#}{% endif %}<ul>{# 使用for循环来遍历list #} {% for itme in mylist %}<li>{{ itme }}</li>{% endfor %}</ul>{# 使用 if for 嵌套来实现单双行背景色#}<table style="padding:5px">{% for item in mylist %}{#使用loop关键字可以调用循环的索引,用来判断下标单双数#}{% if loop.index% 2 == 0 %}<tr style="background-color:tomato"><td style="border:1px solid black;">{{ item }}</td></tr>{%else%}<tr style="background-color:violet"><td style="border:1px solid black;">{{ item }}</td></tr>{% endif%} {% endfor %}</table></body>
</html>

 

转载于:https://www.cnblogs.com/Niuxingyu/p/10154610.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[css] 怎么才能让图文不可复制?

[css] 怎么才能让图文不可复制&#xff1f; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷…

nacos配置刷新失败导致的cpu上升和频繁重启,nacos配置中心源码解析

大家好&#xff0c;我是烤鸭&#xff1a; nacos 版本 1.3.2&#xff0c;先说下结论&#xff0c;频繁重启的原因确实没有找到&#xff0c;跟nacos有关&#xff0c;日志没有保留多少&#xff0c;只能从源码找下头绪(出问题的版本 server用的是 nacos 1.1&#xff0c;nacos-client…

nova— 计算服务

一、nova介绍&#xff1a; Nova 是 OpenStack 最核心的服务&#xff0c;负责维护和管理云环境的计算资源。OpenStack 作为 IaaS 的云操作系统&#xff0c;虚拟机生命周期管理也就是通过 Nova 来实现的。用途与功能 :1) 实例生命周期管理2) 管理计算资源3) 网络和认证管理4)REST…

[css] 写出你知道的CSS水平和垂直居中的方法

[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中:<!-- html --> <div class"outer"><div class"inner"></div> </div>/*css*/ .outer{display:flex;width:200px;height:200px;border:1px solid red; } .…

springcloud gateway 自定义 accesslog elk

大家好&#xff0c;我是烤鸭&#xff1a; ​ 最近用 springcloud gateway 时&#xff0c;想使用类似 logback-access的功能&#xff0c;用来做数据统计和图表绘制等等&#xff0c;发现没有类似的功能&#xff0c;只能自己开发了。 环境&#xff1a; <dependency><gr…

第二阶段团队绩效考核报告

团队绩效考核 基于各种客观问题本次绩效考核采用和第一次冲刺不一样的标准&#xff0c;根据团队贡献事实打分如下 组员打分&#xff1a; 郭良 &#xff08;9.0&#xff09; 赵承龙 &#xff08;5.5&#xff09; &#xff08;根据组内之前定下的打分细则和本期冲刺过程的事实…

[css] 实现单行文本居中和多行文本左对齐并超出显示“...“

[css] 实现单行文本居中和多行文本左对齐并超出显示"…" .one {text-align: center }.multi {overflow: hiddentext-overflow: ellipsisdisplay: -webkit-box-webkit-line-clamp: 3-webkit-box-orient: vertical }可惜多行文本省略, 有严重的兼容性问题个人简介 我…

jenkins发布docker项目 harbor

大家好&#xff0c;我是烤鸭&#xff1a; ​ jenkins 部署k8s 项目还是比较流畅的&#xff0c;本身建立多流水线项目&#xff0c;在项目中添加jenkinsfile就好了&#xff0c;镜像需要额外的参数&#xff0c;还可以添加dokcerfile文件。由于我现在的问题是不能够修改原有的项…

[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样

[css] 不使用border画出1px高的线&#xff0c;在不同浏览器的标准和怪异模式下都能保持效果一样 <div style"width: 100%;height: 1px;"></div><hr size"1">个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&am…

bzoj 3173 最长上升子序列

Written with StackEdit. Description 给定一个序列&#xff0c;初始为空。现在我们将\(1\)到\(N\)的数字插入到序列中&#xff0c;每次将一个数字插入到一个特定的位置。每插入一个数字&#xff0c;我们都想知道此时最长上升子序列长度是多少&#xff1f; Input 第一行一个整数…

java 调用linux 脚本并获取返回值

大家好&#xff0c;我是烤鸭&#xff1a; 今天分享下java 调用 shell脚本 并获取返回值。 代码实践 String cmd "df -h"; StringBuffer sb new StringBuffer(); Process process Runtime.getRuntime().exec(cmd); BufferedReader br new BufferedReader(new In…

[css] 写出主流浏览器内核私有属性的css前缀

[css] 写出主流浏览器内核私有属性的css前缀 完善一下&#xff1a; Chrome&#xff1a;Blink内核 -webkit-Safari&#xff1a;WebKit内核 -webkit-Firefox &#xff1a;Gecko内核 -moz-IE&#xff1a;Trident内核 -ms-Opera&#xff1a;Presto内核 …

补充小知识:文件句柄与文件标识符

#文件句柄 这是操作系统里的一个概念&#xff0c;句柄是WINDOWS用来标识被应用程序所建立或使用的对象的唯一整数&#xff0c;WINDOWS使用各种各样的句柄标识诸如应用程序实例&#xff0c;窗口&#xff0c;控制&#xff0c;位图&#xff0c;GDI对象等等。WINDOWS句柄有点象C语言…

[css] 使用flex实现三栏布局,两边固定,中间自适应

[css] 使用flex实现三栏布局&#xff0c;两边固定&#xff0c;中间自适应 同意里面的一个回答&#xff0c;现在有很多简单的实现方式&#xff0c;传统的这个也是一种hack的方式&#xff0c;真的没必要去追究了&#xff0c;但是核心知识点可以掌握。1.把 center 放在最前面&…

saltstack部署java应用失败无日志——CICD 部署

大家好&#xff0c;我是烤鸭&#xff1a; ​   最近在搞公司的CICD&#xff0c;遇到各种问题。复盘总结一下。 CICD 架构 这篇文章写得很详细&#xff0c;可以看一下 https://linux.cn/article-9926-1.html 而这里只是结合现在的情况分析下&#xff1a; CI 持续集成&…

day15 webUI自动化

一、webdriver的原理 driver webdriver.Chrome()创建浏览器&#xff0c;当做我们的服务端&#xff0c;代码就是客户端&#xff0c;和客户端进行ip绑定&#xff0c;基于http协议发送post请求 WebDriver webdriver是按照server – client的经典设计模式设计的。 webdriver的作用…

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配?

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配&#xff1f; 有选择器&#xff1a; div.ready #wrapper > .bg-red 先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合&#xff0c;然后上一层&#xff0c;对每一个集合中的元素&#xff0c;如果元素的 parent i…

idea 插件开发 扫描sqlserver

大家好&#xff0c;我是烤鸭&#xff1a; 最近在搞sqlserver 升级 mysql/tidb&#xff0c;发现代码里的sql有很多地方需要改&#xff0c;想着能不能开发一个省点力。 官方的迁移指南&#xff1a; https://www.mysql.com/why-mysql/white-papers/sql-server-to-mysql-zh/ 方案…

VUE之文字跑马灯效果

1.效果演示 2.相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"js/vue-2.4.0.js"></script> </head> <body> <div id&…

[css] 用CSS绘制一个三角形

[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid transparent;}wrong.triangle{width: 0;border: 35px solid transparent;border-bottom: 35px solid lightgreen; }个人简介 我是歌谣&#xff0c;欢迎和大家一起…