首页 / GO / Django入门(三) 前端模版语言
Django入门(三) 前端模版语言
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Django入门(三) 前端模版语言，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2461字，纯文字阅读大概需要4分钟。
内容图文
经过前面两节的讲解，我们现在已经可以通过引入外部的样式对我们的html页面进行装饰了。但是不论我们再如何装饰，发布出来的html也只是个静态的页面。比如我们现在需要每次页面刷新的时间都在页面上展示出来。静态页面的内容都是写死的，那现在我们尝试用动态的的语言来实现我们的功能。
django中实现动态页面需要从两个地方进行处理：
1、应用文件夹app01中的views.py要修改index()函数的内容定义要传给html页面的变量内容
2、在html页面代码中加入jinja格式的动态脚本语言，将index()函数里变量内容引入html页面里（Django实现这个功能其实用的就是jinja2这个包）
先简单介绍一下jinja2的动态语言语法。目前常用的其实就是实现for循环和if else判断了。在python中如果要用for方法遍历一个列表的话，代码如下：
li=[1,2,3] for i in li: print i
如果用jinja实现这个循环列表，那么语法就变成了
{% for i in li %}
<h1>{{ i }}</h1>
{% endfor %}
因为html没哟print语法，所以输出的时候加了个<h1>标签。
if的python方法就不写了，直接写jinja的语法了
{% if x == 1 %}
<h1>1234</h1>
{% else %}
<h1>5678</h1>
{% endif %}
从上面的语法可以看出来，其实jinja的判断语句格式python很像。在只是在判断语句两边添加了 {% %} 这个标识。另外在最后的结束的时候还要写上关闭符{% endxx %}。变量用双大括号{{ i }}来包裹。但是不管是列表li还是变量x都是由views.py里的index()传进去的。下面我们来编写一个完整的代码
先修改views.py文件里的index()
views.py
from django.shortcuts import render
import time
# Create your views here.
def index(request):
# 将获取的当前时间格式化后赋值给now_time
now_time = time.strftime(‘%Y-%m-%d %H:%M:%S‘)
# 建立一个字典，将要传给html的变量作为key值，变量的内容作为value值
index_dic = {
‘li‘: [‘haha‘, ‘hehe‘, ‘heihei‘],
‘x‘: 2,
‘now‘: now_time
}
# 将字典导入render方法
return render(request, ‘index.html‘, index_dic)
在修改templates目录下index.html文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/commons.css">
</head>
<body>
{# 所有展示的内容居中显示#}
<div style="text-align: center">
{# 标签内容用红色字体显示#}
<p style="color: red;">this is list</p>
{# 循环遍历列表li#}
{% for i in li %}
<h4>{{ i }}</h4>
{% endfor %}
<p style="color: red;">this is if else</p>
{# if else 循环#}
{% if x == 1 %}
<h4>1234</h4>
{% else %}
<h4>5678</h4>
{% endif %}
{# 输出页面被刷新的时间#}
<h1>Now time {{ now }}</h1>
</div>
<script type="application/javascript" src="/static/js/jquery-2.2.1.min.js"></script>
<script type="application/javascript" src="/static/plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
最后查看网页的运行效果
650) this.width=650;" src="/upload/getfiles/default/2022/11/11/20221111080524119.jpg" title="1.jpg" />到这里，我们就可以结合python把我们想要的内容通过前端脚本语言呈现给用户了。
本文出自 “霹雳豆包” 博客，谢绝转载！
原文：http://830909.blog.51cto.com/8311014/1749080
内容总结
以上是互联网集市为您收集整理的Django入门(三) 前端模版语言全部内容，希望文章能够帮你解决Django入门(三) 前端模版语言所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。