Flask 学习笔记之:传入参数与字典,渲染动态网页

动态网页非“动感”

值得强调的是,不要将动态网页和页面内容是否有动感混为一谈。
所谓“动态”,并不是指放在网页上的GIF图片,动态网页技术有以下几个特点:

  1. “交互性”,即网页会根据用户的要求和选择而动态改变和响应,将浏览器作为客户端界面,这将是今后WEB发展的大势所趋.
  2. “自动更新”,即无须手动地更新HTML文档,便会自动生成新的页面,可以大大节省工作量.
  3. “因时因人而变”,即当不同的时间,不同的人访问同一网址时会产生不同的页面。

何为模板

模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取。

使用模板的好处:

  1. 视图函数只负责业务逻辑和数据处理(业务逻辑方面)
  2. 而模板则取到视图函数的数据结果进行展示(视图展示方面)
  3. 代码结构清晰,耦合度低

光说不见假把式,我们来从代码里看看啥是模板,占位符又在哪里:
在这里插入图片描述
这就是一个模板网页的一部分,可以看到里面有几个{{ }},这些东东括起来几个变量,这个就是占位符了,双花括号中的变量就是渲染是要提供的参数。
(当然不同的动态网页对于占位符和变量的要求和表带形式不同,这里我们只了解 flask所配套的jinja2渲染引擎)

jinja2渲染引擎

Jinja2是什么?
Jinja2 是 Python 下一个被广泛应用的模板引擎,是由Python实现的模板语言,他的设计思想来源于 Django 的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言。
使用真实值替换变量,再返回最终得到的字符串,这个过程称为“渲染”。

jinja2的模板常见用法

在jinja2中,存在三种语法:

控制结构 :{% %}
变量取值: {{ }}
注释 :{# #}
所有的语法语句都必须按要求套上这些括号和字符,才能被jinja2识别到。
jinja2中的变量替换:

var run_time_c = {{sys_run_time}};

渲染的时候sys_run_time的值将会被换到这里,
利用了变量替换给js赋初值。

jinja2中的if语句:

{% if page_column == 'welcome' %}
<h1>欢迎</h1>
{% endif %}

在 page_column的值为’welcome’的时候,if中的部分将会被渲染。

jinja2中的for循环:

用于迭代Python的数据类型,包括列表,元组和字典。
在jinja2中不存在while循环。

迭代列表

<ul>
{% for user in users %}
<li>{{ user.username|title }}</li>
{% endfor %}
</ul>

迭代字典

<dl>
{% for key, value in my_dict.iteritems() %}
<dt>{{ key }}</dt>
<dd>{{ value}}</dd>
{% endfor %}
</dl>

一起来试一试它

在网页部分,我们已经知道要怎么做了,那么在flask中应该如何操作呢?简单!

第一个例子:
前端:

<div class="login_bottom_left"></div>
		<div class="login_fotter">
      <span class="mac_span" id="sys_run_time"> </span>
			<span class="mac_span" >MAC地址:{{sys_info['mac_addr']}}</span>
			<span class="mac_span">IP地址:{{sys_info['ip_addr']}}</span>
			<span class="software_version_span">系统版本号:{{sys_info['sys_version']}}</span>
	  </div>

后端:

def create_sys_info():
    sys_info_dict = {'sys_version': 'V0.1', 'ip_addr': '', 'mac_addr': '','sys_run_time': '','device_type': 'A1'}
    sys_info_dict['ip_addr']=my_ip_addr
    sys_info_dict['mac_addr']=my_mac_addr
    sys_info_dict['sys_run_time']=str(get_sys_run_sec())
    return sys_info_dict

........
;这里省略了一些代码
........
return render_template("login.html",sys_info=create_sys_info())

这里将create_sys_info函数返回的字典直接传入,然后由jinja2去负责填充元素
传入字典这种方法尤其适合传入数量较多但能够归大类的信息(就像我这里的系统信息)
是十分常用并且有用的。

第二个例子:

前端:

{% if login_status == "PWD_ERR" %}
<script language="JavaScript" type="text/javascript">
	alert("管理员密码错误,请重新输入");
</script>
{% endif %}

后端:

 return render_template("login.html",sys_info=create_sys_info(),login_status="PWD_ERR")

当用户输入了错误的密码,我们可以用这种方式传回一个一开始就调用了错误提示框的网页回去,可以以这种方式通知用户,
——————————————————————————
END
欢迎大家关注,点赞哦,您的支持是我加速更新和为您写出更好文章的动力!

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值